siftal
Version:
CSS Framework, not bad ;)
854 lines (821 loc) • 39.2 kB
HTML
<html lang="en" dir="ltr">
<head>
<title>Siftal vcard</title>
<meta charset="utf-8">
<meta name="description" content="Siftal, a simple CSS framework with usefull tools for Ermile projects">
<meta name="viewport" content="width=device-width, initial-scale=1.0, height=device-height, minimum-scale=1.0 maximum-scale=1.2, minimal-ui"/>
<link rel="shortcut icon" href="../dist/images/siftal/siftal.ico">
<link rel="icon" href="../dist/images/siftal/siftal.png" type="image/png">
<link rel="stylesheet" href="../dist/css/siftal.css">
<style>
body{background-color:#eee;}
</style>
</head>
<body class="ltr">
<div class="cn">
<div id="content" class="scr" data-xhr="content">
<div class="tbox">
<h2>vcard</h2>
<p>Siftal's cards provide a flexible and extensible content container with multiple variants and options.</p>
</div>
<div class="cbox">
<h3>Examples</h3>
<p>A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.</p>
<p>Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization. Built with flexbox, they offer easy alignment and mix well with other components.</p>
<div class="example f">
<div class="vcard shadow mA10 s12">
<img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
<div class="desc">Ermile is our company in Qom!</div>
</div>
<div class="footer"><i class="sf-users"></i>123 Friends</div>
</div>
<div class="vcard shadow mA10 s12">
<img alt='siftal' src="../dist/images/avatar/2.png">
<div class="content">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
<div class="desc">Ermile is our company in Qom!</div>
</div>
<div class="footer"><i class="sf-users"></i> 123 Friends</div>
</div>
<div class="vcard mA10 s12">
<img alt='siftal' src="../dist/images/avatar/3.png">
<div class="content">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
<div class="desc">Ermile is our company in Qom!</div>
</div>
<div class="footer"><i class="sf-users"></i>123 Friends</div>
</div>
</div>
</div>
<div class="cbox">
<div class="example f">
<div class="vcard shadow mA10 s12">
<div class="content">
<div class="floatRa meta">10h</div>
<img alt='siftal' src="../dist/images/avatar/1.png" class="avatar">Ermile
</div>
<img alt='siftal' src="../dist/images/tools/image.png">
<div class="content f">
<div class="c s12"><i class="sf-comment"></i>5 Comments</div>
<div class="cauto os s12 meta"><i class="sf-heart-o"></i>1k likes</div>
</div>
<div class="footer f">
<i class="sf-heart-o cauto"></i>
<input type="text" class="transparent c" placeholder="Add Comment...">
</div>
</div>
<div class="vcard mA10 s12">
<div class="content">
<div class="floatRa meta">10h</div>
<img alt='siftal' src="../dist/images/avatar/2.png" class="avatar">Ermile
</div>
<img alt='siftal' src="../dist/images/tools/image.png">
<div class="content f">
<div class="c s12"><i class="sf-comment"></i>5 Comments</div>
<div class="cauto os s12 meta"><i class="sf-heart-o"></i>1k likes</div>
</div>
<div class="footer f">
<i class="sf-heart-o cauto"></i>
<input type="text" class="transparent c" placeholder="Add Comment...">
</div>
</div>
<div class="vcard mA10 s12">
<div class="content">
<div class="floatRa meta">10h</div>
<img alt='siftal' src="../dist/images/avatar/3.png" class="avatar">Ermile
</div>
<img alt='siftal' src="../dist/images/tools/image.png">
<div class="content f">
<div class="c s12"><i class="sf-comment"></i>5 Comments</div>
<div class="cauto os s12 meta"><i class="sf-heart-o"></i>1k likes</div>
</div>
<div class="footer f">
<i class="sf-heart-o cauto"></i>
<input type="text" class="transparent c" placeholder="Add Comment...">
</div>
</div>
</div>
</div>
<div class="cbox">
<div class="example f">
<div class="vcard shadow mA10 s12">
<div class="content">
<div class="floatRa meta">10h</div>
<img alt='siftal' src="../dist/images/avatar/1.png" class="avatar">Ermile
</div>
<div class="content title">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
</div>
<div class="footer f">
<i class="sf-heart-o cauto"></i>
<input type="text" class="transparent c" placeholder="Add Comment...">
</div>
</div>
<div class="vcard mA10 s12">
<div class="content">
<div class="floatRa meta">10h</div>
<img alt='siftal' src="../dist/images/avatar/2.png" class="avatar">Ermile
</div>
<div class="content title">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
</div>
<div class="footer f">
<i class="sf-heart-o cauto"></i>
<input type="text" class="transparent c" placeholder="Add Comment...">
</div>
</div>
<div class="vcard mA10 s12">
<div class="content">
<div class="floatRa meta">10h</div>
<img alt='siftal' src="../dist/images/avatar/3.png" class="avatar">Ermile
</div>
<div class="content title">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
</div>
<div class="footer f">
<i class="sf-heart-o cauto"></i>
<input type="text" class="transparent c" placeholder="Add Comment...">
</div>
</div>
</div>
</div>
<div class="cbox">
<p>Cards are designed to be flexible to your content. content blocks can include any custom elements related to your content.</p>
<div class="example f">
<div class="vcard shadow mA10 s12">
<div class="content f">
<div class="c">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
</div>
<div class="cauto">
<img alt='siftal' src="../dist/images/avatar/1.png" class="mini">
</div>
<div class="desc c12">Ermile requested permission to transfer <b>Tejarak</b> team to you</div>
</div>
<div class="footer f">
<div class="c6 s pA5"><button class="btn success outline block">Approve</button></div>
<div class="c6 s pA5"><button class="btn danger outline block">Decline</button></div>
</div>
</div>
<div class="vcard mA10 s12">
<div class="content f">
<div class="c">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
</div>
<div class="cauto">
<img alt='siftal' src="../dist/images/avatar/2.png" class="mini">
</div>
<div class="desc c12">Ermile requested permission to transfer <b>Tejarak</b> team to you</div>
</div>
<div class="footer f">
<div class="c6 s pA5"><button class="btn success outline block">Approve</button></div>
<div class="c6 s pA5"><button class="btn danger outline block">Decline</button></div>
</div>
</div>
<div class="vcard mA10 s12">
<div class="content f">
<div class="c">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
</div>
<div class="cauto">
<img alt='siftal' src="../dist/images/avatar/3.png" class="mini">
</div>
<div class="desc c12">Ermile requested permission to transfer <b>Tejarak</b> team to you</div>
</div>
<div class="footer f">
<div class="c6 s pA5"><button class="btn primary outline block">Accept</button></div>
<div class="c6 s pA5"><button class="btn secondary outline block">Decline</button></div>
</div>
</div>
</div>
</div>
<div class="cbox">
<p>A card can contain a header.</p>
<div class="example f">
<div class="vcard shadow mA10 s12">
<div class="content f">
<div class="c">
<a class="header">Javad Evazzadeh</a>
<div class="meta">Friend</div>
</div>
<div class="cauto">
<img alt='siftal' src="../dist/images/avatar/1.png" class="mini">
</div>
<div class="desc c12">Javad is a CEO and founder of Ermile and start developing Siftal from 2017 and hope to write documentaion for it!</div>
</div>
</div>
<div class="vcard mA10 s12">
<div class="content f">
<div class="c">
<a class="header">Reza Mohiti</a>
<div class="meta">Friend</div>
</div>
<div class="desc c12">Reza is a back-end developer of Ermile.</div>
</div>
</div>
<div class="vcard mA10 s12">
<div class="content f">
<div class="c">
<a class="header">Hasan Salehi</a>
<div class="meta">Friend</div>
</div>
<div class="cauto">
<img alt='siftal' src="../dist/images/avatar/3.png" class="mini">
</div>
<div class="desc c12">Hasan is a full-stack developer of Ermile and always trying to be in classrooms!</div>
</div>
</div>
</div>
</div>
<div class="cbox">
<p>A card can contain content metadata.</p>
<div class="example f">
<div class="vcard shadow mA10 s12">
<div class="content">
<a class="header">Javad Evazzadeh</a>
<div class="meta"><span>3 days ago</span> <a href="#">Ermile </a></div>
<img alt='siftal' src="../dist/images/tools/paragraph.png" class="mT15 op50">
</div>
</div>
<div class="vcard mA10 s12">
<div class="content">
<a class="header">Reza Motiti</a>
<div class="meta"><span>6 days ago</span> <a href="#">Ermile</a> <a href="#">Haram</a></div>
<img alt='siftal' src="../dist/images/tools/paragraph.png" class="mT15 op50">
</div>
</div>
<div class="vcard mA10 s12">
<div class="content">
<a class="header">Hasan Salehi</a>
<div class="meta"><span>10 days ago</span> <a href="#">School</a> </div>
<img alt='siftal' src="../dist/images/tools/paragraph.png" class="mT15 op50">
</div>
</div>
</div>
</div>
<div class="cbox">
<h3>Link</h3>
<p>A card can be formatted so that the entire contents link to another page. Also a card can contain contain links as images, headers, or inside content.</p>
<div class="example f">
<div class="vcard shadow mA10 s12">
<img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
<div class="desc">Ermile is our company in Qom!</div>
</div>
<div class="footer"><i class="sf-users"></i>123 Friends</div>
</div>
<div class="vcard shadow mA10 s12">
<a href="#1"><img alt='siftal' src="../dist/images/avatar/1.png"></a>
<div class="content">
<a href="#2" class="header">Ermile</a>
<a href="#3" class="meta"><span>Joined in 2018</span></a>
<a href="#4" class="desc">Ermile is our company in Qom!</a>
</div>
<a href="#5" class="footer"><i class="sf-users"></i>123 Friends</a>
</div>
<a class="vcard shadow mA10 s12 c" href="#allISLink">
<img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Ermile</div>
<div class="meta"><span>Joined in 2018</span></div>
<div class="desc">Ermile is our company in Qom!</div>
</div>
<div class="footer"><i class="sf-users"></i>123 Friends</div>
</a>
</div>
</div>
<div class="cbox">
<h3>Center Card</h3>
<p>A card can center itself inside its container.</p>
<div class="example">
<div class="vcard shadow mA10 mLRa w300">
<img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
<div class="desc">Ermile is our company in Qom!</div>
</div>
<div class="footer"><i class="sf-users"></i>123 Friends</div>
</div>
</div>
</div>
<div class="cbox">
<h3>Colored</h3>
<p>A card can specify a color.</p>
<div class="example f">
<div class="vcard green mA10 s12"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
<div class="desc">Ermile is our company in Qom!</div>
</div>
<div class="footer"><i class="sf-users"></i>123 Friends</div>
</div>
<div class="vcard red mA10 s12"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
<div class="desc">Ermile is our company in Qom!</div>
</div>
<div class="footer"><i class="sf-users"></i>123 Friends</div>
</div>
<div class="vcard blue mA10 s12"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
<div class="desc">Ermile is our company in Qom!</div>
</div>
<div class="footer"><i class="sf-users"></i>123 Friends</div>
</div>
<div class="vcard yellow mA10 s12"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
<div class="desc">Ermile is our company in Qom!</div>
</div>
<div class="footer"><i class="sf-users"></i>123 Friends</div>
</div>
<div class="vcard black mA10 s12"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<a class="header">Ermile</a>
<div class="meta"><span>Joined in 2018</span></div>
<div class="desc">Ermile is our company in Qom!</div>
</div>
<div class="footer"><i class="sf-users"></i>123 Friends</div>
</div>
</div>
</div>
<div class="cbox">
<p>A card can contain content metadata.</p>
<div class="example f">
<div class="vcard mA10 s12">
<div class="content">
<a class="header">Javad Evazzadeh</a>
<img alt='siftal' src="../dist/images/tools/paragraph.png" class="mT15 op50">
</div>
<div class="footer"><button class="btn block primary">Check more!</button></div>
</div>
<div class="vcard mA10 s12">
<div class="content">
<a class="header">Reza Motiti</a>
<img alt='siftal' src="../dist/images/tools/paragraph.png" class="mT15 op50">
</div>
<div class="footer pAn"><button class="btn block primary">Check more!</button></div>
</div>
<div class="vcard mA10 s12">
<div class="content">
<a class="header">Hasan Salehi</a>
<img alt='siftal' src="../dist/images/tools/paragraph.png" class="mT15 op50">
</div>
<div class="footer pAn"><button class="btn block success">Check more!</button></div>
</div>
</div>
</div>
<div class="cbox">
<h3>Sizes</h3>
<p>A card can be used in many sizes</p>
<h4>Mini</h4>
<div class="example mini">
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/2.png">
<div class="content">
<button class="btn block success">Add new</button>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
</div>
<h4>Tiny</h4>
<div class="example tiny">
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/2.png">
<div class="content">
<button class="btn block success">Add new</button>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
</div>
<h4>Small</h4>
<div class="example small">
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/2.png">
<div class="content">
<button class="btn block success">Add new</button>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
</div>
<h4>Normal</h4>
<div class="example normal f"> <div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/2.png">
<div class="content">
<button class="btn block success">Add new</button>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
</div>
<h4>Large</h4>
<div class="example large f"> <div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/2.png">
<div class="content">
<button class="btn block success">Add new</button>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
</div>
<h4>Big</h4>
<div class="example big f"> <div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/2.png">
<div class="content">
<button class="btn block success">Add new</button>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
</div>
<h4>Huge</h4>
<div class="example huge f"> <div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/2.png">
<div class="content">
<button class="btn block success">Add new</button>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
</div>
<h4>Massive</h4>
<div class="example massive f"> <div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/2.png">
<div class="content">
<button class="btn block success">Add new</button>
</div>
</div>
<div class="vcard mA10"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</div>
</div>
</div>
<div class="cbox">
<h3>Live Card</h3>
<p>A card can be used in live with on and off status</p>
<div class="example mini live">
<a href="#" class="vcard shadow" data-live="on"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow" data-live="off"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow" data-live="off"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow" data-live="deactive"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow" data-live="hidden"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow" data-live="hidden"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow" data-live="on"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow" data-live="on"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow" data-live="deactive"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
<a href="#" class="vcard shadow" data-live="off"> <img alt='siftal' src="../dist/images/avatar/1.png">
<div class="content">
<div class="header">Javad Evazzdeh</div>
<div class="meta"><span>CEO and Founder</span></div>
</div>
</a>
</div>
</div>
</div>
</div>
<script src="../dist/js/siftal.min.js"></script>
</body>
</html>