Card

A container component that provides card layout with background options and padding controls.

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.

_bookshop_name: wrappers/card
border: true
contentBlocks:
  - _bookshop_name: primitives/heading
    text: This is a card
    level: h3
  - _bookshop_name: primitives/paragraph
    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.

Properties

label string

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

contentBlocks array | default: array

Array of content blocks to render within the card.

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: default

Color scheme theme for the card.

Accepted values:

default
contrast

backgroundColor enum

Background color for the card.

Accepted values:

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.

Examples

Link

Clickable Card

This entire card is clickable! Perfect for navigation cards or feature highlights.

_bookshop_name: wrappers/card
paddingHorizontal: md
paddingVertical: md
backgroundColor: accent
link: '#'
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Clickable Card
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This entire card is clickable! Perfect for navigation cards or feature highlights.

Border

Border Card

This card has a border applied.

_bookshop_name: wrappers/card
border: true
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Border Card
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card has a border applied.

Borderless Card

This card has no border applied.

_bookshop_name: wrappers/card
border: false
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Borderless Card
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card has no border applied.

Padding Options

xs padding

This card uses xs padding for a very compact appearance.

_bookshop_name: wrappers/card
paddingHorizontal: xs
paddingVertical: xs
backgroundColor: surface
contentBlocks:
  - _bookshop_name: primitives/heading
    text: xs padding
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card uses xs padding for a very compact appearance.

sm padding

This card uses sm for a very compact appearance.

_bookshop_name: wrappers/card
paddingHorizontal: sm
paddingVertical: sm
backgroundColor: surface
contentBlocks:
  - _bookshop_name: primitives/heading
    text: sm padding
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card uses sm for a very compact appearance.

md Padding

This card uses md for balanced spacing and readability.

_bookshop_name: wrappers/card
paddingHorizontal: md
paddingVertical: md
backgroundColor: surface
contentBlocks:
  - _bookshop_name: primitives/heading
    text: md Padding
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card uses md for balanced spacing and readability.

lg Padding

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

_bookshop_name: wrappers/card
paddingHorizontal: lg
paddingVertical: lg
backgroundColor: surface
contentBlocks:
  - _bookshop_name: primitives/heading
    text: lg Padding
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card uses lg for a more spacious, breathable layout.

XL Padding

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

_bookshop_name: wrappers/card
paddingHorizontal: xl
paddingVertical: xl
backgroundColor: surface
contentBlocks:
  - _bookshop_name: primitives/heading
    text: XL Padding
    level: h3
  - _bookshop_name: primitives/paragraph
    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.

_bookshop_name: wrappers/card
paddingHorizontal: 2xl
paddingVertical: 2xl
backgroundColor: surface
contentBlocks:
  - _bookshop_name: primitives/heading
    text: 2XL Padding
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card uses 2xl padding for maximum spacing and dramatic visual presence.

Background Options

Accent Card

This card uses the accent background color.

_bookshop_name: wrappers/card
backgroundColor: accent
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Accent Card
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card uses the accent background color.

Highlight Card

This card uses the highlight background color.

_bookshop_name: wrappers/card
backgroundColor: highlight
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Highlight Card
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card uses the highlight background color.

Surface Card

This card uses the surface background color.

_bookshop_name: wrappers/card
backgroundColor: surface
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Surface Card
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card uses the surface background color.

Base Card

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

_bookshop_name: wrappers/card
backgroundColor: base
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Base Card
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card uses the base background color (page background color)

No Background Card

This card has no background color

_bookshop_name: wrappers/card
backgroundColor: null
contentBlocks:
  - _bookshop_name: primitives/heading
    text: No Background Card
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card has no background color

Corner Options

Rounded Card

This card has rounded corners applied.

_bookshop_name: wrappers/card
backgroundColor: surface
rounded: true
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Rounded Card
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card has rounded corners applied.

Square Card

This card has square corners (rounded disabled).

_bookshop_name: wrappers/card
backgroundColor: surface
rounded: false
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Square Card
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card has square corners (rounded disabled).

Background image

Top Left Position

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

_bookshop_name: wrappers/card
backgroundImage:
  source: /images/component-library/dunedin-cliff.jpg
  alt: Dunedin cliffside
  positionVertical: top
  positionHorizontal: left
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Top Left Position
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card's background image is positioned at the top-left corner.

Center Position

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

_bookshop_name: wrappers/card
backgroundImage:
  source: /images/component-library/dunedin-cliff.jpg
  alt: Dunedin cliffside
  positionVertical: center
  positionHorizontal: center
colorScheme: contrast
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Center Position
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card's background image is centered both horizontally and vertically.

Bottom Right Position

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

_bookshop_name: wrappers/card
backgroundImage:
  source: /images/component-library/dunedin-cliff.jpg
  alt: Dunedin cliffside
  positionVertical: bottom
  positionHorizontal: right
colorScheme: contrast
contentBlocks:
  - _bookshop_name: primitives/heading
    text: Bottom Right Position
    level: h3
  - _bookshop_name: primitives/paragraph
    text: This card's background image is positioned at the bottom-right corner.