@miraidesigns/card

Cards

Cards are containers with a single object or focus. They are made up of a title and description and may also include media elements and require user actions.

---

HTML

<div class="mdf-card"> 
    <div class="mdf-card__header">
        <h2 class="mdf-card__title">Card title</h2>
    </div>

    <div class="mdf-card__content">
        <p>Some text describing the card's content or purpose.</p>
    </div>
</div>

Sass

// Include default styles without configuration
@forward '@miraidesigns/card/styles';

// Configure appearance
@use '@miraidesigns/card' with (
    $variable: value
);

@include card.styles();

---

Examples

Some basic examples on how the module can be used.

Card with Media and Actions

Media like images or video and user actions are easily added to any card.

<div class="mdf-card">
    <div class="mdf-card__media">
        <img class="mdf-card__media-item" src="1.jpg" alt="Image description">
    </div>

    <div class="mdf-card__header">
        <h2 class="mdf-card__title">Card title</h2>
    </div>

    <div class="mdf-card__content">
        <p>Some text describing the card's content or purpose.</p>
    </div>

    <div class="mdf-card__footer">
        <button class="mdf-button">Action 1</button>
        <button class="mdf-button">Action 2</button>
    </div>
</div>

---

Implementation

Classes

Name	Type	Description
mdf-card	Parent	Container for the card elements
mdf-card--bordered	Modifier	Add a border to the card
mdf-card--raised	Modifier	Elevate the card by adding a shadow
mdf-card--fixed-width	Modifier	Restrict the card's width
mdf-card__media	Child	Contains the media elements. Child to .mdf-card
mdf-card__media-item	Child	Media element. Child to .mdf-card__media
mdf-card__header	Child	Contains the title. Child to .mdf-card
mdf-card__title	Child	Title element. Child to .mdf-card__header
mdf-card__content	Child	Contains the cards text description. Child to .mdf-card
mdf-card__footer	Child	Contains the action buttons. Child to .mdf-card