> ## Documentation Index
> Fetch the complete documentation index at: https://docs.digifist.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Cards

> Customize the appearance and layout of cards used for collections and blog posts.

Card settings control corner radius, text alignment, and aspect ratios for cards throughout your store. Once you understand them, you can maintain visual consistency across collection pages, blog listings, and featured content without manually adjusting each section.

## What these settings control

* Corner radius for all cards (rounded or sharp corners)
* Text alignment within cards
* Card container aspect ratios
* Media aspect ratios within cards
* How images fit within card boundaries
* Overlay effects for text readability

## How to access

<Steps>
  <Step title="Open the Theme Customizer">
    From your Shopify admin, go to **Online Store** → **Themes** → **Customize**.
  </Step>

  <Step title="Navigate to card settings">
    In the theme editor sidebar, select **Theme settings** → **Cards**.
  </Step>

  <Step title="Adjust settings">
    Modify corner radius, text alignment, and ratio options as needed.
  </Step>

  <Step title="Save changes">
    Click **Save** to apply your changes across all card elements.
  </Step>
</Steps>

## Settings

<Tabs>
  <Tab title="Appearance">
    ### Corner radius

    Controls the roundness of card corners, measured in **rem** units. Higher values create more rounded corners.

    **Available values**: 0rem (sharp), 0.5rem, 1rem, 1.5rem, 2rem (very rounded)

    <Tip>Match corner radius with your button corner radius for design consistency.</Tip>

    ### Text alignment

    Choose how text is positioned within cards: **Left**, **Center**, or **Right**.

    **Left alignment**: Natural reading flow, works with varying text lengths\
    **Center alignment**: Symmetrical appearance, use only when all card text is consistently brief\
    **Right alignment**: For RTL languages or specific design requirements
  </Tab>

  <Tab title="Ratios">
    ### Card ratio

    Defines the overall shape of the card container.

    **Adapt to image**: Card height adjusts to match image dimensions\
    **Portrait (2:3)**: Taller cards with vertical emphasis\
    **Square (1:1)**: Uniform, balanced grid appearance\
    **Landscape (4:3)**: Wider cards for horizontal imagery

    ### Media ratio

    Controls aspect ratio of images and videos within cards.

    **Adapt to image**: Media displays at its original aspect ratio\
    **Portrait (2:3)**: Forces vertical emphasis on all media\
    **Square (1:1)**: Forces consistent square dimensions\
    **Landscape (4:3)**: Forces horizontal emphasis on all media

    <Note>Media ratio can be set independently from card ratio. For example, you can have square cards with landscape images inside.</Note>
  </Tab>

  <Tab title="Media Display">
    ### Media fit

    Determines how images fill the card space.

    **Cover**: Image fills entire area, may crop edges (recommended for consistent grids)\
    **Contain**: Full image visible, may show empty space around edges\
    **Fill**: Image stretches to fill space, may distort proportions

    <Tip>We recommend using **Cover** for consistent card heights and clean grids.</Tip>

    ### Media overlay

    Adds a semi-transparent dark overlay on images to improve text readability when text appears directly over card images.

    **Enable for desktop**: Overlay appears only on desktop screens\
    **Enable for mobile**: Overlay appears only on mobile devices\
    **Enable for both**: Overlay appears on all devices\
    **Disabled**: No overlay applied
  </Tab>
</Tabs>

## Best practices

* Match corner radius with button settings for design consistency
* Use left alignment for varying text lengths, center alignment only for consistently brief content
* Test card settings with various image sizes before finalizing
* Enable overlays only when text appears over images
* Preview on mobile devices as card appearance can differ on small screens
* Plan for image cropping when using "Cover" fit

<Warning>Changing card ratios affects how images are cropped. After adjusting these settings, review your collection and blog pages to ensure images display as intended.</Warning>

## Related guides

* [Colors](/themes/release/theme-settings/colors) - Coordinate card colors with your overall color scheme
* [Typography](/themes/release/theme-settings/typography) - Adjust text styles within cards
* [Products](/themes/release/theme-settings/products) - Configure product-specific card settings
* [Layout](/themes/release/theme-settings/layout) - Control overall page width affecting card grids