Card Groups
The Card Groups component (be-card-groups) is a container that organizes multiple Card (be-Card) child components in a responsive layout. It exposes an inner placeholder where individual Card renderings are dropped, and those cards automatically render in a flexible row/column arrangement controlled by Bootstrap grid utilities on each card’s rendering parameters.
Each Card uses the Beryllium datasource template (providing Title, Copy, Image, and Link fields) and supports four display variants via the CardType parameter: image (default with top image), horizontal (side-by-side image and body), bordered (no image, border-only styling), and overlayed (text overlaying the image). Cards also support stretched links, configurable heading levels, link/button styles, and border/text colour overrides.
Examples
Live Example
Below is a livebe-card-groups rendering containing three be-Card child components using the default image card type. Each card uses the Beryllium datasource with a title, description copy, and a link styled as an icon-link. The cards are configured at medium breakpoint to occupy 4 columns each (3-up layout) with equal height enforced by the card group container.
Professional Liability
Comprehensive coverage for professionals against claims of negligence, errors, or omissions in their services.
Cyber Insurance
Protect your business against data breaches, ransomware attacks, and other digital threats with tailored cyber coverage.
Workers Compensation
Statutory coverage providing wage replacement and medical benefits to employees injured during the course of employment.
Usage Notes
Usage Notes
- Card Groups is a container-only rendering. It exposes an inner placeholder where individual Card renderings are placed.
- Each Card requires a Beryllium datasource (Title, Copy, Image, Link). If the Link target item is restricted by security, the card is hidden automatically.
- Use the
CardTypedictionary phrase on the Card rendering parameters to switch between image, horizontal, bordered, and overlayed layouts. - The
StretchedLinkparameter is enabled by default, making the entire card clickable. Set it to0to disable. - Column widths (Small / Medium / Large) on each Card control their size within the row. Use matching widths for a uniform grid or mix values for asymmetric layouts.
- The Card Groups container applies its own CSS classes via
_.CardGroup.Classes. Additional layout classes (gutters, alignment) should be set on the parent section, not on the Card Group itself. - For equal-height cards, the default rendering already uses Bootstrap
h-100on each card element.
Control Properties
Control Properties
Card Groups (Container)
| Property | Source | Description |
|---|---|---|
| CSS Classes | _.CardGroup.Classes | Additional CSS classes applied to the wrapper div of the card group container. |
| Placeholder | _.CardGroup.Placeholder | The inner placeholder key that accepts Card child renderings. |
Card (Child Rendering)
| Property | Source | Description |
|---|---|---|
| CardType | Dictionary Phrase | Layout variant: image (default), horizontal, bordered, or overlayed. |
| StretchedLink | Rendering Parameter | When not 0, the entire card becomes clickable via the primary link. Default is enabled. |
| LinkStyle | Dictionary Phrase | CSS class(es) applied to the CTA link/button (e.g. btn btn-primary, icon-link). |
| ButtonSize | Dictionary Phrase | Button sizing class (e.g. btn-sm, btn-lg). |
| HeadingSize | Dictionary Phrase | Heading element used for the card title (defaults to h4). |
| BorderColor | Dictionary Phrase | Bootstrap border color class suffix (e.g. primary, danger). |
| TextColor | Dictionary Phrase | Bootstrap text color class suffix applied to the card body. |
| Small / Medium / Large | Rendering Parameter | Bootstrap column width at each breakpoint (controls card width within the row). |
| OffsetSmall / OffsetMedium / OffsetLarge | Rendering Parameter | Column offset at each breakpoint. |
| data-testid | Rendering Parameter | Optional test identifier added to the card wrapper element. |
Beryllium Datasource Fields
| Field | Type | Description |
|---|---|---|
| Title | Single-Line Text | Card heading text rendered inside the configured heading element. |
| Copy | Rich Text | Card body copy rendered below the title. |
| Image | Image | Card image. Used as card-img-top in default mode, fluid in horizontal, and background in overlayed. |
| Link | General Link | Primary CTA link. The link text is rendered inside the button/link element. |