1.2.2 #Components - Cards - Stacks Card Stack

Toggle example guides Toggle HTML markup

You have seen this in the basic section. But card stacks are more than a container of cards.

We have card stack titles to name the whole stack of cards, and they can be in both light and dark versions. In most cases you use dark versions, but in case you're using our hero component, you may need to set the first stack title to light version to match the dark blue extended hero background. Things can be much different when you're using a picture for heros, or a custom primary color. Try both color version to decide which suits best.

Card stacks can be used in combination with columns, and we automatically handle card margins to have correct shadow rendering - browsers wraps not only content but also any display effect applied to content in columns. Be aware, currently we only support using card stack columns directly under hola-container.

Example

Stack Title Light

Stack Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, sequi.
Praesentium odio, voluptate nihil dolore repellat, aperiam quae adipisci numquam.
Saepe sequi iste neque, voluptatum quidem ducimus placeat obcaecati eum.
Markup: components/card/stack.html
<div style="background: #3498db; padding: 2rem;">
  <h3 class="hola-card-stack-title hola-card-stack-title-light">Stack Title Light</h3>
</div>

<h3 class="hola-card-stack-title">Stack Title</h3>
<div class="hola-card-stack" style="max-width: 300px">
  <div class="hola-card">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laborum, sequi.</div>
  <div class="hola-card">Praesentium odio, voluptate nihil dolore repellat, aperiam quae adipisci numquam.</div>
  <div class="hola-card">Saepe sequi iste neque, voluptatum quidem ducimus placeat obcaecati eum.</div>
</div>
Source: components/card/stack.css, line 1