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>