Basic Cards
Cards are a common pattern, and most often are composed of an image and text. The "card" pattern itself is new, but we've seen this before with leadins, which can be thought of as simple cards.
The card pattern itself was developed to provide a way for leadin-type layouts without the leadin element itself. These are especially common on homepages and section covers where the media and text content are more complex than usual for leadins.
At some point in the future, leadins will be migrated to use the card layout explicity.
Cards have a number of different options, which are illustrated below.
Simple Card
By default, cards assume a column layout. You can force a row layout begining at a certain breakpoint by adding the appropriate class to the card.
This simple card uses the row-lg-up class, which produces a row layout at tablet-landscape (1024px) and above.
This is a Section Heading
Optio nulla dolorem labore tempora laudantium! Mus ex, corrupti consequatur eius suscipit dignissim nostrud. Aliqua fermentum, magnam exercitation! Consectetuer odio, tempor tellus venenatis sapiente eros molestiae dignissim!
Simple Card Two-Up
This card uses the two-up-lg-up class, which produces a two-up layout at tablet-landscape (1024px) and above.
This is a Section Heading
Optio nulla dolorem labore tempora laudantium! Mus ex, corrupti consequatur eius suscipit dignissim nostrud. Aliqua fermentum, magnam exercitation! Consectetuer odio, tempor tellus venenatis sapiente eros molestiae dignissim!
Card Demo
To illustrate the other options, click on the buttons below this card. Active options are red. Explanations of each option are below the buttons.
Unless otherwise noted, classes are applied to the .card div itself.
Also, unless otherwise noted, classes controlling layout at various screen sizes use the "lg-up" versions, tablet-landscape (1024px) and above.
This is a Section Heading
Optio nulla dolorem labore tempora laudantium! Mus ex, corrupti consequatur eius suscipit dignissim nostrud. Aliqua fermentum, magnam exercitation! Consectetuer odio, tempor tellus venenatis sapiente eros molestiae dignissim!
- Flush: remove the bottom margin from the card.
- Compact: tighten the margins in the card-content div. These are applied to the .card-media and .card-content divs.
- Row: Make the card assume a row layout. This will not limit the size of the image.
- Two-up: Make the card into a two-up "block grid". This will limit the image to half the available space.
- No-gap: With any row or two-up layout, this will eliminate the gutter between image and text.
Simple Card Two-Up Media-Cover
Section Heading
Anim dolorum quibusdam senectus lacus primis urna feugiat ridiculus porta, fermentum blandit voluptatibus cras ab primis? Impedit. Euismod, dis asperiores! Nullam, magnam? Nemo maxime leo, sint, commodi unde magni nostra. Itaque quae, adipisci cupiditate molestie, irure inventore nemo delectus ab iste dolorum quaerat curae voluptates, cupiditate.
Dolorem labore, eros quam condimentum pulvinar nostra a hac nascetur laboris, qui eum sit aut fugit dolor, id suspendisse suscipit, consectetur neque, senectus sollicitudin quae sociis unde quod! Exercitationem nulla porttitor voluptatum rhoncus praesentium mollitia faucibus, neque cillum! Fugit explicabo voluptatibus ipsum, laoreet minus! Animi vel inceptos! Explicabo, tempore, potenti distinctio egestas magnam malesuada.
Soluta euismod facilisi dicta euismod rutrum aute non rutrum sociosqu incididunt eaque ullam culpa integer egestas lectus netus congue, sequi, netus ea aspernatur posuere! Fringilla repudiandae, explicabo sem voluptatibus iste voluptate! Nibh turpis, quod, leo, delectus nisi elementum accusantium, rerum? Ante pretium? Magnam venenatis, voluptatibus.
Pellentesque mi iste ut. Nunc veniam vulputate molestie? Quas diamlorem, porttitor litora excepturi. Volutpat eros augue cras imperdiet convallis facilisis proident ea vitae culpa, lorem sint massa laboris fermentum vulputate ipsum eligendi.