maille/components/card/style.css

Component library for MithrilJS

.maille.maille-card {
  display: flex;
  flex-direction: column;
  margin: var(--maille-card-margin, .5em);
  overflow: hidden;
}

.maille.maille-card .maille-card-content {
  position: relative;
  height: 100%;
}

.maille.maille-card.rounded {
  border-radius: var(--maille-card-border-radius, .5em);
}

.maille.maille-card.shadowed-on-hover:hover {
  box-shadow: var(--maille-card-shadowed-on-hover-box-shadow, 2px 3px 10px #AAA);
}

.maille.maille-card.shadowed {
  box-shadow: var(--maille-card-shadowed-box-shadow, 2px 3px 10px #AAA);
}

.maille.maille-card.bordered {
  border: var(--maille-card-bordered-border, 1px solid #AAA);
}

.maille.maille-card.size-sm { width: var(--maille-card-sm-width, 10em); }
.maille.maille-card.size-md { width: var(--maille-card-md-width, 15em); }
.maille.maille-card.size-lg { width: var(--maille-card-lg-width, 20em); }
.maille.maille-card.size-xlg { width: var(--maille-card-xlg-width, 30em); }

/**************/
/* With Image */
/**************/

.maille.maille-card.rounded .maille-card-image-container {
  border-top-left-radius: var(--maille-card-border-radius, .5em);
  border-top-right-radius: var(--maille-card-border-radius, .5em);
}

.maille.maille-card .maille-card-image-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.maille.maille-card .maille-card-image-container img.full-width {
  width: 100%;
}