> ## Documentation Index
> Fetch the complete documentation index at: https://craft-support.mintlify.app/llms.txt
> Use this file to discover all available pages before exploring further.

# Cards

> Transform pages into visually appealing cards with custom backgrounds, colors, and images.

Cards are a styling option that transforms your pages into visually distinct, card-like elements within your documents. Create appealing layouts by giving pages different background colors, images, or sizes.

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/cards/en/content/cards-example.png?s=11b2e2d42212921628aae5582eddca52" alt="Example document using cards" width="1556" height="1054" data-path="images/write-and-edit/styling/cards/en/content/cards-example.png" />

<Info title="Pages vs Cards">
  From a functionality perspective, there isn't much difference between regular pages and cards. Think of cards as visual styling options for your pages and subpages.
</Info>

## Creating Cards

You can create a card using the slash menu:

<Steps>
  <Step>
    Type `/card` in your document
  </Step>

  <Step>
    Select the card type from the menu
  </Step>

  <Step>
    The card will be inserted as a new page block
  </Step>
</Steps>

Learn more about [Using the Slash Menu](/en/write-and-edit/formatting/slash-menu).

## Page Styles and Card Comparison

Cards provide visual differentiation between sections of your document while maintaining the same functionality as regular pages.

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/cards/en/content/cards-comparison.png?s=37ff84eaa8df83af8de662053fd1c568" alt="Pages and cards side by side" width="1610" height="1030" data-path="images/write-and-edit/styling/cards/en/content/cards-comparison.png" />

## Card Styles

With the Pro plan, you can choose from 5 different card sizes to create hierarchy and visual interest in your documents.

### Simple Card

A clean, minimalist card with no background decoration:

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/cards/en/content/simple-card.png?fit=max&auto=format&n=L5zMoIm2o8A5WVUD&q=85&s=05efda4938c09f871b022ddd9cade7ef" alt="Simple card with no background" width="718" height="162" data-path="images/write-and-edit/styling/cards/en/content/simple-card.png" />

### Card with Background Color

Add a colored background to make cards stand out:

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/cards/en/content/card-color.png?fit=max&auto=format&n=L5zMoIm2o8A5WVUD&q=85&s=a0107160a54406d13310ce129db82b00" alt="Card with colored background" width="715" height="155" data-path="images/write-and-edit/styling/cards/en/content/card-color.png" />

### Card with Image from Unsplash

Use professional photos from Unsplash as card backgrounds:

<img src="https://mintcdn.com/craft-support/L5zMoIm2o8A5WVUD/images/write-and-edit/styling/cards/en/content/card-image.png?fit=max&auto=format&n=L5zMoIm2o8A5WVUD&q=85&s=4ab390d1e1becd66cf197d5dbd9afb8b" alt="Card with Unsplash image background" width="710" height="156" data-path="images/write-and-edit/styling/cards/en/content/card-image.png" />

## Customizing Card Backgrounds

Cards can be customized with:

* **Solid colors** – Choose from the color palette or create custom colors
* **Images from Unsplash** – Search and select professional photos
* **Your own images** – Upload images from your device
* **Different sizes** – Select from 5 card sizes (Pro plan)

<Info title="Pro Feature">
  Multiple card sizes are available with Craft Pro. All users can create standard-sized cards.
</Info>

## Use Cases

Cards are particularly useful for:

* **Project planning** – Create visual sections for different project phases
* **Knowledge bases** – Organize topics with visual hierarchy
* **Meeting notes** – Separate agenda items or discussion topics
* **Content planning** – Organize ideas with visual differentiation

## Related Articles

<CardGroup cols={2}>
  <Card title="Styles Quick Guide" href="/en/write-and-edit/styling/quick-guide">
    Comprehensive guide to all styling features
  </Card>

  <Card title="Cover Images" href="/en/write-and-edit/styling/cover-images">
    Customize cover images for your documents
  </Card>

  <Card title="Blocks and Pages" href="/en/write-and-edit/blocks-and-pages">
    Understanding the building blocks of Craft
  </Card>
</CardGroup>
