The card component is a generic box containing atomic information and possible actions.
Use cards to provide information and or actions on specific items.
For instance place each article of a shopping basket in a card, together with actions to remove,
duplicate, adjust said item.
Do not use cards as a way to highlight a specific aspect of a bigger set of information. Use the highlight component for that. The content of cards should always be atomic.
<div class="card">
<div>
<h3>Title</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis est harum magni mollitia quo reiciendis saepe. Minus quam quibusdam rem.
</div>
</div>
<div class="actions">
<button type="button"
class="button button-secondary button-small icon-cross">Verwijder</button>
</div>
</div>
<div class="card">
<div>
<h3>Title</h3>
<div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis est harum magni mollitia quo reiciendis saepe. Minus quam quibusdam rem.
</div>
</div>
<div class="actions">
<button type="button" class="button button-secondary button-small icon-cross">Verwijder</button>
</div>
</div>
/* No context defined. */
.card {
margin: 1.2rem 0;
border-radius: border-radius('radius-1');
// override li line-height
line-height: 1.75;
box-shadow: 0 .1rem .6rem 0 rgba(35, 51, 58, .25);
> * {
padding: 1rem;
}
.actions {
@include theme('border-color', 'color-primary--lighten-4', 'modal-action-border-bottom');
border-top: 2px solid;
}
}