Back to site

Card

Groups related content within a section.

This is a card

This is a basic card component. It provides ways of setting background, a border, rounded corners, and can be configured as a clickable block.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card afterContentSections={
  []
} backgroundColor="base" backgroundImage={{"source":null,"alt":null,"positionVertical":"top","positionHorizontal":"center"}} beforeContentSections={
  []
} border colorScheme="default" label="" link="" paddingHorizontal="sm" paddingVertical="sm">
  <Heading level="h3">
    This is a card
  </Heading>
  <Text>
    <p>This is a basic card component. It provides ways of setting background, a border, rounded corners, and can be configured as a clickable block.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  border: true
  paddingHorizontal: sm
  paddingVertical: sm
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This is a card
      level: h3
    - _component: building-blocks/core-elements/text
      text: This is a basic card component. It provides ways of setting background, a border, rounded corners, and can be configured as a clickable block.
  label: ''
  colorScheme: default
  backgroundColor: base
  backgroundImage:
    source: null
    alt: null
    positionVertical: top
    positionHorizontal: center
  link: ''
  rounded: false
  showBeforeAfter: false
  beforeContentSections: []
  afterContentSections: []
---

Overview

A card for grouping related content within a section. Provides background, and padding. Includes before and after slots that render outside the card’s inner padding (ideal for edge-to-edge images or banners), plus a padded body area for regular content.

Properties

label string

Optional label for the card to help identify it in the editor.

contentSections array | default: array

Content inside the main area of the card, with padding.

maxContentWidth enum

Maximum width constraint for the card content.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl
  • 3xl

paddingHorizontal enum | default: sm

Horizontal padding applied to the card content.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl

paddingVertical enum | default: sm

Vertical padding applied to the card content.

Accepted values:
  • xs
  • sm
  • md
  • lg
  • xl
  • 2xl

colorScheme enum | default: inherit

Color scheme theme for the card.

Accepted values:
  • inherit
  • default
  • contrast

backgroundColor enum | default: base

Background color for the card.

Accepted values:
  • none
  • base
  • surface
  • accent
  • highlight

backgroundImage object

Background image configuration for the card.

Properties:

source string

URL or path to the background image.

alt string

Alt text for the background image.

positionVertical enum

Vertical position of the background image.

Accepted values:
  • top
  • center
  • bottom

positionHorizontal enum

Horizontal position of the background image.

Accepted values:
  • left
  • center
  • right

link string

URL to make the entire card clickable. Leave empty for a non-clickable card.

rounded boolean | default: false

Whether to apply rounded corners to the card.

border boolean | default: false

Whether to apply a border to the card.

showBeforeAfter boolean | default: false

Whether to show the before/after content blocks used to add content outside the card's padding.

beforeContentSections array | default: array

Content that appears above the main card area, without padding.

afterContentSections array | default: array

Content that appears below the main card area, without padding.

Slots

default

The contents for the body of the Card. Used only when the contentSections property is not set.

before

The contents to display before the Card content. Used only when the beforeContentSections property is not set.

after

The contents to display after the Card content. Used only when the afterContentSections property is not set.

Examples

Link

---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="accent" link="#" paddingHorizontal="md" paddingVertical="md">
  <Heading level="h3">
    Clickable Card
  </Heading>
  <Text>
    <p>This entire card is clickable! Perfect for navigation cards or feature highlights.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  paddingHorizontal: md
  paddingVertical: md
  backgroundColor: accent
  link: '#'
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Clickable Card
      level: h3
    - _component: building-blocks/core-elements/text
      text: This entire card is clickable! Perfect for navigation cards or feature highlights.
---

Border

Border Card

This card has a border applied.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card border paddingHorizontal="sm" paddingVertical="sm">
  <Heading level="h3">
    Border Card
  </Heading>
  <Text>
    <p>This card has a border applied.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  border: true
  paddingHorizontal: sm
  paddingVertical: sm
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Border Card
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card has a border applied.
---

Borderless Card

This card has no border applied.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card paddingHorizontal="sm" paddingVertical="sm">
  <Heading level="h3">
    Borderless Card
  </Heading>
  <Text>
    <p>This card has no border applied.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  border: false
  paddingHorizontal: sm
  paddingVertical: sm
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Borderless Card
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card has no border applied.
---

Max Content Width

This card has xs max content width. 

---
import Heading from "@core-elements/heading/Heading.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" maxContentWidth="xs">
  <Heading alignX="center" level="h3">
    This card has xs max content width.
  </Heading>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  backgroundColor: surface
  maxContentWidth: xs
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This card has xs max content width.
      level: h3
      alignX: center
---

This card has sm max content width. 

---
import Heading from "@core-elements/heading/Heading.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" maxContentWidth="sm">
  <Heading alignX="center" level="h3">
    This card has sm max content width.
  </Heading>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  backgroundColor: surface
  maxContentWidth: sm
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This card has sm max content width.
      level: h3
      alignX: center
---

This card has md max content width. 

---
import Heading from "@core-elements/heading/Heading.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" maxContentWidth="md">
  <Heading alignX="center" level="h3">
    This card has md max content width.
  </Heading>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  backgroundColor: surface
  maxContentWidth: md
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This card has md max content width.
      level: h3
      alignX: center
---

This card has lg max content width. 

---
import Heading from "@core-elements/heading/Heading.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" maxContentWidth="lg">
  <Heading alignX="center" level="h3">
    This card has lg max content width.
  </Heading>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  backgroundColor: surface
  maxContentWidth: lg
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This card has lg max content width.
      level: h3
      alignX: center
---

This card has xl max content width. 

---
import Heading from "@core-elements/heading/Heading.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" maxContentWidth="xl">
  <Heading alignX="center" level="h3">
    This card has xl max content width.
  </Heading>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  backgroundColor: surface
  maxContentWidth: xl
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This card has xl max content width.
      level: h3
      alignX: center
---

This card has 2xl max content width. 

---
import Heading from "@core-elements/heading/Heading.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" maxContentWidth="2xl">
  <Heading alignX="center" level="h3">
    This card has 2xl max content width.
  </Heading>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  backgroundColor: surface
  maxContentWidth: 2xl
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This card has 2xl max content width.
      level: h3
      alignX: center
---

This card has 3xl max content width. 

---
import Heading from "@core-elements/heading/Heading.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" maxContentWidth="3xl">
  <Heading alignX="center" level="h3">
    This card has 3xl max content width.
  </Heading>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  backgroundColor: surface
  maxContentWidth: 3xl
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: This card has 3xl max content width.
      level: h3
      alignX: center
---

Padding Options

xs padding

This card uses xs padding for a very compact appearance.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" paddingHorizontal="xs" paddingVertical="xs">
  <Heading level="h3">
    xs padding
  </Heading>
  <Text>
    <p>This card uses xs padding for a very compact appearance.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  paddingHorizontal: xs
  paddingVertical: xs
  backgroundColor: surface
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: xs padding
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card uses xs padding for a very compact appearance.
---

sm padding

This card uses sm padding for a very compact appearance.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" paddingHorizontal="sm" paddingVertical="sm">
  <Heading level="h3">
    sm padding
  </Heading>
  <Text>
    <p>This card uses sm padding for a very compact appearance.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  paddingHorizontal: sm
  paddingVertical: sm
  backgroundColor: surface
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: sm padding
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card uses sm padding for a very compact appearance.
---

md Padding

This card uses md padding for balanced spacing and readability.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" paddingHorizontal="md" paddingVertical="md">
  <Heading level="h3">
    md Padding
  </Heading>
  <Text>
    <p>This card uses md padding for balanced spacing and readability.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  paddingHorizontal: md
  paddingVertical: md
  backgroundColor: surface
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: md Padding
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card uses md padding for balanced spacing and readability.
---

lg Padding

This card uses lg padding for a more spacious, breathable layout.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" paddingHorizontal="lg" paddingVertical="lg">
  <Heading level="h3">
    lg Padding
  </Heading>
  <Text>
    <p>This card uses lg padding for a more spacious, breathable layout.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  paddingHorizontal: lg
  paddingVertical: lg
  backgroundColor: surface
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: lg Padding
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card uses lg padding for a more spacious, breathable layout.
---

xl Padding

This card uses xl padding for generous spacing and visual impact.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" paddingHorizontal="xl" paddingVertical="xl">
  <Heading level="h3">
    xl Padding
  </Heading>
  <Text>
    <p>This card uses xl padding for generous spacing and visual impact.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  paddingHorizontal: xl
  paddingVertical: xl
  backgroundColor: surface
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: xl Padding
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card uses xl padding for generous spacing and visual impact.
---

2xl Padding

This card uses 2xl padding for maximum spacing and dramatic visual presence.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" paddingHorizontal="2xl" paddingVertical="2xl">
  <Heading level="h3">
    2xl Padding
  </Heading>
  <Text>
    <p>This card uses 2xl padding for maximum spacing and dramatic visual presence.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  paddingHorizontal: 2xl
  paddingVertical: 2xl
  backgroundColor: surface
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: 2xl Padding
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card uses 2xl padding for maximum spacing and dramatic visual presence.
---

Background Options

Accent Card

This card uses the accent background color.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="accent" paddingHorizontal="sm" paddingVertical="sm">
  <Heading level="h3">
    Accent Card
  </Heading>
  <Text>
    <p>This card uses the accent background color.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  backgroundColor: accent
  paddingHorizontal: sm
  paddingVertical: sm
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Accent Card
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card uses the accent background color.
---

Highlight Card

This card uses the highlight background color.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="highlight" paddingHorizontal="sm" paddingVertical="sm">
  <Heading level="h3">
    Highlight Card
  </Heading>
  <Text>
    <p>This card uses the highlight background color.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  backgroundColor: highlight
  paddingHorizontal: sm
  paddingVertical: sm
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Highlight Card
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card uses the highlight background color.
---

Surface Card

This card uses the surface background color.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" paddingHorizontal="sm" paddingVertical="sm">
  <Heading level="h3">
    Surface Card
  </Heading>
  <Text>
    <p>This card uses the surface background color.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  backgroundColor: surface
  paddingHorizontal: sm
  paddingVertical: sm
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Surface Card
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card uses the surface background color.
---

Base Card

This card uses the base background color (page background color)

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="base" paddingHorizontal="sm" paddingVertical="sm">
  <Heading level="h3">
    Base Card
  </Heading>
  <Text>
    <p>This card uses the base background color (page background color)</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  backgroundColor: base
  paddingHorizontal: sm
  paddingVertical: sm
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Base Card
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card uses the base background color (page background color)
---

No Background Card

This card has no background color.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="null" paddingHorizontal="sm" paddingVertical="sm">
  <Heading level="h3">
    No Background Card
  </Heading>
  <Text>
    <p>This card has no background color.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  backgroundColor: null
  paddingHorizontal: sm
  paddingVertical: sm
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: No Background Card
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card has no background color.
---

Corner Options

Rounded Card

This card has rounded corners applied.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" paddingHorizontal="sm" paddingVertical="sm" rounded>
  <Heading level="h3">
    Rounded Card
  </Heading>
  <Text>
    <p>This card has rounded corners applied.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  backgroundColor: surface
  rounded: true
  paddingHorizontal: sm
  paddingVertical: sm
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Rounded Card
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card has rounded corners applied.
---

Square Card

This card has square corners (rounded disabled).

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundColor="surface" paddingHorizontal="sm" paddingVertical="sm">
  <Heading level="h3">
    Square Card
  </Heading>
  <Text>
    <p>This card has square corners (rounded disabled).</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  backgroundColor: surface
  rounded: false
  paddingHorizontal: sm
  paddingVertical: sm
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Square Card
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card has square corners (rounded disabled).
---

Background image

Dunedin cliffside

Top Left Position

This card's background image is positioned at the top-left corner.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundImage={{"source":"/src/assets/images/component-library/dunedin-cliff.jpg","alt":"Dunedin cliffside","positionVertical":"top","positionHorizontal":"left"}} paddingHorizontal="sm" paddingVertical="2xl">
  <Heading level="h3">
    Top Left Position
  </Heading>
  <Text>
    <p>This card's background image is positioned at the top-left corner.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  paddingVertical: 2xl
  paddingHorizontal: sm
  backgroundImage:
    source: /src/assets/images/component-library/dunedin-cliff.jpg
    alt: Dunedin cliffside
    positionVertical: top
    positionHorizontal: left
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Top Left Position
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card's background image is positioned at the top-left corner.
---
Dunedin cliffside

Center Position

This card's background image is centered both horizontally and vertically.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundImage={{"source":"/src/assets/images/component-library/dunedin-cliff.jpg","alt":"Dunedin cliffside","positionVertical":"center","positionHorizontal":"center"}} paddingHorizontal="sm" paddingVertical="2xl">
  <Heading level="h3">
    Center Position
  </Heading>
  <Text>
    <p>This card's background image is centered both horizontally and vertically.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  paddingVertical: 2xl
  paddingHorizontal: sm
  backgroundImage:
    source: /src/assets/images/component-library/dunedin-cliff.jpg
    alt: Dunedin cliffside
    positionVertical: center
    positionHorizontal: center
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Center Position
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card's background image is centered both horizontally and vertically.
---
Dunedin cliffside

Bottom Right Position

This card's background image is positioned at the bottom-right corner.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card backgroundImage={{"source":"/src/assets/images/component-library/dunedin-cliff.jpg","alt":"Dunedin cliffside","positionVertical":"bottom","positionHorizontal":"right"}} paddingHorizontal="sm" paddingVertical="2xl">
  <Heading level="h3">
    Bottom Right Position
  </Heading>
  <Text>
    <p>This card's background image is positioned at the bottom-right corner.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  paddingVertical: 2xl
  paddingHorizontal: sm
  backgroundImage:
    source: /src/assets/images/component-library/dunedin-cliff.jpg
    alt: Dunedin cliffside
    positionVertical: bottom
    positionHorizontal: right
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Bottom Right Position
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card's background image is positioned at the bottom-right corner.
---

Before & After Content

Dunedin Cliff

Card with Before Content

The image above is placed in the beforeContentSections area, which sits outside the card's internal padding. This is perfect for hero images or visual headers.

 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card beforeContentSections={
  [
    {
      "_component": "building-blocks/core-elements/image",
      "source": "/src/assets/images/component-library/dunedin-cliff.jpg",
      "alt": "Dunedin Cliff",
      "aspectRatio": "widescreen"
    }
  ]
} border paddingHorizontal="lg" paddingVertical="lg" rounded>
  <Heading level="h3">
    Card with Before Content
  </Heading>
  <Text>
    <p>The image above is placed in the beforeContentSections area, which sits outside the card's internal padding. This is perfect for hero images or visual headers.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  border: true
  paddingHorizontal: lg
  paddingVertical: lg
  rounded: true
  beforeContentSections:
    - _component: building-blocks/core-elements/image
      source: /src/assets/images/component-library/dunedin-cliff.jpg
      alt: Dunedin Cliff
      aspectRatio: widescreen
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Card with Before Content
      level: h3
    - _component: building-blocks/core-elements/text
      text: The image above is placed in the beforeContentSections area, which sits outside the card's internal padding. This is perfect for hero images or visual headers.
---

Card with After Content

The image below is placed in the afterContentSections area, which sits outside the card's internal padding. This is ideal for footer images or visual footers.
Dunedin Cliff 
---
import Heading from "@core-elements/heading/Heading.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card afterContentSections={
  [
    {
      "_component": "building-blocks/core-elements/image",
      "source": "/src/assets/images/component-library/dunedin-cliff.jpg",
      "alt": "Dunedin Cliff",
      "aspectRatio": "widescreen"
    }
  ]
} border paddingHorizontal="md" paddingVertical="md" rounded>
  <Heading level="h3">
    Card with After Content
  </Heading>
  <Text>
    <p>The image below is placed in the afterContentSections area, which sits outside the card's internal padding. This is ideal for footer images or visual footers.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  border: true
  paddingHorizontal: md
  paddingVertical: md
  rounded: true
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Card with After Content
      level: h3
    - _component: building-blocks/core-elements/text
      text: The image below is placed in the afterContentSections area, which sits outside the card's internal padding. This is ideal for footer images or visual footers.
  afterContentSections:
    - _component: building-blocks/core-elements/image
      source: /src/assets/images/component-library/dunedin-cliff.jpg
      alt: Dunedin Cliff
      aspectRatio: widescreen
---