Single Link Card
Default Full-Card
One link should enable full-card click when section-level fullCardClick is true.
Read moreInfoCards
Card grid sections with vertical and horizontal orientations, full-card click behavior, and item-level overrides.
InfoCards Vertical (default)
Validates full-card behavior and item-level overrides.
-
-
Multi-link Card
Auto Disable
Multiple links should automatically disable full-card click behavior.
-
Item-level Opt-out
Item Override
Item-level override should disable full-card click even with one link.
Show code
<LayoutSection verticalPadding="sm">
<Heading level={3} size="2xl">InfoCards Vertical</Heading>
<p class="mt-sm mb-lg">Section subheading.</p>
<InfoCards
items={[
{
title: "Single Link Card",
body: "One link enables full-card click when fullCardClick is true.",
badge: "Default Full-Card",
media: { src: cardImage, alt: "Card media sample" },
links: [{ href: "/about/", label: "Read more" }],
},
{
title: "Item-level Opt-out",
body: "Item-level override disables full-card click.",
badge: "Item Override",
links: [{ href: "/contact/", label: "Contact" }],
fullCardClick: false,
cardBackground: "contrast",
},
]}
columns={3}
cardOrientation="vertical"
fullCardClick={true}
/>
</LayoutSection>InfoCards Horizontal
Validates horizontal orientation and two-column layout.
-
Single Link Card
Default Full-Card
One link should enable full-card click when section-level fullCardClick is true.
Read more -
Multi-link Card
Auto Disable
Multiple links should automatically disable full-card click behavior.
-
Item-level Opt-out
Item Override
Item-level override should disable full-card click even with one link.
Show code
<LayoutSection verticalPadding="2xl">
<Heading level={3} size="2xl">InfoCards Horizontal</Heading>
<p class="mt-sm mb-lg">Validates horizontal orientation and two-column layout.</p>
<InfoCards
items={[
{
title: "Single Link Card",
body: "One link enables full-card click.",
badge: "Default Full-Card",
media: { src: cardImage, alt: "Card media sample" },
links: [{ href: "/about/", label: "Read more" }],
cardBackground: "strong",
},
{
title: "Multi-link Card",
body: "Multiple links disable full-card click automatically.",
badge: "Auto Disable",
links: [
{ href: "/theme-docs/", label: "Documentation" },
{ href: "/articles/", label: "Articles" },
],
},
]}
columns={2}
cardOrientation="horizontal"
fullCardClick={true}
/>
</LayoutSection>FeatureGrid
Icon-enabled feature cards with vertical and horizontal orientations and shared link behavior.
FeatureGrid Vertical (default)
Icon-enabled cards with shared link behavior.
-
Fast by Default
Performance
Astro-first rendering with minimal hydration keeps core routes lean.
See layout docs -
Token-driven Styling
Design Tokens
Semantic and on-surface tokens keep component surfaces consistent.
-
Accessible Interaction
Accessibility
Keyboard paths and visible focus states are required for interactive surfaces.
Read policy
Show code
<LayoutSection verticalPadding="sm">
<Heading level={3} size="2xl">FeatureGrid Vertical</Heading>
<p class="mt-sm mb-lg">Icon-enabled cards with shared link behavior.</p>
<FeatureGrid
items={[
{
title: "Fast by Default",
body: "Astro-first rendering with minimal hydration keeps core routes lean.",
icon: "⚡",
badge: "Performance",
links: [{ href: "/theme-docs/configuration/layouts/", label: "See layout docs" }],
},
{
title: "Token-driven Styling",
body: "Semantic and on-surface tokens keep component surfaces consistent.",
icon: "🎨",
badge: "Design Tokens",
links: [{ href: "/theme-docs/design-system/design-tokens/", label: "Token docs" }],
cardBackground: "contrast",
},
]}
columns={3}
cardOrientation="vertical"
fullCardClick={true}
/>
</LayoutSection>FeatureGrid Horizontal
Horizontal feature cards with two-column layout.
-
Fast by Default
Performance
Astro-first rendering with minimal hydration keeps core routes lean.
See layout docs -
Token-driven Styling
Design Tokens
Semantic and on-surface tokens keep component surfaces consistent.
-
Accessible Interaction
Accessibility
Keyboard paths and visible focus states are required for interactive surfaces.
Read policy
Show code
<LayoutSection verticalPadding="2xl">
<Heading level={3} size="2xl">FeatureGrid Horizontal</Heading>
<p class="mt-sm mb-lg">Horizontal feature cards with two-column layout.</p>
<FeatureGrid
items={[
{
title: "Fast by Default",
body: "Astro-first rendering with minimal hydration keeps core routes lean.",
icon: "⚡",
badge: "Performance",
links: [{ href: "/theme-docs/configuration/layouts/", label: "See layout docs" }],
},
{
title: "Accessible Interaction",
body: "Keyboard paths and visible focus states are required.",
icon: "♿",
badge: "Accessibility",
links: [{ href: "/accessibility/", label: "Read policy" }],
},
]}
columns={2}
cardOrientation="horizontal"
fullCardClick={true}
/>
</LayoutSection>Testimonials
Testimonial sections with grid and centered layouts, attributed and quote-only entries.
Testimonials Grid
Grid mode with attributed and quote-only entries.
-
"The section contracts made route composition predictable and dramatically reduced template duplication."
A. ImplementorTheme Integrator
-
"Client-side docs filtering and pagination stayed understandable because the behavior contract was explicit."
D. Developer
Platform Engineer
-
"Quote-only testimonials are useful for lightweight social proof blocks."
Testimonials Centered
Centered mode should render only the first testimonial in v1.
-
"The section contracts made route composition predictable and dramatically reduced template duplication."
A. ImplementorTheme Integrator
Testimonials Inverted Card
Card-local cardBackground: "inverted" reassigns
--st-color-text-heading to the on-inverted variant.
-
"Inverted-card testimonials should still surface heading colors that are legible against the dark surface."
A. Implementor
Theme Integrator
InfoCards Inverted Card
Item-level cardBackground: "inverted" drives the underlying
SectionCard card-local style.
-
Inverted Card
Inverted
Verifies the SectionCard card-local --st-color-text-heading reassignment for the inverted variant.
Show code
{/* Grid layout */}
<LayoutSection verticalPadding="sm">
<Heading level={3} size="2xl">Testimonials Grid</Heading>
<p class="mt-sm mb-lg">Grid mode with attributed and quote-only entries.</p>
<Testimonials
items={[
{
quote: "The section contracts made route composition predictable.",
name: "A. Implementor",
role: "Theme Integrator",
avatarSrc: avatarImage,
avatarAlt: "Avatar sample",
attributionHref: "/credits/",
},
{
quote: "Quote-only testimonials are useful for lightweight social proof blocks.",
},
]}
layout="grid"
/>
</LayoutSection>
{/* Centered layout — renders first item only */}
<LayoutSection contentWidth="wide" verticalPadding="2xl">
<Heading level={3} size="2xl">Testimonials Centered</Heading>
<p class="mt-sm mb-lg">Centered mode renders first item only.</p>
<Testimonials
items={[
{
quote: "The section contracts made route composition predictable.",
name: "A. Implementor",
role: "Theme Integrator",
},
]}
layout="centered"
/>
</LayoutSection>