Sobeys Logo

BS Card Component

The BS Card Component is a flexible, visually engaging content block designed to present key information alongside images and actionable CTAs. It supports a variety of customization options for layout, color, and interactivity.

Main Configuration Fields

Field NameDescription
HeadingMain title or headline of the card.
DescriptionSupporting text or content under the heading.
ImageImage displayed within the card (e.g., top or side layout).
Image Alt TextDescriptive alt text for screen readers and accessibility.
Text ColorChoose between black or white for card text, depending on background.
Theme Background ColorSelect background color from the predefined color palette.
Content Block Background ImageOptional background image for the entire card content area.
Border OptionEnable or disable card border and box shadow styling.

CTA List (Repeatable Section)

Authors can add multiple call-to-action (CTA) items using the Add CTA button. Each CTA includes the following options:

Field NameDescription
CTA Text Label or text for the link or button (e.g., "Learn More").
CTA Link URL or internal page path to navigate to.
Open in New Tab Option to open the link in a new browser tab.
ARIA Label Optional label for screen readers to describe the purpose of the link/button.
CTA TypeChoose from: Plain Link, Button, Outline Button, or Voila Button.
CTA IconOptional icon class to display alongside the CTA text.

Use the repeater to add multiple CTAs, each with unique styling and behavior as needed.

Authoring Tips

  • Use Image Alt Text and ARIA Labels to ensure accessibility compliance.
  • Select text color based on your background to maintain readability.
  • Mix and match CTAs (e.g., primary button + plain link) to guide user interactions effectively.
Voila
Store Banner

What is Lorem Ipsum?

Enjoy the warmth of freshly baked bread, crafted daily for perfect crunch and softness. From sourdough to baguettes, find the freshest loaves for every occasion!