|
|
---layout : 'default'css : 'card'
title : 'Card'description : 'A card view lists site content as a playing card'type : 'UI View'
element : 'card'elementType : 'view'
themes : ['Default', 'Basic']---
<%- @partial('header') %>
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/views/card.less" /><script src="/javascript/card.js"></script>
<div class="main container">
<div class="peek"> <div class="ui vertical pointing secondary menu"> <a class="active item">Types</a> <a class="item">Content</a> <a class="card">Variations</a> </div> </div>
<h2 class="ui dividing header">Types</h2>
<div class="example"> <h4 class="ui header">Card</h4> <p>A single card.</p> <div class="ui card"> <div class="image"> <img src="/images/demo/highres.jpg"> </div> <div class="content"> <div class="header">Cute Dog</div> <div class="meta"> <span class="date">5 days ago</span> </div> <div class="description"> This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with. </div> </div> <div class="extra content"> <i class="like icon"></i> 22 Likes </div> </div> </div>
<div class="even example"> <h4 class="ui header">Cards</h4> <p>A group of cards. </p> <div class="ignored yellow ui message"> <div class="header"> <i class="info icon"></i> Equal Size Cards </div> <p>Your card's content may vary in length. In order to keep cards aligned, it is best to set a <code>min-height</code> that matches your largest card size.</p>
<p>For example:</p> <div class="code" data-type="css"> /* Sets card height to about 3 lines of description */ #my-container .card .content { min-height: 145px; } </div> </div> <div class="ui cards"> <div class="card"> <div class="image"> <img src="/images/demo/highres.jpg"> </div> <div class="content"> <div class="header">Cute Dog</div> <div class="meta">Today</div> <div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div> </div> <div class="extra content"> <i class="check icon"></i> 199 Votes </div> </div> <div class="card"> <div class="image"> <img src="/images/demo/highres2.jpg"> </div> <div class="content"> <div class="header">Faithful Dog</div> <div class="meta">5 days ago</div> <div class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</div> </div> <div class="extra content"> <i class="check icon"></i> 199 Votes </div> </div> <div class="card"> <div class="image"> <img src="/images/demo/highres3.jpg"> </div> <div class="content"> <div class="header">Silly Dog</div> <div class="meta">12 days ago</div> <div class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</div> </div> <div class="extra content"> <i class="check icon"></i> 199 Votes </div> </div> <div class="card"> <div class="image"> <img src="/images/demo/highres4.jpg"> </div> <div class="content"> <div class="header">Introverted Dog</div> <div class="meta">18 days ago</div> <div class="description">Introverted dogs don't like to say much, but thats ok, dogs can't talk anyways.</div> </div> <div class="extra content"> <i class="check icon"></i> 199 Votes </div> </div> <div class="card"> <div class="image"> <img src="/images/demo/highres5.jpg"> </div> <div class="content"> <div class="header">Large Dog</div> <div class="meta">22 days ago</div> <div class="description">Large dogs just take up a lot of space. There's not much to be said.</div> </div> <div class="extra content"> <i class="check icon"></i> 199 Votes </div> </div> </div> </div>
<h2 class="ui dividing header">Content</h2>
<div class="example"> <h4 class="ui header">Title</h4> <p>A card can contain content a title</p> <div class="ui card"> <div class="content"> <div class="header">Cute Dog</div> <div class="meta">2 days ago</div> <div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Metadata</h4> <p>A card can contain content metadata</p> <div class="ui info message"> <i class="info icon"></i> You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced </div> <div class="ui card"> <div class="content"> <div class="header">Cute Dog</div> <div class="meta"> <span class="time">2 days ago</span> <span class="category">Animals</span> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Link</h4> <p>A card can contain contain links as images, headers, or inside content</p> <div class="ui yellow message"> <i class="star icon"></i> To make the entire content of a card link, check out the link variation below </div> <div class="ui card"> <a class="image" href="#"> <img src="/images/demo/highres.jpg"> </a> <div class="content"> <a class="header" href="#">Cute Dog</a> <div class="meta"> <a class="time">2 days ago</a> </div> <div class="description"> Check our this <a href="http://www.dogs.com"> excellent resource</a> on dogs. </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Icons</h4> <p>A card can contain icons to denote user actions.</p> <div class="ui info message"> Common actions may contain special formatting, like "star" or "heart". To attach events, on a user action, please check out the <a href="#">state behavior</a>. </div> <div class="ui card"> <div class="content"> <i class="right floated like icon"></i> <i class="right floated star icon"></i> <div class="header">Cute Dog</div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Description</h4> <p>A card can contain a description with a single or multiple paragraphs</p> <div class="ui card"> <div class="content"> <div class="header">Cute Dog</div> <div class="meta">2 days ago</div> <div class="description"> <p>Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.</p> <p>Many people also have their own barometers for what makes a cute dog.</p> </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Extra Content</h4> <p>A card can contain extra content meant to be formatted separately from the main content</p> <div class="ui card"> <div class="content"> <div class="header">Cute Dog</div> <div class="meta">2 days ago</div> <div class="description"> <p>Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.</p> <p>Many people also have their own barometers for what makes a cute dog.</p> </div> </div> <div class="extra content"> <i class="check icon"></i> 121 Votes </div> </div>
</div>
<div class="example"> <h4 class="ui header">Image</h4> <p>A card can contain an image</p> <div class="ui card"> <div class="image"> <img src="/images/demo/highres.jpg"> </div> <div class="content"> <div class="header">Cute Dog</div> <div class="meta">2 days ago</div> <div class="description"> <p>Cute dogs come in a variety of shapes and sizes. Some cute dogs are cute for their adorable faces, others for their tiny stature, and even others for their massive size.</p> <p>Many people also have their own barometers for what makes a cute dog.</p> </div> </div> <div class="extra content"> <i class="check icon"></i> 121 Votes </div> </div> </div>
<h2 class="ui dividing header">Variations</h2>
<div class="example"> <h4 class="ui header">Link Card</h4> <p>A card can be formatted so that the entire contents link to another page</p> <a class="ui card" href="http://www.dog.com"> <div class="content"> <div class="header">Cute Dog</div> <div class="meta"> <span class="category">Animals</span> </div> <div class="description"> Click to view more information about this dog at dog.com </div> </div> <div class="extra content"> <div class="right floated author"> <img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington </div> </div> </a> </div> <div class="another example"> <div class="ui link card"> <div class="content"> <div class="header">Cute Dog</div> <div class="meta"> <span class="category">Animals</span> </div> <div class="description"> This card simulates a link without using the A tag for use with javascript links. </div> </div> <div class="extra content"> <div class="right floated author"> <img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Floated Content</h4> <p>Any content element can be floated left or right</p> <div class="ui info message"> <i class="info icon"></i> You can include an arbitrary amount of metadata using your own class conventions, all child elements will automatically be spaced </div> <div class="ui card"> <div class="content"> <div class="header">Cute Dog</div> <div class="meta"> <span class="right floated time">2 days ago</span> <span class="category">Animals</span> </div> <div class="description"> Here's a description of a cute dog. </div> </div> <div class="extra content"> <div class="right floated author"> <img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington </div> </div> </div> </div>
<div class="even example"> <h4 class="ui header">Column count</h4> <p>A group of cards can set how many cards should exist in a row</p> <div class="ui four cards"> <div class="card"> <div class="image"> <img src="/images/demo/highres4.jpg"> </div> <div class="content"> <div class="header">Cute Dog</div> <div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div> </div> </div> <div class="card"> <div class="image"> <img src="/images/demo/highres5.jpg"> </div> <div class="content"> <div class="header">Faithful Dog</div> <div class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</div> </div> </div> <div class="card"> <div class="image"> <img src="/images/demo/highres3.jpg"> </div> <div class="content"> <div class="header">Silly Dog</div> <div class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</div> </div> </div> <div class="card"> <div class="image"> <img src="/images/demo/highres2.jpg"> </div> <div class="content"> <div class="header">Happy Dog</div> <div class="description">Happy dogs are pretty interesting if you are an unhappy person.</div> </div> </div> </div> </div>
<div class="even example"> <h4 class="ui header">Doubling</h4> <p>A group of cards can double its column width for mobile</p> <div class="ui ignored warning message">Resize your browser to a smaller size to see the cards stack after reaching mobile breakpoints</div> <div class="ui six doubling cards"> <div class="card"> <div class="image"> <img src="/images/demo/highres4.jpg"> </div> <div class="content"> <div class="header">Cute Dog</div> <div class="description">This dog has some things going for it. Its pretty cute and looks like it'd be fun to cuddle up with.</div> </div> </div> <div class="card"> <div class="image"> <img src="/images/demo/highres5.jpg"> </div> <div class="content"> <div class="header">Faithful Dog</div> <div class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</div> </div> </div> <div class="card"> <div class="image"> <img src="/images/demo/highres3.jpg"> </div> <div class="content"> <div class="header">Silly Dog</div> <div class="description">Silly dogs can be quite fun to have as companions. You never know what kind of ridiculous thing they will do.</div> </div> </div> <div class="card"> <div class="image"> <img src="/images/demo/highres2.jpg"> </div> <div class="content"> <div class="header">Happy Dog</div> <div class="description">Happy dogs are pretty interesting if you are an unhappy person.</div> </div> </div> <div class="card"> <div class="image"> <img src="/images/demo/highres5.jpg"> </div> <div class="content"> <div class="header">Faithful Dog</div> <div class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</div> </div> </div> <div class="card"> <div class="image"> <img src="/images/demo/highres5.jpg"> </div> <div class="content"> <div class="header">Faithful Dog</div> <div class="description">Sometimes its more important to have a dog you know you can trust. But not every dog is trustworthy, you can tell by looking at its smile.</div> </div> </div> </div> </div>
</div>
|
