SectionCard

Overview

SectionCard is a CORE-OWNED composition building block in src/core/components/sections/SectionCard.astro. It renders a single card with heading, body text, optional media, badge, icon, and action links. It is not used directly in page content — section components like InfoCards and FeatureGrid consume it by passing card data arrays.

Props

Prop	Type	Default	Description
title	string	required	Card heading text
body	string	required	Card body text
badge	string	—	Small label rendered below the heading
icon	string	—	Emoji or text icon rendered before the heading
media	SectionMedia	—	Image object with src and alt properties
orientation	"vertical" | "horizontal"	"vertical"	Card layout direction
links	SectionCardLink[]	[]	Action links, each with href, label, and optional external flag
fullCardClick	boolean	true	Enable full-card click area when a single link is present
itemFullCardClick	boolean	—	Per-item override of fullCardClick, passed from the parent section component
titleLink	boolean	false	When true, the primary link wraps the title instead of appearing as a separate link in the body
cardBackground	SectionBackground	"soft"	Card surface variant: default, soft, strong, contrast, inverted, primary, secondary, tertiary
headingLevel	1–6	3	Semantic heading level
headingSize	xs–display	"xl"	Visual heading size (decoupled from semantic level)
class	string	—	Additional CSS classes

Behavior

Full-card click

When fullCardClick is true and the card has exactly one link, the entire card surface becomes clickable. This is implemented via a ::after pseudo-element overlay positioned over the card. The link remains accessible through the heading text, so keyboard and screen reader users interact with a standard link element.

When itemFullCardClick is provided, it overrides the fullCardClick default for that specific card instance — this allows parent section components to control the behavior per item.

Orientation

• Vertical (default): Media stacks above content.
• Horizontal: At narrow viewports, cards stack vertically. At 48rem and above, media and content display side-by-side with media taking approximately 40% of the card width.

Background variants

Each cardBackground variant applies a .surface--bg-* class that remaps --st-color-link and --st-color-link-hover tokens. This ensures link colors remain accessible on every surface — inverted surfaces get light link colors, brand surfaces get appropriately contrasting link colors, and so on.

Title link

When titleLink is true, the primary link wraps the heading text directly rather than appearing as a standalone link in the card body. This is useful for cards where the heading itself should be the click target.

Heading

SectionCard uses the Heading component (not raw <h> tags), so heading level and visual size are always decoupled correctly.

CSS API

BEM root class: section-card

Class	Element
.section-card	Card root
.section-card__media	Media container (image wrapper)
.section-card__content	Content area (heading + body)
.section-card__title	Heading wrapper
.section-card__body	Body text
.section-card__links	Action links container
.section-card__primary-link	Primary action link

These classes are available as CSS API hooks for site-level overrides in src/site/styles/.

Usage

SectionCard is an internal primitive — it is not imported directly in page content. Section components like InfoCards and FeatureGrid pass arrays of card data objects, and each item is rendered as a SectionCard.

Note: To customize card appearance at the site level, target the BEM classes above in site-owned stylesheets rather than modifying the core component.