Cards are used to design an HTML block containing an image, a title, text and a button (see the buttons page). Each element can be adjusted with class.ms-center or.ms-right (default left aligned).
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum sunt nostrum minus, distinctio similique enim fugiat, sequi iure provident molestias minima quidem magni velit! Consectetur nesciunt mollitia ipsum, voluptatibus omnis.
<div class="ms-card">
<div class="ms-pic">
<img src="https://nodejs.org/static/images/logos/nodejs-new-pantone-black.png" alt="nodejs">
</div>
<div class="ms-title ms-center">
<h5>Quasi, mollitia!</h5>
</div>
<div class="ms-text ms-text-gray-font">
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
<div class="ms-action ms-center">
<a class="ms-btn ms-green ms-large">GO !</a>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum sunt nostrum minus, distinctio similique enim fugiat, sequi iure provident molestias minima quidem magni velit! Consectetur nesciunt mollitia ipsum, voluptatibus omnis.
<div class="ms-card ms-boxed">
<div class="ms-pic">
<img src="https://assets.ubuntu.com/v1/29985a98-ubuntu-logo32.png" alt="ubuntu">
</div>
<div class="ms-title">
<h5>Quasi, mollitia!</h5>
</div>
<div class="ms-text">
<p>
Lorem ipsum dolor sit amet...
</p>
</div>
<div class="ms-action">
<a class="ms-btn ms-green no-margin">GO ! (no-margin btn)</a>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum sunt nostrum minus, distinctio similique...
<div class="ms-card">
<div class="ms-pic ms-rounded">
<img src="https://www.docker.com/sites/default/files/vertical.png" alt="Docker">
</div>
<div class="ms-title ms-center">
<h5>Lorem ipsum dolor sit amet, consectetur adipisicing elit!</h5>
</div>
<div class="ms-text ms-center">
<p class="ms-text-gray-font">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorum sunt nostrum minus, distinctio similique...
</p>
</div>
<div class="ms-action ms-right">
<a class="ms-btn ms-border-bottom ms-blue">GO !</a>
</div>
</div>