# Recipe Card Styles (SCSS)

> Turns the [recipe_card] output into a printable card with a fact strip for times and servings, a two-column ingredient list on wide screens and numbered steps.

- Type: SCSS
- Runs: Site-wide header
- Category: [Custom Post Types & Fields](https://wpide.com/library/category/post-types/)
- Tags: scss, recipes, styling
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/recipe-card-scss/

## Code

```scss
$card-bg: color-mix(in srgb, currentColor 4%, transparent);
$accent: #c2410c;

.recipe-card {
    margin: 2rem 0;
    padding: 1.5rem;
    border-radius: 12px;
    background: $card-bg;

    .recipe-facts {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem 1.5rem;
        margin: 0 0 1rem;
        padding: 0;
        list-style: none;
    }

    h3 {
        margin-top: 1.25rem;
        color: $accent;
    }

    .recipe-ingredients {
        columns: 2 16rem;
        column-gap: 2rem;
    }

    .recipe-steps li {
        margin-bottom: 0.75rem;
    }
}

@media print {
    .recipe-card {
        background: none;
        padding: 0;
    }
}
```

## Notes

Pairs with the Recipe Details meta box snippet; when printed, the card drops its background to save ink.

## How to use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Recipe Card Styles (SCSS)" in its snippet library and add it in one click; or create a new SCSS snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/