@miraidesigns/card v1.0.3

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