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

 

Why we use Cards?

 

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!

0 responses on "SEMANTIC CARDS"

Leave a Message

Your email address will not be published. Required fields are marked *

About Xplore IT Corp

XIC is home to several global certified trainers who are subject matter experts in their respective domains. XIC has Vast experienced resources who are top experts including that of Microsoft, Cisco, Oracle, VMware, Red Hat, Novell, EC Council, Adobe, among others.

top
© Xplore IT Corp 2017. All rights reserved. Designed by Web Design Company
Xplore WhatsApp Chat
Send via WhatsApp
X