Card

The Card component provides a flexible container for displaying content with various layouts, including images, text, and actions.

Examples

1.Basic Example

<div class="card flex-column">
    <div class="card__content-text flex-column">
        <h4 class="text-lg-bold">Card Title!</h4>
        <p class="text-md-regular">This is a card description</p>
    </div>
    <div class="card__action card__action--default">
        <button type="button" class="btn btn--lg btn--secondary-outline" aria-label="Click me">
            <span>Secondary Action</span>
        </button>
        <button type="button" class="btn btn--lg btn--primary-brand" aria-label="Click me">
            <span>Primary Action</span>
        </button>
    </div>
</div>

Preview

See the Pen Card by Ahmed Sayed (@wdalhaj) on CodePen

---

2.Card with image Example

<div class="card flex-column">
    <div class="card__image-container">
        <img src="https://via.assets.so/img.jpg?w=306&amp;h=200&amp;tc=white&amp;bg=teal" alt="Card">
    </div>
    <div class="card__content-text flex-column">
        <h4 class="text-lg-bold">Card Title!</h4>
        <p class="text-md-regular">This is a card description</p>
    </div>
    <div class="card__action card__action--default">
        <button type="button" class="btn btn--lg btn--secondary-outline" aria-label="Click me">
            <span>Secondary Action</span>
        </button>
        <button type="button" class="btn btn--lg btn--primary-brand" aria-label="Click me">
            <span>Primary Action</span>
        </button>
    </div>
</div>

Preview

See the Pen Card by Ahmed Sayed (@wdalhaj) on CodePen

---