Resa Design System

Appearance

Cards ​

v-0.0.0

Default ​

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

html
<div class="card">
    <div class="card__content">
        <div class="card__title mb--3">
            <p class="h4">
                Card title
            </p>
        </div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
    </div>
</div>

With Icon ​

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

html
<div class="card">
    <div class="card__content">
        <div class="card__title mb--3">
            <i class="icon--polyAssembly icon--5 me--2"></i>
            <p class="h4">
                Card title
            </p>
        </div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
    </div>
</div>

With CTA ​

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut erat nec lacus iaculis ornare.

Secondary

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Link
html
<div class="card">
    <div class="card__content">
        <div class="card__title mb--3">
            <i class="icon--polyAssembly icon--5 me--2"></i>
            <p class="h4">
                Card title
            </p>
        </div>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        </p>
    </div>
    <div class="cta__container mt--3">
        <a class="[cta__btn--primary || cta__btn--secondary || link]" title="Btn title">
            CTA label
        </a>
    </div>
</div>

Use case ​

Do

  • Use this component to display more content as subsection of the page.

Don't

  • Put too much information int a card.
  • Address multiple subjects in one singe card.

Data cards ​

  • Context title: Context value
  • Context title: Context value
  • Data label:data value
  • Data label:data value
html
<div class="card--data">
    <div class="card__heading">
        <ul class="card__context">
            <li class="card__contextTitle">
                Context title:<span class="card__contextValue">Context value</span>
            </li>
            <li class="card__contextTitle">
                Context title:<span class="card__contextValue">Context value</span>
            </li>
        </ul>
    </div>
    <div>
        <ul class="card__content">
            <li class="card__data">
                <span class="card__label">Data label:</span>
                <span class="card__value">data value</span>
            </li>
            <li class="card__data">
                <span class="card__label">Data label:</span>
                <span class="card__value">data value</span>
            </li>
        </ul>
    </div>
</div>