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
  • Content:
    .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;
    }