SEMANTIC CARDS

What is Cards?

Cards is a bordered box, it contains some padding space around its content. Cards containing small bits of information and its convenient because it require little markup to use effectively

• A card displays site content in manner similar to playing cards.
• Semantic has a more modern look and more design option.

 

Why we use Cards?

• Cards have been used with great success in most social and sharing websites and applications (Twitter, Facebook, etc.), and especially in mobile design.
• Their compactness, portability, and high flexibility give developers a convenient way to build responsive layouts and easily adapt the content to different contexts.

 

Example:

To create a Simple Card..

 

<div class=”ui card”>

<div class=”ui slide masked reveal image”>

<img src=”images.jpg” class=”visible content”>

<img src=”images.jpg” class=”hidden content”>

</div>

<div class=”content”>

<a class=”header”>Kristy</a>

<div class=”meta”>

<span class=”date”>joined in 2013 </span>

<p>Kristy is an art director living in New York</p>

</div>

</div>

<div class=”extra content”>

<a>

<i class=”users icon”></i>

22 Friends

</a>

</div>

</div>

Output:

 

Group of Card:

It contains group of content and multiple options into the cards.

A card group automatically uses flex styles to match height between cards in the same row

 

<div class=”ui cards”>

<div class=”card”>

<div class=”content”>

<img class=”right floated mini ui image” src=”/images/avatar/large/elliot.jpg”>

<div class=”header”>

Elliot Fu

</div>

<div class=”meta”>

Friends of Veronika

</div>

<div class=”description”>

Elliot requested permission to view your contact details

</div>

</div>

<div class=”extra content”>

<div class=”ui two buttons”>

<div class=”ui basic green button”>Approve</div>

<div class=”ui basic red button”>Decline</div>

</div>

</div>

</div>

 

Output:

 

Hope this blog inspires you to embrace change and grow. Whether you are an XPLORER or not, feel free to glance through our blogs and help us guide and support you in your voyage to success. Happy Learning!