Huesos
Style
Guide

Repositoire

GitHub

Preview

Card: Image

The .card is a common pattern. It helps visually set apart a piece of content (i.e: a news teaser, a small section, a grid element).

Usually, the card width is limited either by setting a custom width or by stacking them on a flex / grid item;

You can set a $card-border-width (and color) to indicate card boundaries, or set it to false to avoid them. If $card-shadow is set to true, it will apply the site-wide $box-shadow.

Beware!
If you set both border and shadow to false, and your background color, is not contrasted, you will end up with an element without visible boundaries - and this will kill the element’s purpose.

You can also define your .card-padding. By default, any .card inside a .card will have its padding reduced to 1/2.

This common variation features a full-bleed image on top of the card.

Careful!
This version requires a slightly different markup than the original .card item

Example

<article class="card card--image" style="width:400px; padding:0;">
    <div class="card__image">
        <img src="https://placeimg.com/400/200/nature" />
    </div>
    <div class="card__contents">
        <h3>Title of a card</h3>
        <p>A card can have any content. Their appearance will be honored no matter what.</p>
        <p class="small">This paragraph, for example, uses a <code>.small</code> class</p>
        <div class="card right">
            <a href="#" class="button button--error">Cancel</a>
            <a href="#" class="button button--success">OK</a>
        </div>
    </div>
</article>

Assets

  • Filesystem Path: src/components/elements/card/_card.scss
  • Size: 465 Bytes 
  • .card {
	@if $card-border-width {
		@include ritmo-borders($card-border-width, $card-padding);
		border-style:solid;
		border-color: $card-border-color;
	} @else {
		padding: ritmo($card-padding);
	}
	border-radius: $card-border-radius;
	@if $card-shadow == true {
		box-shadow: $box-shadow;
	}
	// Nested cards are applied a padding reduction
	.card {
		padding: ritmo($card-padding / 2);
	}
}

.card--image {
	padding: 0;
}

.card__contents {
	padding: $gutter;
}