Cards

A Card is a flexible and extensible content container. Based on Bootstrap 4’s Card component, our Card provides a containing unit for structured content and a foundation for future contextual uses like News, Contact and Place Cards.

Usage

Look at the View tab for each card variation to see an example of how it is being used.

Macro reference

Card( options )

Default Card component.

Param Default Values Description
class miz-card String Additional classes appended to the card
attributes null Object Attributes to be applied to the card
contents null String or Array The content to be displayed on the card

Structured contents

The contents of a Card can be passed as a simple string or as a structured array of objects.

Use a value of body, title, subtitle, text, image or links to return standard markup and styles.

{
  "contents": [
    {
      "type": "...",
      "contents": "..."
    }
  ]
}
Type Class Required values
body miz-card__body String OR another array of structured contents
title miz-card__title content => String
subtitle miz-card__subtitle content => String
text miz-card__text content => String
image miz-card__image src => Path to image, alt => Alt text
links miz-card__links content => Array of Link Objects containing href and text values

See examples for code samples.

CardGroup( options )

Use Card Groups to render Cards as a single, attached component with equal width and height columns.

Param Default Values Description
class miz-card-group String Additional classes appended to the card
attributes null Object Attributes to be applied to the card
items null Array An array of cards
{# Import  #}
  {% from "@miz/components/cards/cards.twig" import CardGroup as cardGroup %}

{# Set Card options #}
  {% set cardOptions = {
    "contents": [
      {
        "type": "body",
        "contents": [
          {
            "type": "title",
            "content": "A title"
          },
          {
            "type": "subtitle",
            "content": "A subtitle"
          },
          {
            "type": "text",
            "content": "Some quick example text to build on the card title and make up the bulk of the card's content."
          }
        ]
      }
    ]
  } %}

{# Set Card Group options, using Card Options for contents #}
  {% set cardGroupOptions = {
    "items": [ cardOptions, cardOptions, cardOptions ]
  } %}

{# Output Card Group with three Cards #}
  {{ cardGroup( cardGroupOptions ) }}
<div class="miz-card-group">

    <div class="miz-card">
        <div class="miz-card__body">
            <h2 class="miz-card__title">A title</h2>
            <h3 class="miz-card__subtitle">A subtitle</h3>
            <p class="miz-card__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>

    </div>

    <div class="miz-card">
        <div class="miz-card__body">
            <h2 class="miz-card__title">A title</h2>
            <h3 class="miz-card__subtitle">A subtitle</h3>
            <p class="miz-card__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>

    </div>

    <div class="miz-card">
        <div class="miz-card__body">
            <h2 class="miz-card__title">A title</h2>
            <h3 class="miz-card__subtitle">A subtitle</h3>
            <p class="miz-card__text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
        </div>

    </div>

</div>
/* No context defined for this component. */
  • Content:
    ////
    /// Cards
    /// Classes and utilities for use with the Card component.
    ///
    /// @author <Jason Rollins rollinsj@missouri.edu>
    ///
    ////
    
    /// Base Card style
    .miz-card {
      position: relative;
      display: flex;
      flex-direction: column;
      min-width: 0;
      word-wrap: break-word;
      background-color: $miz-card__background-color;
      background-clip: border-box;
      border: $miz-card__border-width;
      border-style: $miz-card__border-style;
      border-color: $miz-card__border-color;
      border-radius: $miz-card__border-radius;
      font-size: 0.8em;
    
      > hr {
        margin-right: 0;
        margin-left: 0;
      }
    }
    
    /// Card Body
    /// Use this class to place content inset into the Card.
    .miz-card__body {
      flex: 1 1 auto;
      padding: $miz-card__body-space;
    }
    
    /// Card Title
    /// Use this class on the main title for the Card
    .miz-card__title {
      margin: $miz-space-stack-default;
    }
    
    /// Card Subtitle
    /// Use this as a subtitle or subheading for a Card.
    /// Do not use without a Title
    .miz-card__subtitle {
      font-size: 1.25em;
      font-weight: $miz-font-weight-bold;
      margin-top: -$miz-card__space-y / 2;
      margin-bottom: $miz-headings-margin-bottom / 2;
    }
    
    /// Card Text
    /// Use this as a class on Card body text.
    .miz-card__text {
      font-size: 1.25em;
    
      &:last-child {
        margin-bottom: 0;
      }
    }
    
    /// Card Image
    /// Use this on images placed in Cards for the image
    /// to fill the Card's space.
    .miz-card__image {
      width: 100%;
      border-radius: 0;
    }
    
    .miz-card__links {
      display: flex;
      flex-wrap: wrap;
      margin-bottom: 0;
    }
    
    .miz-card__link {
      font-size: 1.25em;
      font-weight: $miz-font-weight-bold;
      text-decoration: none;
      border-bottom: $miz-size-xxs solid $miz-gold;
      margin: 0 $miz-space-m $miz-space-m 0;
    
      &:hover {
        border: 0;
      }
    }
    
    .miz-card__header {
      padding: $miz-card__space-y $miz-card__space-x;
      margin-bottom: 0;
    
      > :last-child {
        margin-bottom: 0;
      }
    }
    
    .miz-card__footer {
      padding: $miz-card__space-y $miz-card__space-x;
    
      > :last-child {
        margin-bottom: 0;
      }
    }
    
    /// Card Group
    /// Surround Cards with a container using this class
    /// to create a horizontal group of cards (small screens and up)
    .miz-card-group {
      display: flex;
      flex-direction: column;
    
      @include media-breakpoint-up(sm) {
        flex-flow: row wrap;
    
        > .miz-card {
          flex: 1 0 0%;
          margin-bottom: 0;
        }
      }
    }
    
    ///
    /// Utilities
    
    /// Card theming
    /// Experimental!
    /// Document and refine at a later time.
    .miz-card--dark {
      background-color: $miz-card__background-color--dark;
    }
    
    .miz-card--dark .miz-card__link {
      color: $white;
    }
    
    /// Card Outline
    /// Add a simple border outline to the card.
    .miz-card--outline {
      border: $miz-size-xxs solid $miz-black-100;
    }
    
  • URL: /components/raw/miz-cards/_cards.scss
  • Filesystem Path: fractal/pattern-library/miz/components/cards/_cards.scss
  • Size: 2.7 KB