Components

Each div has class .cardItem, within the parent container div assigned class .two-column-grid.

A YAML array contains data about each card, for instance:

  infoCards:
    - id: card-01
      name: Card 01
      linkTitle: Card 01's Link Title
      linkURL: #
      info: The respective card's information, usually a short paragraph or explanation of its material.

Each card is another item in the infoCards YAML array. This array's data is passed to the template:

<div class="tcg">    
    {% for card in infoCards %}
      <div class="cardItem grow img-centertext-container" id="button-line">
        <div id="underline"></div>
        <h3>
          {{ card.name }}
        </h3>
        <a href="{{ card.linkURL }}" alt="{{ card.linkTitle }}">{{ card.linkTitle }}</a>
        <p>{{ card.info }}</p>
      </div>
    {% endfor %}
</div>