holakit/assets/css/components/card/stack.css

Yet another design-driven UI component set.

/*

Card Stack

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`.

Markup: stack.html

Styleguide Components - Cards - Stacks

*/

.hola-card-stack-title {
  line-height: 2em;
}
.hola-card-stack-title a {
  color: inherit;
  text-decoration: none;
}

.hola-card-stack-title.hola-card-stack-title-light {
  color: var(--hola-text-light-color);
}

.hola-card-stack .hola-card {
  margin-bottom: var(--hola-card-gap);
  margin-top: 0;
}
.hola-card-stack:last-child {
  margin-bottom: 0;
}

.hola-columns.hola-card-stack {
  position: relative;
  columns: 3 20rem;
  column-gap: 0;
  box-sizing: border-box;
  margin: 0 calc(var(--hola-card-gap) / -2);
  /* Due to some bugs in iOS Safari, column gap is simulated with paddings of column items.
  Of course we need to apply a pair of negative margin on column itself to make it align. */
}

.hola-columns.hola-card-stack > .hola-columns-item {
  padding: calc(var(--hola-card-gap) / 2);
  box-sizing: border-box;
}
.hola-columns.hola-card-stack > .hola-columns-item > .hola-card {
  position: relative;
  margin: 0;
}