Card Layout

Column

.card-columns

Card-Title

This card has supporting text below as a natural lead-in to additional content.

Card-Title

This card has supporting text below as a natural lead-in to additional content.

Card-Title

This card has supporting text below as a natural lead-in to additional content.

Card-Title

This card has supporting text below as a natural lead-in to additional content.

Card-Title

This card has supporting text below as a natural lead-in to additional content.

Card-Title

This card has supporting text below as a natural lead-in to additional content.

<div class="card-layout card-columns">

  <div class="card card--type-a">
    <div class="card-image">
      <img class="card-img" src="/images/_masonry/trinamc-motion-control-sales2.jpg" alt="">
    </div>
    <div class="card-block">
      <h4 class="card-title">
					Card-Title
				</h4>
      <p class="card-text">
        This card has supporting text below as a natural lead-in to additional content.
      </p>
    </div>
  </div>

  <div class="card card--type-a">
    <div class="card-image">
      <img class="card-img" src="/images/_masonry/trinamic-motion-control-3d-printer_2.jpg" alt="">
    </div>
    <div class="card-block">
      <h4 class="card-title">
					Card-Title
				</h4>
      <p class="card-text">
        This card has supporting text below as a natural lead-in to additional content.
      </p>
    </div>
  </div>

  <div class="card card--type-a">
    <div class="card-image">
      <img class="card-img" src="/images/_masonry/trinamic-motion-control-ceo.jpg" alt="">
    </div>
    <div class="card-block">
      <h4 class="card-title">
					Card-Title
				</h4>
      <p class="card-text">
        This card has supporting text below as a natural lead-in to additional content.
      </p>
    </div>
  </div>

  <div class="card card--type-a">
    <div class="card-image">
      <img class="card-img" src="/images/_masonry/trinamic-motion-control-people.jpg" alt="">
    </div>
    <div class="card-block">
      <h4 class="card-title">
					Card-Title
				</h4>
      <p class="card-text">
        This card has supporting text below as a natural lead-in to additional content.
      </p>
    </div>
  </div>

  <div class="card card--type-a">
    <div class="card-image">
      <img class="card-img" src="/images/_masonry/trinamic-motion-control-e-bike.jpg" alt="">
    </div>
    <div class="card-block">
      <h4 class="card-title">
					Card-Title
				</h4>
      <p class="card-text">
        This card has supporting text below as a natural lead-in to additional content.
      </p>
    </div>
  </div>

  <div class="card card--type-a">
    <div class="card-image">
      <img class="card-img" src="/images/_masonry/trinamic-motion-control-education.jpg" alt="">
    </div>
    <div class="card-block">
      <h4 class="card-title">
					Card-Title
				</h4>
      <p class="card-text">
        This card has supporting text below as a natural lead-in to additional content.
      </p>
    </div>
  </div>
</div>
			  

Default

Card-Header

Card-Title

This card has supporting text below as a natural lead-in to additional content.

Card-Header

Card-Title

This card has supporting text below as a natural lead-in to additional content.

Card-Header

Card-Title

This card has supporting text below as a natural lead-in to additional content.

<div class="card-layout card-group">

  <div class="card ">
    <div class="card-header">
      Card-Header
    </div>
    <div class="card-image">
      <img class="card-img" src="/images/_stage/01_csm_heromain_b36cd97936.jpg" alt="">
    </div>
    <div class="card-block">
      <h4 class="card-title">
					Card-Title
				</h4>
      <p class="card-text">
        This card has supporting text below as a natural lead-in to additional content.
      </p>
    </div>
    <div class="card-footer">
      Card-Footer
    </div>
  </div>

  <div class="card ">
    <div class="card-header">
      Card-Header
    </div>
    <div class="card-image">
      <img class="card-img" src="/images/_stage/01_csm_heromain_b36cd97936.jpg" alt="">
    </div>
    <div class="card-block">
      <h4 class="card-title">
					Card-Title
				</h4>
      <p class="card-text">
        This card has supporting text below as a natural lead-in to additional content.
      </p>
    </div>
    <div class="card-footer">
      Card-Footer
    </div>
  </div>

  <div class="card ">
    <div class="card-header">
      Card-Header
    </div>
    <div class="card-image">
      <img class="card-img" src="/images/_stage/01_csm_heromain_b36cd97936.jpg" alt="">
    </div>
    <div class="card-block">
      <h4 class="card-title">
					Card-Title
				</h4>
      <p class="card-text">
        This card has supporting text below as a natural lead-in to additional content.
      </p>
    </div>
    <div class="card-footer">
      Card-Footer
    </div>
  </div>
</div>