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 backgroundColor="base" border colorScheme="null" 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: null
  backgroundColor: base
  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:
  • none
  • 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
  • light
  • dark

backgroundColor enum | default: base

Background color for the card.

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

background object

Optional background still image or looping HTML5 video (self-hosted). Shared positioning applies to whichever type you choose. Video is hidden when the user prefers reduced motion.

Properties:

type enum

A cover image or a muted autoplay video.

Accepted values:
  • image
  • video

positionVertical enum

Vertical focal point (object-position for video; image position for pictures).

Accepted values:
  • top
  • center
  • bottom

positionHorizontal enum

Horizontal focal point (object-position for video; image position for pictures).

Accepted values:
  • left
  • center
  • right

priority boolean

When using a background image, load it eagerly (use for above-the-fold sections).

imageSource string

URL or path to the background image.

imageAlt string

Alt text for the background image.

videoSource string

Path to a video under public/videos. Sibling formats with the same basename are added automatically when present.

overlay string

Overlay in front of the background (-1.0 to 1.0). Negative values darken, positive values lighten.

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 # 

---
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 alignmentHorizontal="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
      alignmentHorizontal: 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 alignmentHorizontal="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
      alignmentHorizontal: 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 alignmentHorizontal="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
      alignmentHorizontal: 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 alignmentHorizontal="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
      alignmentHorizontal: 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 alignmentHorizontal="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
      alignmentHorizontal: 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 alignmentHorizontal="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
      alignmentHorizontal: 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 alignmentHorizontal="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
      alignmentHorizontal: 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 background={{"type":"image","positionVertical":"top","positionHorizontal":"left","imageSource":"/src/assets/images/component-docs/dunedin-cliff.jpg","imageAlt":"Dunedin cliffside","overlay":-0.3}} colorScheme="dark" 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
  colorScheme: dark
  background:
    type: image
    positionVertical: top
    positionHorizontal: left
    imageSource: /src/assets/images/component-docs/dunedin-cliff.jpg
    imageAlt: Dunedin cliffside
    overlay: -0.3
  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 background={{"type":"image","positionVertical":"center","positionHorizontal":"center","imageSource":"/src/assets/images/component-docs/dunedin-cliff.jpg","imageAlt":"Dunedin cliffside","overlay":-0.3}} colorScheme="dark" 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
  colorScheme: dark
  background:
    type: image
    positionVertical: center
    positionHorizontal: center
    imageSource: /src/assets/images/component-docs/dunedin-cliff.jpg
    imageAlt: Dunedin cliffside
    overlay: -0.3
  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 background={{"type":"image","positionVertical":"bottom","positionHorizontal":"right","imageSource":"/src/assets/images/component-docs/dunedin-cliff.jpg","imageAlt":"Dunedin cliffside","overlay":-0.3}} colorScheme="dark" 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
  colorScheme: dark
  background:
    type: image
    positionVertical: bottom
    positionHorizontal: right
    imageSource: /src/assets/images/component-docs/dunedin-cliff.jpg
    imageAlt: Dunedin cliffside
    overlay: -0.3
  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.
---

Background video #

Background Video

This card has a looping background video behind its content.

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

<Card background={{"type":"video","positionVertical":"center","positionHorizontal":"center","videoSource":"/videos/component-docs/glass.mp4","overlay":-0.5}} colorScheme="dark" paddingHorizontal="sm" paddingVertical="2xl">
  <Heading level="h3">
    Background Video
  </Heading>
  <Text>
    <p>This card has a looping background video behind its content.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  paddingVertical: 2xl
  paddingHorizontal: sm
  colorScheme: dark
  background:
    type: video
    positionVertical: center
    positionHorizontal: center
    videoSource: /videos/component-docs/glass.mp4
    overlay: -0.5
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Background Video
      level: h3
    - _component: building-blocks/core-elements/text
      text: This card has a looping background video behind its content.
---

Background overlay #

Dunedin cliffside

Darkened Overlay

A dark overlay makes light text easier to read over a background image.

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

<Card background={{"type":"image","positionVertical":"center","positionHorizontal":"center","imageSource":"/src/assets/images/component-docs/dunedin-cliff.jpg","imageAlt":"Dunedin cliffside","overlay":-0.5}} colorScheme="dark" paddingHorizontal="sm" paddingVertical="2xl">
  <Heading level="h3">
    Darkened Overlay
  </Heading>
  <Text>
    <p>A dark overlay makes light text easier to read over a background image.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  paddingVertical: 2xl
  paddingHorizontal: sm
  colorScheme: dark
  background:
    type: image
    positionVertical: center
    positionHorizontal: center
    imageSource: /src/assets/images/component-docs/dunedin-cliff.jpg
    imageAlt: Dunedin cliffside
    overlay: -0.5
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Darkened Overlay
      level: h3
    - _component: building-blocks/core-elements/text
      text: A dark overlay makes light text easier to read over a background image.
---
Dunedin cliffside

Lightened Overlay

A light overlay makes dark text easier to read over a background image.

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

<Card background={{"type":"image","positionVertical":"center","positionHorizontal":"center","imageSource":"/src/assets/images/component-docs/dunedin-cliff.jpg","imageAlt":"Dunedin cliffside","overlay":0.5}} paddingHorizontal="sm" paddingVertical="2xl">
  <Heading level="h3">
    Lightened Overlay
  </Heading>
  <Text>
    <p>A light overlay makes dark text easier to read over a background image.</p>
  </Text>
</Card>
---
blocks:
  _component: building-blocks/wrappers/card
  paddingVertical: 2xl
  paddingHorizontal: sm
  background:
    type: image
    positionVertical: center
    positionHorizontal: center
    imageSource: /src/assets/images/component-docs/dunedin-cliff.jpg
    imageAlt: Dunedin cliffside
    overlay: 0.5
  contentSections:
    - _component: building-blocks/core-elements/heading
      text: Lightened Overlay
      level: h3
    - _component: building-blocks/core-elements/text
      text: A light overlay makes dark text easier to read over a background image.
---

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 Image from "@core-elements/image/Image.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card border paddingHorizontal="lg" paddingVertical="lg" rounded>
  <Fragment slot="before">
    <Image alt="Dunedin Cliff" aspectRatio="widescreen" source="/src/assets/images/component-docs/dunedin-cliff.jpg" />
  </Fragment>
  <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-docs/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 Image from "@core-elements/image/Image.astro";
import Text from "@core-elements/text/Text.astro";
import Card from "@wrappers/card/Card.astro";
---

<Card border paddingHorizontal="md" paddingVertical="md" rounded>
  <Fragment slot="after">
    <Image alt="Dunedin Cliff" aspectRatio="widescreen" source="/src/assets/images/component-docs/dunedin-cliff.jpg" />
  </Fragment>
  <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-docs/dunedin-cliff.jpg
      alt: Dunedin Cliff
      aspectRatio: widescreen
---