@kitconcept/volto-light-theme 7.0.0-alpha.22 → 7.0.0-alpha.23

package/.changelog.draft

@@ -1,11 +1,16 @@
-## 7.0.0-alpha.22 (2025-08-15)
+## 7.0.0-alpha.23 (2025-08-25)
+
+### Breaking
+
+- By default, the Person images for teasers and listings are rounded (1:1).
+  Added a body tag classname to change them to be squared and 4/5 aspect ratio. @sneridagh 
 
 ### Feature
 
-- Add styles for RSS block (note: full functionality requires RSS addon and templates available in kitconcept.intranet). @danalvrz 
+- Added  Simple Side Slider Variation @Tishasoumya-02 [#sliderVariation](https://github.com/kitconcept/volto-light-theme/pull/sliderVariation)
 
-### Internal
+### Bugfix
 
-- Fix Logos SVG size issue. @Tishasoumya-02 
+- Fix navigation menu misalignment in Intranet mobile view @iRohitSingh [#627](https://github.com/kitconcept/volto-light-theme/pull/627)
 
 

package/CHANGELOG.md

@@ -8,6 +8,21 @@
 
 <!-- towncrier release notes start -->
 
+## 7.0.0-alpha.23 (2025-08-25)
+
+### Breaking
+
+- By default, the Person images for teasers and listings are rounded (1:1).
+  Added a body tag classname to change them to be squared and 4/5 aspect ratio. @sneridagh 
+
+### Feature
+
+- Added  Simple Side Slider Variation @Tishasoumya-02 [#sliderVariation](https://github.com/kitconcept/volto-light-theme/pull/sliderVariation)
+
+### Bugfix
+
+- Fix navigation menu misalignment in Intranet mobile view @iRohitSingh [#627](https://github.com/kitconcept/volto-light-theme/pull/627)
+
 ## 7.0.0-alpha.22 (2025-08-15)
 
 ### Feature

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "7.0.0-alpha.22",
+  "version": "7.0.0-alpha.23",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",
@@ -42,7 +42,7 @@
     "typescript": "^5.7.3",
     "release-it": "^19.0.3",
     "vitest": "^3.1.2",
-    "@plone/types": "1.4.1"
+    "@plone/types": "1.4.5"
   },
   "dependencies": {
     "@dnd-kit/core": "6.0.8",
@@ -52,6 +52,8 @@
     "react-aria-components": "^1.7.0",
     "react-colorful": "^5.6.1",
     "uuid": "^11.0.0",
+    "embla-carousel-autoplay": "^8.0.0",
+    "embla-carousel-react": "^8.0.0",
     "@plone/components": "^3.0.2"
   },
   "peerDependencies": {

package/src/components/Blocks/Slider/SliderVariants.jsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { useIntl, defineMessages } from 'react-intl';
+import Icon from '@plone/volto/components/theme/Icon/Icon';
+import MaybeWrap from '@plone/volto/components/manage/MaybeWrap/MaybeWrap';
+import UniversalLink from '@plone/volto/components/manage/UniversalLink/UniversalLink';
+import { Input, Button, Message } from 'semantic-ui-react';
+import { isInternalURL } from '@plone/volto/helpers/Url/Url';
+import cx from 'classnames';
+import navTreeSVG from '@plone/volto/icons/nav.svg';
+import imageBlockSVG from '@plone/volto/components/manage/Blocks/Image/block-image.svg';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  PleaseChooseContent: {
+    id: 'Please choose an existing content as source for this element',
+    defaultMessage:
+      'Please choose an existing content as source for this element',
+  },
+  moreInfo: {
+    id: 'moreInfo',
+    defaultMessage: 'More info',
+  },
+  source: {
+    id: 'Source',
+    defaultMessage: 'Source',
+  },
+  ButtonText: {
+    id: 'Continue reading',
+    defaultMessage: 'Continue reading',
+  },
+});
+
+const DefaultImage = (props) => <img {...props} alt={props.alt || ''} />;
+
+const SliderVariants = ({
+  index,
+  onChangeBlock,
+  block,
+  data,
+  dataBlock,
+  isEditMode,
+  openObjectBrowser,
+}) => {
+  const intl = useIntl();
+  const href = data.href?.[0];
+  const image = data.preview_image?.[0];
+
+  const Image = config.getComponent('Image').component || DefaultImage;
+  const { openExternalLinkInNewTab } = config.settings;
+
+  const handleClick = () => {
+    openObjectBrowser({
+      onSelectItem: (url, document) => {
+        dataBlock.slides[index].title = document.Title;
+        dataBlock.slides[index].description = document.Description;
+        dataBlock.slides[index].href = [
+          {
+            '@id': document['@id'],
+            Title: document.Title,
+            Description: document.Description,
+            title: document.Title,
+            image_field: document.image_field,
+            hasPreviewImage: document.hasPreviewImage,
+          },
+        ];
+        onChangeBlock(block, dataBlock);
+      },
+      mode: 'link',
+    });
+  };
+
+  return (
+    <div
+      className={cx('grid-teaser-item top', {
+        'empty-slide': !href && isEditMode,
+      })}
+    >
+      {!href && isEditMode && (
+        <Message>
+          <div className="grid-teaser-item default">
+            <img src={imageBlockSVG} alt="" />
+            <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
+            <div className="toolbar-inner">
+              <Button.Group>
+                <Button onClick={handleClick} icon basic>
+                  <Icon name={navTreeSVG} size="24px" />
+                </Button>
+              </Button.Group>
+              <Input
+                placeholder={`${intl.formatMessage(messages.source)}...`}
+                onClick={handleClick}
+                onFocus={(e) => e.target.blur()}
+              />
+            </div>
+          </div>
+        </Message>
+      )}
+      {href && (
+        <MaybeWrap
+          condition={!isEditMode}
+          as={UniversalLink}
+          href={href['@id']}
+          className="link-container"
+          target={
+            data.openLinkInNewTab ||
+            (openExternalLinkInNewTab && !isInternalURL(href['@id']))
+              ? '_blank'
+              : null
+          }
+          tabIndex="-1"
+        >
+          <div
+            className={cx(
+              'teaser-item top',
+              `has--slider--flagAlign--${data.flagAlign}`,
+              dataBlock.variation,
+            )}
+          >
+            {(href?.hasPreviewImage || href.image_field || image) && (
+              <div className="highlight-image-wrapper gradient">
+                <Image
+                  item={image || href}
+                  imageField={image ? image.image_field : href.image_field}
+                  alt=""
+                  loading="lazy"
+                  responsive={true}
+                />
+              </div>
+            )}
+            <div className="teaser-item-title fix-width-issue">
+              <div className="title">
+                {data?.head_title && (
+                  <span className="supertitle">{data?.head_title}</span>
+                )}
+                <h2>{data?.nav_title || data?.title}</h2>
+              </div>
+              <p className="slider-description">{data?.description}</p>
+
+              {!data.hideButton && (
+                <Button tabIndex={'-1'}>
+                  {data.buttonText || intl.formatMessage(messages.ButtonText)}
+                </Button>
+              )}
+            </div>
+          </div>
+        </MaybeWrap>
+      )}
+    </div>
+  );
+};
+
+export default SliderVariants;

package/src/components/Blocks/Slider/View.jsx

@@ -0,0 +1,179 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { Message } from 'semantic-ui-react';
+import useEmblaCarousel from 'embla-carousel-react';
+import Autoplay from 'embla-carousel-autoplay';
+import cx from 'classnames';
+import { defineMessages, useIntl } from 'react-intl';
+import Body from '@kitconcept/volto-slider-block/components/Body';
+import withBlockExtensions from '@plone/volto/helpers/Extensions/withBlockExtensions';
+import {
+  DotButton,
+  NextButton,
+  PrevButton,
+} from '@kitconcept/volto-slider-block/components/DotsAndArrows';
+import teaserTemplate from '@kitconcept/volto-slider-block/icons/teaser-template.svg';
+
+const messages = defineMessages({
+  PleaseChooseContent: {
+    id: 'Please choose an existing content as source for this element',
+    defaultMessage:
+      'Please choose an existing content as source for this element',
+  },
+});
+
+const SliderView = (props) => {
+  const {
+    className,
+    data,
+    isEditMode = false,
+    block,
+    openObjectBrowser,
+    onChangeBlock,
+    slideIndex,
+    setSlideIndex,
+  } = props;
+  const intl = useIntl();
+
+  const [prevBtnDisabled, setPrevBtnDisabled] = useState(true);
+  const [nextBtnDisabled, setNextBtnDisabled] = useState(true);
+  const [selectedIndex, setSelectedIndex] = useState(0);
+  const [scrollSnaps, setScrollSnaps] = useState([]);
+  const autoplay =
+    data.autoplayEnabled !== undefined ? data.autoplayEnabled : false;
+  const autoplayOptions = {
+    delay: data.autoplayDelay,
+    jump: data.autoplayJump,
+  };
+  const plugins = isEditMode ? [] : autoplay ? [Autoplay(autoplayOptions)] : [];
+
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, plugins);
+
+  const scrollPrev = useCallback(() => {
+    if (emblaApi) {
+      emblaApi.scrollPrev();
+      setSlideIndex && setSlideIndex(selectedIndex - 1);
+    }
+  }, [emblaApi, selectedIndex, setSlideIndex]);
+
+  const scrollNext = useCallback(() => {
+    if (emblaApi) {
+      emblaApi.scrollNext();
+      setSlideIndex && setSlideIndex(selectedIndex + 1);
+    }
+  }, [emblaApi, selectedIndex, setSlideIndex]);
+
+  const scrollTo = useCallback(
+    (index) => {
+      if (emblaApi) {
+        emblaApi.scrollTo(index);
+        setSlideIndex && setSlideIndex(index);
+      }
+    },
+    [emblaApi, setSlideIndex],
+  );
+
+  const onInit = useCallback((emblaApi) => {
+    setScrollSnaps(emblaApi.scrollSnapList());
+  }, []);
+
+  const onSelect = useCallback((emblaApi) => {
+    setSelectedIndex(emblaApi.selectedScrollSnap());
+    setPrevBtnDisabled(!emblaApi.canScrollPrev());
+    setNextBtnDisabled(!emblaApi.canScrollNext());
+  }, []);
+
+  useEffect(() => {
+    if (!emblaApi) return;
+
+    onInit(emblaApi);
+    onSelect(emblaApi);
+    emblaApi.on('reInit', onInit);
+    emblaApi.on('reInit', onSelect);
+    emblaApi.on('select', onSelect);
+  }, [emblaApi, onInit, onSelect]);
+
+  useEffect(() => {
+    // This syncs the current slide with the objectwidget (or other sources
+    // able to access the slider context)
+    // that can modify the SliderContext (and come here via props slideIndex)
+    if (isEditMode) {
+      scrollTo(slideIndex);
+    }
+  }, [slideIndex, scrollTo, isEditMode]);
+
+  const sliderContainerWidth = emblaApi
+    ?.rootNode()
+    .getBoundingClientRect().width;
+
+  return (
+    <>
+      {/* START CUSTOMIZATION */}
+      <div
+        className={cx('block slider', data.variation || 'default', className)}
+        style={{ '--slider-container-width': `${sliderContainerWidth}px` }}
+      >
+        {/* END CUSTOMIZATION */}
+        {(data.slides?.length === 0 || !data.slides) && isEditMode && (
+          <Message>
+            <div className="teaser-item default">
+              <img src={teaserTemplate} alt="" />
+              <p>{intl.formatMessage(messages.PleaseChooseContent)}</p>
+            </div>
+          </Message>
+        )}
+        {data.slides?.length > 0 && (
+          <>
+            <div className="slider-wrapper">
+              {!data.hideArrows && data.slides?.length > 1 && (
+                <>
+                  <PrevButton onClick={scrollPrev} disabled={prevBtnDisabled} />
+                  <NextButton onClick={scrollNext} disabled={nextBtnDisabled} />
+                </>
+              )}
+
+              <div className="slider-viewport" ref={emblaRef}>
+                <div className="slider-container">
+                  {data.slides &&
+                    data.slides.map((item, index) => {
+                      return (
+                        <div key={item['@id']} className="slider-slide">
+                          <Body
+                            {...props}
+                            key={item['@id']}
+                            data={item}
+                            isEditMode={isEditMode}
+                            dataBlock={data}
+                            index={index}
+                            block={block}
+                            openObjectBrowser={openObjectBrowser}
+                            onChangeBlock={onChangeBlock}
+                            isActive={selectedIndex === index}
+                          />
+                        </div>
+                      );
+                    })}
+                </div>
+              </div>
+            </div>
+            {data.slides?.length > 1 && (
+              <div className="slider-dots">
+                {scrollSnaps.map((_, index) => (
+                  <DotButton
+                    key={index}
+                    index={index}
+                    onClick={() => scrollTo(index)}
+                    className={'slider-dot'.concat(
+                      index === selectedIndex ? ' slider-dot--selected' : '',
+                    )}
+                  />
+                ))}
+              </div>
+            )}
+          </>
+        )}
+      </div>
+    </>
+  );
+};
+
+export default withBlockExtensions(SliderView);

package/src/config/blocks.tsx

@@ -45,6 +45,8 @@ import SearchBlockViewEvent from '../components/Blocks/EventCalendar/Search/Sear
 import SearchBlockEditEvent from '../components/Blocks/EventCalendar/Search/SearchBlockEdit';
 import SearchBlockSchemaEvent from '../components/Blocks/EventCalendar/Search/schema';
 import EventCalenderTemplate from '../components/Blocks/EventCalendar/Search/components/EventTemplate';
+import SliderVariants from '../components/Blocks/Slider/SliderVariants';
+import DefaultBody from '../customizations/@kitconcept/volto-slider-block/components/DefaultBody';
 
 declare module '@plone/types' {
   export interface BlocksConfigData {
@@ -414,6 +416,20 @@ export default function install(config: ConfigType) {
   // Slider Block
   config.blocks.blocksConfig.slider = {
     ...config.blocks.blocksConfig.slider,
+    variations: [
+      {
+        id: 'default',
+        title: 'Default',
+        isDefault: true,
+        view: DefaultBody,
+      },
+
+      {
+        id: 'simple',
+        title: 'Simple',
+        view: SliderVariants,
+      },
+    ],
     schemaEnhancer: sliderBlockSchemaEnhancer,
   };
 

package/src/customizations/@kitconcept/volto-slider-block/components/View.jsx

@@ -0,0 +1,11 @@
+/**
+ * OVERRIDE View.jsx
+ * REASON: Adding variants.
+ * VERSION: 6.3.1
+ * DATE: 2025-07-18
+ * DEVELOPER: @Tishasoumya-02
+ */
+
+import View from '../../../../components/Blocks/Slider/View';
+
+export default View;

package/src/stories/grid.teaser.stories.tsx

@@ -324,3 +324,129 @@ export const FourPerson: Story = {
     data: gridBlockFourPerson,
   },
 };
+
+export const OnePersonSquared: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div
+        className="person-squared-images"
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockOnePerson,
+  },
+};
+
+export const TwoPersonSquared: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div
+        className="person-squared-images"
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockTwoPerson,
+  },
+};
+
+export const TwoDocumentAndPersonSquared: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div
+        className="person-squared-images"
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockTwoDocumentPerson,
+  },
+};
+
+export const TwoPersonsDifferentImageRatioSquared: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div
+        className="person-squared-images"
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockTwoPersonDifferentRatio,
+  },
+};
+
+export const ThreePersonSquared: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div
+        className="person-squared-images"
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockThreePerson,
+  },
+};
+
+export const FourPersonSquared: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div
+        className="person-squared-images"
+        style={{
+          containerType: 'inline-size',
+          width: 'var(--default-container-width)',
+        }}
+      >
+        <BlockWrapper {...args}>
+          <GridBlockView {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: gridBlockFourPerson,
+  },
+};

package/src/stories/listing.stories.tsx

@@ -71,3 +71,113 @@ export const PersonSummary: Story = {
     ),
   ],
 };
+
+export const PersonSummaryWithBigDescription: Story = {
+  render: (args) => (
+    <BlockWrapper {...args}>
+      <div className="block listing summary">
+        <ListingBody {...args} />
+      </div>
+    </BlockWrapper>
+  ),
+  args: {
+    data: {
+      ...listingBlockPerson,
+      items: [
+        {
+          ...listingBlockPerson.items[0],
+          description:
+            'USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations. USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations. USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations. USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.',
+        },
+      ],
+    },
+    listingItems: listingBlockPerson.items,
+    variation: {
+      id: 'summary',
+      template: SummaryTemplate,
+      title: 'List with images',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <div style={{ width: 'var(--default-container-width)' }}>
+          <Story />
+        </div>
+      </Wrapper>
+    ),
+  ],
+};
+
+export const PersonSummarySquared: Story = {
+  render: (args) => (
+    <BlockWrapper {...args}>
+      <div className="block listing summary">
+        <ListingBody {...args} />
+      </div>
+    </BlockWrapper>
+  ),
+  args: {
+    data: {
+      ...listingBlockPerson,
+    },
+    listingItems: listingBlockPerson.items,
+    variation: {
+      id: 'summary',
+      template: SummaryTemplate,
+      title: 'List with images',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <div
+          className="person-squared-images"
+          style={{ width: 'var(--default-container-width)' }}
+        >
+          <Story />
+        </div>
+      </Wrapper>
+    ),
+  ],
+};
+
+export const PersonSummarySquaredWithBigDescription: Story = {
+  render: (args) => (
+    <BlockWrapper {...args}>
+      <div className="block listing summary">
+        <ListingBody {...args} />
+      </div>
+    </BlockWrapper>
+  ),
+  args: {
+    data: {
+      ...listingBlockPerson,
+      items: [
+        {
+          ...listingBlockPerson.items[0],
+          description:
+            'USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations. USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations. USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations. USS Voyager Captain from the 24th century. She is known for her strong leadership skills and her ability to make tough decisions in difficult situations.',
+        },
+      ],
+    },
+    listingItems: listingBlockPerson.items,
+    variation: {
+      id: 'summary',
+      template: SummaryTemplate,
+      title: 'List with images',
+    },
+  },
+  decorators: [
+    (Story) => (
+      <Wrapper>
+        <div
+          className="person-squared-images"
+          style={{ width: 'var(--default-container-width)' }}
+        >
+          <Story />
+        </div>
+      </Wrapper>
+    ),
+  ],
+};

package/src/stories/teaser.stories.tsx

@@ -127,3 +127,67 @@ export const PersonTeaserRight: Story = {
     },
   },
 };
+
+export const PersonTeaserLeftSquared: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div
+        className="person-squared-images"
+        style={{ width: 'var(--default-container-width)' }}
+      >
+        <BlockWrapper {...args}>
+          <TeaserBody {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: personBlock,
+  },
+};
+
+export const PersonTeaserTopSquared: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div
+        className="person-squared-images"
+        style={{ width: 'calc(var(--default-container-width) / 2)' }}
+      >
+        <BlockWrapper {...args}>
+          <TeaserBody {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: {
+      ...personBlock,
+      styles: {
+        align: 'center',
+      },
+    },
+  },
+};
+
+export const PersonTeaserRightSquared: Story = {
+  render: (args) => (
+    <Wrapper>
+      <div
+        className="person-squared-images"
+        style={{ width: 'var(--default-container-width)' }}
+      >
+        <BlockWrapper {...args}>
+          <TeaserBody {...args} />
+        </BlockWrapper>
+      </div>
+    </Wrapper>
+  ),
+  args: {
+    data: {
+      ...personBlock,
+      styles: {
+        align: 'right',
+      },
+    },
+  },
+};

package/src/theme/_header.scss

@@ -335,13 +335,21 @@
         }
 
         .menu-drawer {
-          @media only screen and (max-width: $computer-breakpoint) {
-            top: 210px;
+          @media only screen and (max-width: 961px) {
+            top: 208px;
 
             .search-button {
               display: none;
             }
           }
+
+          @media only screen and (max-width: $tablet-breakpoint) {
+            top: 168px;
+          }
+
+          @media only screen and (max-width: 620px) {
+            top: 225px;
+          }
         }
       }
       .logo {

package/src/theme/blocks/_slider.scss

@@ -8,32 +8,41 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
   }
 
   .slider-viewport {
-    margin-bottom: 0;
+    margin-bottom: $spacing-medium;
   }
 
   .slider-dots {
-    padding-bottom: 40px;
-  }
-
-  .highlight-image-wrapper {
-    display: flex; // Small gap was appearing between the wrapper and the image (??)
-
-    img {
-      // Override Volto's Image Component inline style aspect ratio.
-      aspect-ratio: var(
-        --image-aspect-ratio,
-        $sliderImagesAspectRatio
-      ) !important;
-    }
+    padding-bottom: $spacing-medium;
   }
 
   .teaser-item,
   .grid-teaser-item {
     flex-direction: column;
+    @media only screen and (max-width: $computer-width) {
+      height: 100%;
+    }
   }
+  .link-container {
+    @media only screen and (max-width: $computer-width) {
+      height: 100%;
+    }
+  }
+
   .teaser-item {
-    padding-bottom: $spacing-medium;
+    .highlight-image-wrapper {
+      display: flex; // Small gap was appearing between the wrapper and the image (??)
 
+      img {
+        // Override Volto's Image Component inline style aspect ratio.
+        aspect-ratio: var(
+          --image-aspect-ratio,
+          $sliderImagesAspectRatio
+        ) !important;
+      }
+    }
+    @media only screen and (max-width: $computer-width) {
+      display: flex;
+    }
     .teaser-item-title {
       position: absolute;
       top: 50%;
@@ -51,6 +60,7 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
       @media only screen and (max-width: $computer-width) {
         position: static;
         width: 100%;
+        height: 100%;
         padding: 60px 20px;
         background: $black;
         transform: none;
@@ -112,4 +122,114 @@ $sliderImagesAspectRatio: var(--slider-images-aspect-ratio, 16/9);
     line-height: 20px;
     text-align: center;
   }
+
+  &.simple {
+    .slider-viewport {
+      margin-bottom: 0;
+    }
+    .teaser-item {
+      display: grid;
+      align-items: center;
+      padding: 0 130px;
+      aspect-ratio: 2/1;
+      background-color: var(--theme-color);
+      gap: clamp(30px, 4vw, 60px);
+      grid-template-areas: 'images content';
+      grid-template-rows: auto;
+      @media only screen and (max-width: $computer-width) {
+        display: flex;
+        padding: 0 0;
+        aspect-ratio: auto;
+        gap: 0;
+      }
+
+      &.has--slider--flagAlign--right {
+        grid-template-areas: 'images content';
+        grid-template-columns: clamp(300px, 40vw, 600px) auto;
+      }
+      &.has--slider--flagAlign--left {
+        grid-template-areas: 'content images';
+        grid-template-columns: auto clamp(300px, 40vw, 600px);
+      }
+
+      .highlight-image-wrapper {
+        grid-area: images;
+
+        img {
+          aspect-ratio: var(
+            --image-aspect-ratio,
+            $sliderImagesAspectRatio
+          ) !important;
+
+          @media only screen and (max-width: $computer-width) {
+            width: 100%;
+          }
+        }
+      }
+      .teaser-item-title {
+        position: relative;
+        top: 0;
+        width: 100%;
+        align-content: center;
+        padding: 0;
+        background: none;
+        color: var(--theme-foreground-color);
+        grid-area: content;
+        transform: none;
+
+        @media only screen and (max-width: $computer-width) {
+          position: relative;
+          width: 100%;
+          height: 100%;
+          padding: 60px 20px;
+          background: var(--theme-foreground-color);
+          color: $white;
+          transform: none;
+          .ui.button,
+          .title > h2,
+          p.slider-description {
+            color: $white !important;
+          }
+          p.slider-description {
+            -webkit-line-clamp: 8;
+            line-clamp: 8;
+          }
+        }
+
+        .title {
+          h2 {
+            color: var(--theme-foreground-color);
+          }
+        }
+        p {
+          color: var(--theme-foreground-color);
+          -webkit-line-clamp: 10;
+          line-clamp: 10;
+        }
+      }
+      .slider-description {
+        margin-bottom: $spacing-large;
+        font-size: 18px;
+        font-weight: 300;
+        line-height: 24px;
+      }
+    }
+    .slider-button {
+      display: flex;
+      width: 130px;
+      height: 100%;
+      align-items: center;
+      background: none;
+      opacity: 1;
+      svg.icon {
+        width: 50px !important;
+        height: 50px !important;
+        padding: 40px;
+        color: var(--theme-foreground-color);
+      }
+    }
+    .ui.button {
+      color: var(--theme-foreground-color);
+    }
+  }
 }

package/src/theme/person.scss

@@ -8,23 +8,23 @@
   .person-teaser.has--align--right:not(.contained) & {
     .card-inner {
       .image-wrapper {
-        --person-image-max-width: 220px;
-        --person-image-max-height: 285px;
         overflow: hidden;
-        aspect-ratio: 4 / 5;
+        align-self: center;
+        border-radius: var(--person-image-border-radius, 10000px);
+        aspect-ratio: var(--person-image-aspect-ratio, 1 / 1);
         block-size: auto; // derived from `aspect-ratio`
 
         /* We allow the browser to adjust the real size within the maximums without
          distorting the aspect ratio */
         inline-size: 100%;
-        max-block-size: var(--person-image-max-height);
-        max-inline-size: var(--person-image-max-width);
+        max-block-size: var(--person-image-max-height, 220px);
+        max-inline-size: var(--person-image-max-width, 220px);
 
         img {
           width: 100%;
           height: 100%;
           object-fit: cover;
-          object-position: top center;
+          object-position: center;
         }
       }
     }
@@ -68,29 +68,30 @@
 
   // Teaser in Grid
   .contained.person-teaser & {
-    // Exploration for rounded images in person-teasers
-    // --person-image-height: auto;
-    // --person-image-border-radius: 10000px;
-    // --person-image-aspect-ratio: 1/1;
+    // Settings for BRH:
+    // --person-image-aspect-ratio: 4 / 5;
+    // --person-image-border-radius: 0;
+    // --person-image-max-height: 285px;
+    // .image-wrapper img { object-position: top center; }
+
     .image-wrapper {
-      --person-image-max-width: 220px;
-      --person-image-max-height: 285px;
       overflow: hidden;
+      border-radius: var(--person-image-border-radius, 10000px);
       margin: 0 auto;
-      aspect-ratio: 4 / 5;
+      aspect-ratio: var(--person-image-aspect-ratio, 1 / 1);
       block-size: auto; // derived from `aspect-ratio`
 
       /* We allow the browser to adjust the real size within the maximums without
        distorting the aspect ratio */
       inline-size: 100%;
-      max-block-size: var(--person-image-max-height);
-      max-inline-size: var(--person-image-max-width);
+      max-block-size: var(--person-image-max-height, 220px);
+      max-inline-size: var(--person-image-max-width, 220px);
 
       img {
         width: 100%;
         height: 100%;
         object-fit: cover;
-        object-position: top center;
+        object-position: center;
       }
     }
   }
@@ -173,7 +174,7 @@ body .block.gridBlock .block.teaser.contained.person-teaser .card-inner {
   margin-left: auto;
 }
 
-// Listings (no card)
+// Listings
 .block.listing {
   .listing-item.person-listing {
     &,
@@ -189,6 +190,37 @@ body .block.gridBlock .block.teaser.contained.person-teaser .card-inner {
     img {
       aspect-ratio: initial !important;
     }
+
+    .card-inner {
+      .image-wrapper {
+        overflow: hidden;
+        align-self: center;
+        border-radius: var(--person-image-border-radius, 10000px);
+        aspect-ratio: var(--person-image-aspect-ratio, 1 / 1);
+        block-size: auto; // derived from `aspect-ratio`
+
+        /* We allow the browser to adjust the real size within the maximums without
+         distorting the aspect ratio */
+        inline-size: 100%;
+        max-block-size: var(--person-image-max-height, 220px);
+        max-inline-size: var(--person-image-max-width, 220px);
+
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+          object-position: center;
+        }
+      }
+    }
+
+    .card-summary {
+      align-self: center;
+
+      .description {
+        margin-bottom: $spacing-small;
+      }
+    }
   }
 }
 
@@ -201,3 +233,25 @@ body .block.gridBlock .block.teaser.contained.person-teaser .card-inner {
 .block-editor-search.summary .listing-item.person-listing img {
   aspect-ratio: initial !important;
 }
+
+// Squared images
+// Custom TTW CSS in case of squared images
+// :root {--person-image-max-height: 285px;--person-image-aspect-ratio: 4 / 5;
+// --person-image-border-radius: 0;}
+
+// .contained.person-teaser .card {
+// .image-wrapper img { object-position: top center !important; }
+// }
+
+body.person-squared-images,
+.person-squared-images {
+  --person-image-max-height: 285px;
+  --person-image-aspect-ratio: 4 / 5;
+  --person-image-border-radius: 0;
+
+  .contained.person-teaser .card {
+    .image-wrapper img {
+      object-position: top center !important;
+    }
+  }
+}