Stevie Feliciano lives in New York City. She spends her time reading, running, and writing and likes the park.
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">
@ -57,90 +57,145 @@ themes : ['Default', 'Basic']
<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 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/demo/highres.jpg">
<img src="/images/avatar/large/elliot.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 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">
<i class="check icon"></i>
199 Votes
<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/demo/highres2.jpg">
<img src="/images/avatar/large/helen.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 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">
<i class="check icon"></i>
199 Votes
<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/demo/highres3.jpg">
<img src="/images/avatar/large/jenny.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 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">
<i class="check icon"></i>
199 Votes
<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/demo/highres4.jpg">
<img src="/images/avatar/large/veronika.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 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">
<i class="check icon"></i>
199 Votes
<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/demo/highres5.jpg">
<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">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 class="header">Steve Jobes</div>
<div class="meta">
<a class="group">Acquaintances</a>
</div>
<div class="description">
Stevie Jobes is a fictional character designed to resemble someone familiar to readers.
<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 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="even example">
<h4 class="ui header">Header</h4>
<p>A card can contain a header</p>
<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>
@ -202,8 +295,8 @@ themes : ['Default', 'Basic']
</div>
<div class="example">
<h4 class="ui header">Icons</h4>
<p>A card can contain icons to denote user actions.</p>
<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 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 class="middle aligned content">
<a class="header">Arrowhead Valley Camp</a>
<div class="meta">
<span class="price">$1200</span>
<span class="stay">1 Month</span>
</div>
<div class="description">
This camp in the Hudson Valley is perfect for teenagers from 10-14.
</div>
<div class="extra">
<i class="check icon"></i>
199 Votes
<span class="right floated amenities ui label">
<i class="child icon"></i>
Child Friendly
</span>
<span class="available">
<i class="red check icon"></i>
0 Spots Available
</span>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/demo/highres2.jpg">
<img src="/images/logos/big-buck.png">
</div>
<div class="content">
<a class="header">Faithful Dog</a>
<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 class="middle aligned content">
<a class="header">Buck's Homebrew Stayaway</a>
<div class="meta">
<span class="price">$1000</span>
<span class="stay">2 Weeks</span>
</div>
<div class="description">
This adult stay away from home camp will teach you everything you need to know about forestry and homebrew.
</div>
<div class="extra">
<i class="check icon"></i>
199 Votes
<span class="right floated amenities ui label">
<i class="male icon"></i>
Adults-Only
</span>
<span class="available">
<i class="green check icon"></i>
2 Spots Available
</span>
</div>
</div>
</div>
<div class="item">
<div class="image">
<img src="/images/demo/highres3.jpg">
<img src="/images/logos/sunset.png">
</div>
<div class="content">
<a class="header">Silly Dog</a>
<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 class="middle aligned content">
<a class="header">Greek Astrology Camp</a>
<div class="meta">
<span class="price">$1600</span>
<span class="stay">6 Weeks</span>
</div>
<div class="description">
Learn astrology the old fashioned way in this stayaway camp for kids aged 8-17.
</div>
<div class="extra">
<i class="check icon"></i>
199 Votes
<span class="right floated amenities ui label">
<i class="child icon"></i>
Child Friendly
</span>
<span class="available">
<i class="green check icon"></i>
25 Spots Available
</span>
</div>
</div>
</div>
@ -81,14 +113,31 @@ themes : ['Default']
<h2 class="ui dividing header">Content</h2>
<div class="example">
<h4 class="ui header">Title</h4>
<p>A item can contain content a title</p>
<div class="ui items">
<h4 class="ui header">Header</h4>
<p>A item can contain a header</p>
<div class="ui items segment">
<div class="item">
<div class="content">
<a class="header">Cute Dog</a>
<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 class="header">Arrowhead Valley Camp</div>
<div class="description">
This camp in the Hudson Valley is perfect for teenagers from 10-14.
This adult stay away from home camp will teach you everything you need to know about forestry and homebrew.
</div>
</div>
</div>
<div class="item">
<div class="content">
<div class="header">Astrology Camp</div>
<div class="meta">
<span class="price">$1600</span>
<span class="stay">6 Weeks</span>
</div>
<div class="description">
Learn astrology the old fashioned way in this stayaway camp for kids aged 8-17.
</div>
</div>
</div>
@ -121,18 +197,40 @@ themes : ['Default']
<i class="star icon"></i>
To make the entire content of a item link, check out the link variation below
</div>
<div class="ui items">
<div class="ui items segment">
<div class="item">
<a class="image" href="#">
<img src="/images/demo/highres.jpg">
<a class="ui tiny image">
<img src="/images/avatar/large/stevie.jpg">
</a>
<div class="content">
<a class="header" href="#">Cute Dog</a>
<div class="meta">
<a class="time">2 days ago</a>
<a class="header">Stevie Feliciano</a>
<div class="description">
<p>Stevie Feliciano is a library scientist living in New York City. She likes to spend her time reading, running, and writing.</p>
<a>View Profile</a>
</div>
</div>
</div>
<div class="item">
<a class="ui tiny image">
<img src="/images/avatar/large/veronika.jpg">
</a>
<div class="content">
<a class="header">Veronika Ossi</a>
<div class="description">
Check our this <a href="http://www.dogs.com"> excellent resource</a> on dogs.
<p>Veronika Ossi is a set designer living in New York who enjoys kittens, music, and partying.</p>
<a>View Profile</a>
</div>
</div>
</div>
<div class="item">
<a class="ui tiny image">
<img src="/images/avatar/large/jenny.jpg">
</a>
<div class="content">
<a class="header">Jenny Hess</a>
<div class="description">
<p>Jenny is a student studying Media Management at the New School.</p>
<a>View Profile</a>
</div>
</div>
</div>
@ -145,7 +243,7 @@ themes : ['Default']
<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 items">
<div class="ui items segment">
<div class="item">
<div class="content">
<i class="right floated like icon"></i>
@ -159,7 +257,7 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Description</h4>
<p>A item can contain a description with a single or multiple paragraphs</p>
<div class="ui items">
<div class="ui items segment">
<div class="item">
<div class="content">
<a class="header">Cute Dog</a>
@ -176,7 +274,7 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Extra Content</h4>
<p>A item can contain extra content meant to be formatted separately from the main content</p>
<div class="ui items">
<div class="ui items segment">
<div class="item">
<div class="content">
<a class="header">Cute Dog</a>
@ -186,7 +284,7 @@ themes : ['Default']
<p>Many people also have their own barometers for what makes a cute dog.</p>
</div>
<div class="extra">
<i class="check icon"></i>
<i class="green check icon"></i>
121 Votes
</div>
</div>
@ -198,7 +296,7 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Image</h4>
<p>A item can contain an image</p>
<div class="ui items">
<div class="ui items segment">
<div class="item">
<div class="image">
<img src="/images/demo/highres.jpg">
@ -211,7 +309,7 @@ themes : ['Default']
<p>Many people also have their own barometers for what makes a cute dog.</p>
</div>
<div class="extra">
<i class="check icon"></i>
<i class="green check icon"></i>
121 Votes
</div>
</div>
@ -267,7 +365,7 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Link Item</h4>
<p>A item can be formatted so that the entire contents link to another page</p>
<div class="ui items">
<div class="ui items segment">
<a class="item" href="http://www.dog.com">
<div class="image">
<img src="/images/demo/highres.jpg">
@ -321,9 +419,9 @@ themes : ['Default']
</div>
</div>
<div class="extra content">
<div class="right floated author">
<span class="right floated author">
<img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington
</div>
</span>
</div>
</div>
</div>
@ -336,7 +434,7 @@ themes : ['Default']
<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 items">
<div class="ui items segment">
<div class="item">
<div class="content">
<a class="header">Cute Dog</a>
@ -348,9 +446,9 @@ themes : ['Default']
Here's a description of a cute dog.
</div>
<div class="content">
<div class="right floated author">
<span class="right floated author">
<img class="ui avatar image" src="/images/demo/photo2.jpg"> Dog Doggington
jlukic
10 years ago
