R A D I U S

The React documentation for this component can be read from Storybook (link here)

Card

To group related content together and provide an at a glance overview of the content they lead to.

Description

A card is avaliable in two variants - Fixed and Flexible

Fixed

This card will have fixed padding of 16px all around and is designed to be used where multiple cards are next to each other in a grid configuration — See Card Ticker as an example.

Flexible

This card relies on the gird layout within. By default it has a sigle column layout, but can be expanded to pretty much any configuration required. Adding the card__item--actionable modifier to the card__item will make it actionable. This denotes an action can be perfomed on this element

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-card;

Link to Abstract/Sketch file

Download Sketch / Abstract file

Usage

Usage example

Simple card

Fixed

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi eius nostrum minima possimus, eligendi obcaecati laborum ipsa totam reprehenderit rem neque voluptates commodi, quos blanditiis, quo perferendis eum necessitatibus.

Flexible

Card with header

Fixed

Flexible

Card with layouts

Fixed

Grid 1:1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, ullam, inventore! Deserunt quos laboriosam incidunt. Facere temporibus quod architecto maxime iusto dolorum. Sit modi enim, recusandae ratione facilis fugiat sint.

Grid 2:1

Grid 1:3

Card with actions

Fixed

Action in here

Flexible

Action in here

Flexible 2:1

Action in here

Card with styles

Emphasis

Fixed

Flexible

Success

Fixed

Flexible

Code example

<h3>Simple card</h3>
<h4>Fixed</h4>

<div class="card">
    <div class="card__item card__content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi eius nostrum minima possimus, eligendi obcaecati laborum ipsa totam reprehenderit rem neque voluptates commodi, quos blanditiis, quo perferendis eum necessitatibus.
    </div>
</div>
<h4>Flexible</h4>

<div class="card card--flexible">
    <div class="card__item card__content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi eius nostrum minima possimus, eligendi obcaecati laborum ipsa totam reprehenderit rem neque voluptates commodi, quos blanditiis, quo perferendis eum necessitatibus.
    </div>
</div>

<h3>Card with header</h3>
<h4>Fixed</h4>

<div class="card">
    <div class="card__item card__header">Example title</div>
    <div class="card__item card__content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi eius nostrum minima possimus, eligendi obcaecati laborum ipsa totam reprehenderit rem neque voluptates commodi, quos blanditiis, quo perferendis eum necessitatibus.
    </div>
</div>
<h4>Flexible</h4>

<div class="card card--flexible">
    <div class="card__item card__header">Example title</div>
    <div class="card__item card__content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi eius nostrum minima possimus, eligendi obcaecati laborum ipsa totam reprehenderit rem neque voluptates commodi, quos blanditiis, quo perferendis eum necessitatibus.
    </div>
</div>

<h3>Card with layouts</h3>
<h4>Fixed</h4>

<div class="card">
    <div class="card__item card__content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi eius nostrum minima possimus, eligendi obcaecati laborum ipsa totam reprehenderit rem neque voluptates commodi, quos blanditiis, quo perferendis eum necessitatibus.
    </div>
</div>
<h4>Grid 1:1</h4>

<div class="card">
    <div class="card__grid-1-1">
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, ullam, inventore! Deserunt quos laboriosam incidunt. Facere temporibus quod architecto maxime iusto dolorum. Sit modi enim, recusandae ratione facilis fugiat sint.
      </div>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, ullam, inventore! Deserunt quos laboriosam incidunt. Facere temporibus quod architecto maxime iusto dolorum. Sit modi enim, recusandae ratione facilis fugiat sint.
        </div>
    </div>
</div>
<h4>Grid 2:1</h4>

<div class="card">
    <div class="card__grid-2-1">
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, ullam, inventore! Deserunt quos laboriosam incidunt. Facere temporibus quod architecto maxime iusto dolorum. Sit modi enim, recusandae ratione facilis fugiat sint.
      </div>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, ullam, inventore! Deserunt quos laboriosam incidunt. Facere temporibus quod architecto maxime iusto dolorum. Sit modi enim, recusandae ratione facilis fugiat sint.
        </div>
    </div>
</div>
<h4>Grid 1:3</h4>

<div class="card">
    <div class="card__grid-1-3">
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, ullam, inventore! Deserunt quos laboriosam incidunt. Facere temporibus quod architecto maxime iusto dolorum. Sit modi enim, recusandae ratione facilis fugiat sint.
      </div>
        <div>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, ullam, inventore! Deserunt quos laboriosam incidunt. Facere temporibus quod architecto maxime iusto dolorum. Sit modi enim, recusandae ratione facilis fugiat sint.
        </div>
    </div>
</div>

<h3>Card with actions</h3>
<h4>Fixed</h4>

<div class="card">
    <div class="card__item card__content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi eius nostrum minima possimus, eligendi obcaecati laborum ipsa totam reprehenderit rem neque voluptates commodi, quos blanditiis, quo perferendis eum necessitatibus.
    </div>
      <div class="card__item card__action">
        <a href="#" class="cta-primary cta--minor">Action in here</a>
      </div>
</div>
<h4>Flexible</h4>

<div class="card card--flexible">
    <div class="card__item card__content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi eius nostrum minima possimus, eligendi obcaecati laborum ipsa totam reprehenderit rem neque voluptates commodi, quos blanditiis, quo perferendis eum necessitatibus.
    </div>
      <div class="card__item card__action">
        <a href="#" class="cta-primary cta--minor">Action in here</a>
      </div>
</div>
<h4>Flexible 2:1</h4>

<div class="card card--flexible">
    <div class="card__grid-2-1">
      <div>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae, ullam, inventore! Deserunt quos laboriosam incidunt. Facere temporibus quod architecto maxime iusto dolorum. Sit modi enim, recusandae ratione facilis fugiat sint.
      </div>
        <div class="card__grid-action">
          <a href="#" class="cta-primary cta--block">Action in here</a>
        </div>
    </div>
</div>

<h3>Card with styles</h3>
<h4>Emphasis</h4>
<h5>Fixed</h5>
<div class="card card--emphasis">
    <div class="card__item card__content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi eius nostrum minima possimus, eligendi obcaecati laborum ipsa totam reprehenderit rem neque voluptates commodi, quos blanditiis, quo perferendis eum necessitatibus.
    </div>
</div>

<h5>Flexible</h5>
<div class="card card--flexible card--emphasis">
    <div class="card__item card__content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi eius nostrum minima possimus, eligendi obcaecati laborum ipsa totam reprehenderit rem neque voluptates commodi, quos blanditiis, quo perferendis eum necessitatibus.
    </div>
</div>
<h4>Success</h4>
<h5>Fixed</h5>
<div class="card card--success">
    <div class="card__item card__content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi eius nostrum minima possimus, eligendi obcaecati laborum ipsa totam reprehenderit rem neque voluptates commodi, quos blanditiis, quo perferendis eum necessitatibus.
    </div>
</div>

<h5>Flexible</h5>
<div class="card card--success">
    <div class="card__item card__content">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus animi eius nostrum minima possimus, eligendi obcaecati laborum ipsa totam reprehenderit rem neque voluptates commodi, quos blanditiis, quo perferendis eum necessitatibus.
    </div>
</div>