Cards
Cards are one of the most fundamental and dynamic containers that we use. There are multiple versions of the card, but the html structure of the card remains largely the same; all that is needed to swap from one card to another is to simply apply a modifier.
Basic Cards
Cards are modular. You can choose which sub elments you want to include.
<div class="card">
<div class="card__image">
<img src="<!--image url-->" alt="">
</div>
<h3 class="card__title"><!--title--></h3>
<div class="card__content">
<!--content goes here-->
</div>
</div>
The basic card types include vertical, horizontal, and alternate. Cards are vertical by default, but you can change them to one of the other types by using their corresponding modifier listed below:
<!-- unmodified -->
HTML
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur suscipit sed sit quod? Nam, ex quis! Culpa molestiae facilis necessitatibus illum consequatur tempora voluptates distinctio cum, dicta voluptas aperiam sint?
--horizontal
CSS
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi fuga repellat autem ab vitae aliquid saepe quibusdam cumque id dolorem. Et deserunt repellendus culpa nam inventore repudiandae. Ea, quis magnam.
--alt
JS
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consectetur suscipit sed sit quod? Nam, ex quis! Culpa molestiae facilis necessitatibus illum consequatur tempora voluptates distinctio cum, dicta voluptas aperiam sint?
Linked Cards
Linked cards are a little different. The linked card modifier can be used in conjunction with any basic card type. Though, I wouldn't necessarily advise doing it with the alternate card.
<div class="card --linked">
<a href="<!-- destination url -->">
<div class="card__image">
<img src="<!--image url-->" alt="">
</div>
<h3 class="card__title"><!--title--></h3>
<div class="card__content">
<!--content goes here-->
</div>
</a>
</div>
Image Icons
If you're using an icon (.png file with transparent background) as the image for a card, you can add the --iconmodifier to the card__imageelement; it makes the card image have take on the primary color for its background.
Button Bar
Sometimes, you may not want to use linked boxes and would prefer to have a button to launch the action. Or, you could have multiple actions per card. That's where the button bar comes into play.
<div class="card">
<div class="card__image">
<img src="<!--image url-->" alt="">
</div>
<h3 class="card__title"><!--title--></h3>
<div class="card__content">
<!--content goes here-->
</div>
<div class="card__buttons">
<a href="/webdev/styleguide" class="button">Link</a>
<button class="button">Button</button>
</div>
</div>
HTML
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum nesciunt vero hic facere dolor iure enim velit blanditiis temporibus. Rerum quis odit cumque unde dolore eos quod inventore nobis? Delectus!
CSS
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum nesciunt vero hic facere dolor iure enim velit blanditiis temporibus. Rerum quis odit cumque unde dolore eos quod inventore nobis? Delectus!
JS
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Harum nesciunt vero hic facere dolor iure enim velit blanditiis temporibus. Rerum quis odit cumque unde dolore eos quod inventore nobis? Delectus!
Expanded Titles
For Horizontal Cards without Content Blocks
Sometimes with cards, it isn't desirable to have the content block. When this happens with a horizontal card, one needs to apply the --expandedclass to the title block.
<div class="card --horizontal">
<div class="card__image --icon">
<img src="<!--image url-->" alt="">
</div>
<h3 class="card__title --expanded"><!--title--></h3>
</div>
HTML
CSS
JS
Responsive Cards
Sometimes, it can be desirable to have a card display in different styles on different screen sizes. One example would be a horizontal card with a fair bit of text in the content block.
sm, med, lrg, xlrg, xxlrg.--[size]-vertical--[size]-horizontal--[size]-alt
<div class="card --sm-vertical --lrg-horizontal">
<div class="card__image --icon">
<img src="<!--image url-->" alt="">
</div>
<h3 class="card__title"><!--title--></h3>
<div class="card__content">
<!-- content -->
</div>
<div class="card__buttons">
<a class="button" href="<!-- link -->">Link 1</a>
<a class="button" href="<!-- link -->">Link 2</a>
<a class="button" href="<!-- link -->">Link 3</a>
</div>
</div>
HTML
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates error officia facere aliquam similique! Omnis, debitis exercitationem qui praesentium repudiandae tempora magnam a officiis blanditiis rerum reprehenderit ducimus velit obcaecati?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates error officia facere aliquam similique! Omnis, debitis exercitationem qui praesentium repudiandae tempora magnam a officiis blanditiis rerum reprehenderit ducimus velit obcaecati?
Other Modifiers
| Modifier | Element | Effect |
|---|---|---|
| --smaller-img | .cards with the .--horizontal modifier | Makes the image to the left smaller. |