91¶ÌÊÓƵ

skip to content

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!

Link

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!

Link

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!

Link

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.

Sizes: 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.