You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
692 lines
21 KiB
692 lines
21 KiB
---
|
|
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>
|