Cards

Useful for displaying a heading, content, and call-to-action in a box. Optionally supports a label, and two different sized icons. Use with the Grid for positioning.

Cards can also use flexbox so that they all occupy the same vertical space. They must be wrapped by the .Card__wrapper class to flex correctly.


Card

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!
<div class="Card g-1_3">
	<h4 class="Card__heading"><strong>Whatever</strong></h4>
	<p class="Card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	<a href="#" class="Button">Go!</a>
</div>

Card With Icon

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!
<div class="Card g-1_3">
	<svg class="Icon Icon--size-1 Card__icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path d="M10.4 18.8l14-15.4c1.7-1.8 4.5-1.9 6.3-.1 1.7 1.7 1.8 4.5.2 6.3L14.3 27.9c-1.3 2.1-4 2.8-6.1 1.4-.4-.3-.8-.6-1.1-1l-5.8-6c-1.7-1.8-1.6-4.7.1-6.5 1.7-1.7 4.4-1.7 6.2 0l2.8 3z"></path></svg>
	<h3 class="Card__heading">Whatever</h3>
	<p class="Card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	<a href="#" class="Button Button--text">Go!</a>
</div>

Card With Large Icon

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!

Whatever

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Go!
<div class="Card g-1_3">
	<img src="src/image.svg" class="Card__large-icon" />
	<label class="Card__super">Superscript</label>
	<h3 class="Card__heading">Whatever</h3>
	<p class="Card__content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
	<a href="#" class="Button">Go!</a>
</div>

Rating Card

9.9


Tech Support

9.9


Tech Support

9.9


Tech Support

9.9


Tech Support

<div class="Card Card__number g-1_4">
	<h1 class="Card__heading">9.9</h1>
	<hr>
	<p class="Card__content">Tech Support</p>
</div>

<div class="Card Card__featured g-1_2">
	<h4 class="Card__heading"><strong>Header</strong></h4>
	<p class="Card__content">Content</p>
	<a href="#" class="Button Button--primary">Button</a>
</div>

Plan Card

3 Years

(Billed every year at $119.40)


9.95/mo

Buy Now
Best Offer

3 Years

(Billed every year at $119.40)


9.95/mo

Buy Now

3 Years

(Billed every year at $119.40)


9.95/mo

Buy Now
<div class="Card Card__featured g-1_2">
	<h4 class="Card__heading"><strong>Header</strong></h4>
	<p class="Card__content">Content</p>
	<a href="#" class="Button Button--primary">Button</a>
</div>

Extended Plan Card

Dedicated Hosting

The Holy Grail of hosting, a dedicated server is ideal for high traffic sites, apps, agencies, and resellers.


Starting at just

$169/mo

  • List Item (Double Spaced)
  • List Item (Double Spaced)
  • List Item (Double Spaced)
Buy Now

Dedicated Hosting

The Holy Grail of hosting, a dedicated server is ideal for high traffic sites, apps, agencies, and resellers.


Starting at just

$169/mo

  • List Item (Double Spaced)
  • List Item (Double Spaced)
  • List Item (Double Spaced)
Buy Now

Dedicated Hosting

The Holy Grail of hosting, a dedicated server is ideal for high traffic sites, apps, agencies, and resellers.


Starting at just

$169/mo

  • List Item (Double Spaced)
  • List Item (Double Spaced)
  • List Item (Double Spaced)
Buy Now