diff --git a/components/Storyblok/SbSection.tsx b/components/Storyblok/SbSection.tsx
index 5965f03d..34da3473 100644
--- a/components/Storyblok/SbSection.tsx
+++ b/components/Storyblok/SbSection.tsx
@@ -7,7 +7,6 @@ import {
} from '../Typography';
import { Container, type BgColorType } from '../Container';
import { ImageOverlay } from '../ImageOverlay';
-import { WidthBox, type WidthType } from '../WidthBox';
import { accentBgColors, type PaddingType } from '@/utilities/datasource';
import { paletteAccentColors, type PaletteAccentHexColorType } from '@/utilities/colorPalettePlugin';
import { type SbImageType } from './Storyblok.types';
@@ -22,6 +21,7 @@ type SbSectionProps = {
isSmallHeading?: boolean;
headingLevel?: HeadingType;
subheading?: string;
+ rightAlignHeader?: boolean;
barColor?: {
value?: PaletteAccentHexColorType;
}
@@ -40,6 +40,7 @@ export const SbSection = ({
isSmallHeading,
headingLevel,
subheading,
+ rightAlignHeader,
barColor: { value: barColorValue } = {},
bgColor,
bgImage: { filename, focus } = {},
@@ -60,22 +61,24 @@ export const SbSection = ({
)}
{(heading || superhead) && (
-
+
{barColorValue && (
)}
{superhead && (
-
+
{superhead}
)}
@@ -86,6 +89,7 @@ export const SbSection = ({
leading="none"
uppercase
font="druk"
+ align={rightAlignHeader ? 'right' : 'left'}
className="mb-0"
>
{superhead && {`${superhead}:`}}{heading}
@@ -99,9 +103,10 @@ export const SbSection = ({
{subheading}