diff --git a/components/BlurryPoster/BlurryPoster.styles.tsx b/components/BlurryPoster/BlurryPoster.styles.tsx
index 421201da..608b5f19 100644
--- a/components/BlurryPoster/BlurryPoster.styles.tsx
+++ b/components/BlurryPoster/BlurryPoster.styles.tsx
@@ -26,7 +26,7 @@ export const heading = (imageOnLeft: boolean, isSmallHeading: boolean) => cnb('m
export const customHeading = (imageOnLeft: boolean) => cnb('flex flex-wrap gap-x-[1em] items-center mb-0 -mt-05em lg:-mt-08em children:inline-block', {
'3xl:pl-[calc(100%-750px-40px)] lg:w-[140%] xl:w-[130%]': !imageOnLeft,
});
-export const customHeadingText = (font: 'druk' | 'serif', isSmallHeading: boolean) => cnb('first:ml-0 last:mr-0', {
+export const customHeadingText = (font: 'druk' | 'serif', isSmallHeading: boolean) => cnb('hyphens-auto first:ml-0 last:mr-0', {
'fluid-type-7': font === 'druk',
'md:fluid-type-9' : font === 'druk' && !isSmallHeading,
'md:fluid-type-8 lg:fluid-type-7 3xl:fluid-type-8 4xl:text-[17.1rem]' : font === 'druk' && isSmallHeading,
diff --git a/components/ImageOverlay.tsx b/components/ImageOverlay.tsx
index 01d4b019..3e12b7b0 100644
--- a/components/ImageOverlay.tsx
+++ b/components/ImageOverlay.tsx
@@ -11,6 +11,7 @@ export const overlays = {
'black-gradient-dark': 'bg-gradient-to-b from-transparent via-black-true/30 to-black-true/80',
'black-top-bottom': 'bg-gradient-to-b from-gc-black via-transparent via-40% to-gc-black',
'black-top-sm': 'bg-gradient-to-b from-gc-black via-periwinkle via-20% to-transparent',
+ 'white-70': 'bg-white/70',
};
export type OverlayType = keyof typeof overlays | '';
diff --git a/components/Storyblok/SbSection.tsx b/components/Storyblok/SbSection.tsx
index 537b8b88..ddb43f5e 100644
--- a/components/Storyblok/SbSection.tsx
+++ b/components/Storyblok/SbSection.tsx
@@ -3,11 +3,14 @@ import { storyblokEditable, type SbBlokData } from '@storyblok/react/rsc';
import { CreateBloks } from '../CreateBloks';
import { FlexBox } from '../FlexBox';
import {
- Heading, type HeadingType, SrOnlyText, Text,
+ Heading, type HeadingType, SrOnlyText, Text, Paragraph,
} from '../Typography';
import { Container, type BgColorType } from '../Container';
-import { accentBgColors, type AccentColorType, type PaddingType } from '@/utilities/datasource';
+import { ImageOverlay } from '../ImageOverlay';
+import { accentBgColors, type PaddingType } from '@/utilities/datasource';
import { paletteAccentColors, type PaletteAccentHexColorType } from '@/utilities/colorPalettePlugin';
+import { type SbImageType } from './Storyblok.types';
+import { getProcessedImage } from '@/utilities/getProcessedImage';
type SbSectionProps = {
blok: {
@@ -15,11 +18,14 @@ type SbSectionProps = {
content?: SbBlokData[];
superhead?: string;
heading?: string;
+ isSmallHeading?: boolean;
headingLevel?: HeadingType;
+ subheading?: string;
barColor?: {
value?: PaletteAccentHexColorType;
}
bgColor?: BgColorType;
+ bgImage?: SbImageType;
paddingTop?: PaddingType;
paddingBottom?: PaddingType;
};
@@ -30,9 +36,12 @@ export const SbSection = ({
content,
superhead,
heading,
+ isSmallHeading,
headingLevel,
+ subheading,
barColor: { value: barColorValue } = {},
bgColor,
+ bgImage: { filename, focus } = {},
paddingTop,
paddingBottom,
},
@@ -46,8 +55,11 @@ export const SbSection = ({
pb={paddingBottom}
className="relative overflow-hidden"
>
+ {filename && (
+
+ )}
{(heading || superhead) && (
-
+
{barColorValue && (
{superhead && (
-
+
{superhead}
)}
{heading && (
)}
-
+ {subheading && (
+
+
+ {subheading}
+
+
+ )}
+
diff --git a/components/VerticalCard/VerticalCard.tsx b/components/VerticalCard/VerticalCard.tsx
index 283beffe..99dffca0 100644
--- a/components/VerticalCard/VerticalCard.tsx
+++ b/components/VerticalCard/VerticalCard.tsx
@@ -99,8 +99,8 @@ export const VerticalCard = ({
)}
- {/* Display max 3 topic tags */}
- {!!taxonomy?.length && (
+ {/* No taxonomy for MVP; display max 3 topic tags */}
+ {/* {!!taxonomy?.length && (
{taxonomy.slice(0, 3).map((item) => (
-
@@ -108,7 +108,7 @@ export const VerticalCard = ({
))}
- )}
+ )} */}
);