<p class="header">Headers may be oriented to give the heirarchy of a section in the context of the page</p>
<div class="ignored info ui message">Page headings size themselves relative to the base font of the entire page not the surrounding text.</div>
<div class="ui ignored two fluid font buttons">
<a class="increase ui button"> <i class="icon green plus"></i> Base Font</a>
<a class="decrease ui button"> <i class="icon red minus"></i> Base Font</a>
<a class="increase ui button"> <i class="plus icon"></i> Base Font</a>
<a class="decrease ui button"> <i class="minus icon"></i> Base Font</a>
</div>
<div class="ui segment">
<div class="sizer">
<h1 class="ui header">First header</h1>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
<p>Headers may be oriented to give the importance of a section in the context of the content that surrounds it</p>
<div class="ignored info ui message">Content headings size themselves relative to the base font of the surrounding text</div>
<div class="ui ignored two fluid font buttons">
<a class="increase ui button"> <i class="icon green plus"></i> Base Font</a>
<a class="decrease ui button"> <i class="icon red minus"></i> Base Font</a>
<a class="increase ui button"> <i class="plus icon"></i> Base Font</a>
<a class="decrease ui button"> <i class="minus icon"></i> Base Font</a>
</div>
<div class="ui segment">
<div class="sizer">
<div class="ui huge header">Huge Header</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</p>
<p>Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.</p>
<p>Understanding how dogs behave in nature can help us to better fulfill their needs when we bring them into our homes.</p>
<p>When a puppy enters the world, his first pack leader is his mother. Canine moms teach rules, boundaries, and limitations from day one!</p>
<p>Newborn puppies don't get a name like we do. The closest thing to a personality is a dog's status within the pack. In the animal world, there are two positions: the leader and the follower.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p>A header can be attached to other content, like a <a href="/elements/segment.html">segment</a></p>
<h5 class="ui top attached header">
Bulldog
</h5>
<h3 class="ui top attached header">
Top Attached
</h3>
<div class="ui attached segment">
<p>Bulldog is the name for a breed of dog commonly referred to as the English Bulldog. Other Bulldog breeds include the American Bulldog, Old English Bulldog (now extinct), Olde English Bulldogge, and the French Bulldog. The Bulldog is a muscular, heavy dog with a wrinkled face and a distinctive pushed-in nose.</p>
<p>The American Kennel Club (AKC), The Kennel Club (UK), and the United Kennel Club (UKC) oversee breeding standards. Bulldogs are the 5th most popular purebreed in the United States in 2013 according to the American Kennel Club.</p>
<p>The Catahoula Cur is an American dog breed named after Catahoula Parish, in the state of Louisiana, in the United States. After becoming the state dog of Louisiana in 1979, its name was officially changed to Louisiana Catahoula Leopard Dog. The Catahoula is believed to be the first dog breed developed in North America.</p>
<p>The breed is sometimes referred to as the "Catahoula Hound" or "Catahoula Leopard Hound", although it is not a true hound, but a cur. It is also called the "Catahoula Hog Dog", reflecting its traditional use in hunting wild boar.</p>
<div class="ui ignored info message">Images will, by default, take up the same size as the original image. Specifying an image size will force an image to only take up a specific size.</div>
<img class="ui medium image" src="/images/demo/photo.jpg">
<div class="ui ignored info message">
Unless a size if specified, images will use the original dimensions of the image, with a maximum width of its container size <code>max-width: 100%</code>.
</div>
<img class="ui medium image" src="/images/wireframe/image.png">
</div>
<div class="example">
<h4 class="ui header">Image Link</h4>
<p>An image can be formatted to link to other content</p>
<a href="http://google.com" class="ui medium image">
<img src="/images/demo/photo.jpg">
<img src="/images/wireframe/image-text.png">
</a>
</div>
@ -39,7 +41,7 @@ themes : ['Default']
<div class="example">
<h4 class="ui header">Disabled</h4>
<p>An image can show that it is disabled and cannot be selected</p>
<p>An image can sit to the left or right of other content</p>
<div class="ui segment">
<img class="ui small left floated image" src="/images/demo/photo.jpg">
<p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>
<img class="ui small right floated image" src="/images/demo/photo.jpg">
<p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>
<img class="ui small left floated image" src="/images/wireframe/text-image.png">
<p>Te eum doming eirmod, nominati pertinacia argumentum ad his. Ex eam alia facete scriptorem, est autem aliquip detraxit at. Usu ocurreret referrentur at, cu epicurei appellantur vix. Cum ea laoreet recteque electram, eos choro alterum definiebas in. Vim dolorum definiebas an. Mei ex natum rebum iisque.</p>
<img class="ui small right floated image" src="/images/wireframe/text-image.png">
<p>Audiam quaerendum eu sea, pro omittam definiebas ex. Te est latine definitiones. Quot wisi nulla ex duo. Vis sint solet expetenda ne, his te phaedrum referrentur consectetuer. Id vix fabulas oporteat, ei quo vide phaedrum, vim vivendum maiestatis in.</p>
<p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.</p>
<p>Eu quo homero blandit intellegebat. Incorrupte consequuntur mei id. Mei ut facer dolores adolescens, no illum aperiri quo, usu odio brute at. Qui te porro electram, ea dico facete utroque quo. Populo quodsi te eam, wisi everti eos ex, eum elitr altera utamur at. Quodsi convenire mnesarchum eu per, quas minimum postulant per id.</p>
</div>
</div>
<div class="clearing example">
<h4 class="ui header">Sizes</h4>
<p>An image may be formatted to be different sizes</p>
<img class="ui mini image" src="/images/demo/highres3.jpg">
Semantic uses arbitrary default values for image sizes from mini to massive. It is recommended to update these with values used in your project in <code>image.variables</code>.
</div>
<table class="ui definition table">
<thead>
<tr>
<th>Class Name</th>
<th>Size</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mini</td>
<td>20px</td>
</tr>
<tr>
<td>Tiny</td>
<td>80px</td>
</tr>
<tr>
<td>Small</td>
<td>150px</td>
</tr>
<tr>
<td>Medium</td>
<td>300px</td>
</tr>
<tr>
<td>Large</td>
<td>450px</td>
</tr>
<tr>
<td>Big</td>
<td>600px</td>
</tr>
<tr>
<td>Huge</td>
<td>800px</td>
</tr>
<tr>
<td>Massive</td>
<td>960px</td>
</tr>
</tbody>
</table>
<img class="ui mini image" src="/images/wireframe/image.png">
jlukic
10 years ago
