|
|
---layout : 'default'css : 'card'
element : 'card'elementType : 'view'
title : 'Card'description : 'A card displays site content in a manner similar to a playing card'type : 'UI View'
themes : ['Default', 'Basic', 'GitHub']---
<%- @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">
<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/avatar/large/stevie.jpg"> </div> <div class="content"> <a class="header">Stevie Feliciano</a> <div class="meta"> <span class="date">Joined in 2014</span> </div> <div class="description"> Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing. </div> </div> <div class="extra content"> <a> <i class="user icon"></i> 22 Friends </a> </div> </div> </div>
<div class="even example"> <h4 class="ui header">Cards</h4> <p>A group of cards. </p> <div class="ui info message"> <h3 class="header">Customizing your views</h3> <p>Cards are designed to be flexible to your content. Meta content can include custom elements related to your content. Each child element inside the <code>extra content</code> or <code>meta</code> group will be automatically formatted to be spaced appropriately.</p> <p>This example includes a category group, a sign-up date, and a friend count which are arbitrary class names used to format users as cards.</p> </div> <div class="ui cards"> <div class="card"> <div class="image"> <img src="/images/avatar/large/elliot.jpg"> </div> <div class="content"> <div class="header">Elliot Fu</div> <div class="meta"> <a class="group">Friends</a> </div> <div class="description"> Elliot Fu is a film-maker from New York. </div> </div> <div class="extra content"> <a class="right floated created"> Joined in 2011 </a> <a class="friends"> <i class="user icon"></i> 22 Friends </a> </div> </div> <div class="card"> <div class="image"> <img src="/images/avatar/large/helen.jpg"> </div> <div class="content"> <div class="header">Helen Troy</div> <div class="meta"> <a class="group">Friends</a> </div> <div class="description"> Helen Troy is an archivist living in New York, who enjoys cooking, fine art, and gardening. </div> </div> <div class="extra content"> <a class="right floated created"> Joined in 2013 </a> <a class="friends"> <i class="user icon"></i> 22 Friends </a> </div> </div> <div class="card"> <div class="image"> <img src="/images/avatar/large/jenny.jpg"> </div> <div class="content"> <div class="header">Jenny Hess</div> <div class="meta"> <a class="group">Friends</a> </div> <div class="description"> Jenny is a student studying Media Management at the New School. </div> </div> <div class="extra content"> <a class="right floated created"> Joined in 2012 </a> <a class="friends"> <i class="user icon"></i> 22 Friends </a> </div> </div> <div class="card"> <div class="image"> <img src="/images/avatar/large/veronika.jpg"> </div> <div class="content"> <div class="header">Veronika Ossi</div> <div class="meta"> <a class="group">Friends</a> </div> <div class="description"> Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying. </div> </div> <div class="extra content"> <a class="right floated created"> Joined in 2013 </a> <a class="friends"> <i class="user icon"></i> 22 Friends </a> </div> </div> <div class="card"> <div class="image"> <img src="/images/avatar/large/stevie.jpg"> </div> <div class="content"> <a class="header">Stevie Feliciano</a> <div class="meta"> <span class="date">Joined in 2014</span> </div> <div class="description"> Stevie Feliciano is a library scientist living in New York City. </div> </div> <div class="extra content"> <a> <i class="user icon"></i> 22 Friends </a> </div> </div> <div class="card"> <div class="image"> <img src="/images/avatar/large/steve.jpg"> </div> <div class="content"> <div class="header">Steve Jobes</div> <div class="meta"> <a class="group">Acquaintances</a> </div> <div class="description"> Steve Jobes is a fictional character designed to resemble someone familiar to readers. </div> </div> <div class="extra content"> <a class="right floated created"> Joined in 2014 </a> <a class="friends"> <i class="user icon"></i> 22 Friends </a> </div> </div> </div> </div>
<h2 class="ui dividing header">Content</h2>
<div class="example"> <h4 class="ui header">Image</h4> <p>A card can contain an image</p> <div class="ui info message">Cards can use <a href="/elements/reveal.html">reveal</a> or <a href="/modules/dimmer.html">dimmers</a> to easily show additional content, or options on hover</div> <div class="ui card"> <div class="ui slide masked reveal image"> <img src="/images/avatar/large/jenny.jpg" class="visible content"> <img src="/images/avatar/large/elliot.jpg" class="hidden content"> </div> <div class="content"> <a class="header">Team Fu & Hess</a> <div class="meta"> <span class="date">Create in Sep 2014</span> </div> </div> <div class="extra content"> <a> <i class="users icon"></i> 2 Members </a> </div> </div> </div> <div class="another example"> <div class="evaluated code" data-type="javascript"> $('.special.cards .image').dimmer({ on: 'hover' }); </div> <div class="ui special cards"> <div class="card"> <div class="dimmable image"> <div class="ui dimmer"> <div class="content"> <div class="center"> <div class="ui inverted button">Add Friend</div> </div> </div> </div> <img src="/images/avatar/large/elliot.jpg"> </div> <div class="content"> <a class="header">Team Fu</a> <div class="meta"> <span class="date">Create in Sep 2014</span> </div> </div> <div class="extra content"> <a> <i class="users icon"></i> 2 Members </a> </div> </div> <div class="card"> <div class="dimmable image"> <div class="ui inverted dimmer"> <div class="content"> <div class="center"> <div class="ui primary button">Add Friend</div> </div> </div> </div> <img src="/images/avatar/large/jenny.jpg"> </div> <div class="content"> <a class="header">Team Hess</a> <div class="meta"> <span class="date">Create in Aug 2014</span> </div> </div> <div class="extra content"> <a> <i class="users icon"></i> 2 Members </a> </div> </div> </div> </div>
<div class="even example"> <h4 class="ui header">Header</h4> <p>A card can contain a header</p> <div class="ignored yellow ui message"> <div class="header"> <i class="info icon"></i> Equal Size Cards </div> <p>If your cards have content that vary in length you must set a <code>min-height</code> for that content area, or the whole card.</p>
<p>For example:</p> <div class="code" data-type="css"> /* Sets card height to about two lines of description */ #my-container .card .description { min-height: 35px; } </div> </div> <div class="ui cards"> <div class="card"> <div class="content"> <div class="header">Elliot Fu</div> <div class="meta">Friend</div> <div class="description"> Elliot Fu is a film-maker from New York. </div> </div> </div> <div class="card"> <div class="content"> <div class="header">Veronika Ossi</div> <div class="meta">Friend</div> <div class="description"> Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying. </div> </div> </div> <div class="card"> <div class="content"> <div class="header">Jenny Hess</div> <div class="meta">Friend</div> <div class="description"> Jenny is a student studying Media Management at the New School </div> </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">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/avatar/large/steve.jpg"> </a> <div class="content"> <a class="header" href="#">Steve Jobes</a> <div class="meta"> <a class="time">Last Seen 2 days ago</a> </div> </div> </div> </div> <div class="even example"> <h4 class="ui header">Buttons</h4> <p>A card can contain buttons</p> <div class="ui cards"> <div class="card"> <div class="content"> <div class="header">Elliot Fu</div> <div class="description"> Elliot Fu is a film-maker from New York. </div> </div> <div class="ui bottom attached button"> <i class="add icon"></i> Add Friend </div> </div> <div class="card"> <div class="content"> <div class="header">Veronika Ossi</div> <div class="description"> Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying. </div> </div> <div class="ui bottom attached button"> <i class="add icon"></i> Add Friend </div> </div> <div class="card"> <div class="content"> <div class="header">Jenny Hess</div> <div class="description"> Jenny is a student studying Media Management at the New School </div> </div> <div class="ui bottom attached button"> <i class="add icon"></i> Add Friend </div> </div> </div> </div>
<div class="example"> <h4 class="ui header">Actions</h4> <p>A card can contain common 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 class="extra content"> <span class="like"> <i class="like icon"></i> Like </span> <span class="star">Favorite </span> </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>
<h2 class="ui dividing header">Variations</h2>
<div class="example"> <h4 class="ui header">Fluid Card</h4> <p>A fluid card takes up the width of its container</p> <div class="ui two column grid"> <div class="column"> <div class="ui fluid card"> <div class="image"> <img src="/images/avatar/large/helen.jpg"> </div> <div class="content"> <a class="header">Helen Troy</a> </div> </div> </div> <div class="column"> <div class="ui fluid card"> <div class="image"> <img src="/images/avatar/large/elliot.jpg"> </div> <div class="content"> <a class="header">Elliot Fu</a> </div> </div> </div> </div> </div> <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/avatar/small/matt.jpg"> Matt </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/avatar/small/matt.jpg"> Matt </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/avatar/small/matt.jpg"> Matt </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/movies/12years.jpg"> </div> <div class="extra"> Rating: <div class="ui star rating" data-rating="4"></div> </div> </div> <div class="card"> <div class="image"> <img src="/images/movies/totoro.jpg"> </div> <div class="extra"> Rating: <div class="ui star rating" data-rating="2"></div> </div> </div> <div class="card"> <div class="image"> <img src="/images/movies/watchmen.jpg"> </div> <div class="extra"> Rating: <div class="ui star rating" data-rating="3"></div> </div> </div> <div class="card"> <div class="image"> <img src="/images/movies/happiness.jpg"> </div> <div class="extra"> Rating: <div class="ui star rating" data-rating="4"></div> </div> </div> <div class="card"> <div class="image"> <img src="/images/movies/adaptation.jpg"> </div> <div class="extra"> Rating: <div class="ui star rating" data-rating="3"></div> </div> </div> <div class="card"> <div class="image"> <img src="/images/movies/sherlock.jpg"> </div> <div class="extra"> Rating: <div class="ui star rating" data-rating="3"></div> </div> </div> <div class="card"> <div class="image"> <img src="/images/movies/hemingway.jpg"> </div> <div class="extra"> Rating: <div class="ui star rating" data-rating="4"></div> </div> </div> <div class="card"> <div class="image"> <img src="/images/movies/1942.jpg"> </div> <div class="extra"> Rating: <div class="ui star rating" data-rating="4"></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/avatar/large/elliot.jpg"> </div> <div class="content"> <a class="header">Elliot Fu</a> </div> </div> <div class="card"> <div class="image"> <img src="/images/avatar/large/helen.jpg"> </div> <div class="content"> <a class="header">Helen Troy</a> </div> </div> <div class="card"> <div class="image"> <img src="/images/avatar/large/jenny.jpg"> </div> <div class="content"> <a class="header">Jenny Hess</a> </div> </div> <div class="card"> <div class="image"> <img src="/images/avatar/large/veronika.jpg"> </div> <div class="content"> <a class="header">Veronika Ossi</a> </div> </div> <div class="card"> <div class="image"> <img src="/images/avatar/large/stevie.jpg"> </div> <div class="content"> <a class="header">Stevie Feliciano</a> </div> </div> <div class="card"> <div class="image"> <img src="/images/avatar/large/steve.jpg"> </div> <div class="content"> <a class="header">Steve Jobes</a> </div> </div> </div> </div>
</div>
|
