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 fileUsage
Usage example
Simple card
Fixed
Flexible
Card with header
Fixed
Flexible
Card with layouts
Fixed
Grid 1:1
Grid 2:1
Grid 1:3
Card with actions
Fixed
Flexible
Flexible 2:1
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>