<p class="header">Headers may be oriented to give the hierarchy of a section in the context of the page</p>
<div class="ignored info ui message">Page headings are sized using <a href="https://j.eremy.net/confused-about-rem-and-em/" target="_blank"><code>rem</code></a> and are not affected by surrounding content size.</div>
<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 are sized with <a href="https://j.eremy.net/confused-about-rem-and-em/" target="_blank"><code>em</code></a> and are based on the font-size of their container.</div>
<div class="ui ignored message">Semantic includes a complete port of <a href="http://fortawesome.github.io/Font-Awesome/" target="_blank">Font Awesome 4.3</a> designed by <a href="http://www.twitter.com/davegandy">Dave Gandy</a> for its standard icon set.</div>
<div class="icon example">
<h4 class="ui header">Web Content</h4>
<p>Icons can represent types of content found on websites</p>
@ -146,7 +147,6 @@ themes : ['Default']
<i class="wifi icon"></i>
</div>
</div>
<div class="icon example">
<h4 class="ui header">User Actions</h4>
<p>Icons can represent common actions a user can take</p>
<p>An image can specify that it needs an additional spacing to separate it from nearby content</p>
<p>Te eum doming eirmod, nominati pertinacia <img class="ui mini spaced image" src="/images/wireframe/image.png"> 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>
<div class="ui segment">
<p>Te eum doming eirmod, nominati pertinacia <img class="ui mini spaced image" src="/images/wireframe/image.png"> 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>
</div>
</div>
<div class="another example">
<p><img class="ui mini right spaced image" src="/images/wireframe/image.png">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>
<div class="example" data-class="left corner, right corner, corner">
<h4 class="ui header">Corner</h4>
<p>A label can position itself in the corner of an element</p>
<div class="yellow ui message">A corner label must be positioned inside a container with <b>position: relative</b> to display properly. If a container is rounded you will need to add <code>overflow:hidden</code> to the container to produce a rounded label.</div>
<div class="ui ignored warning message">A corner label must be positioned inside a container with <b>position: relative</b> to display properly. If a container is rounded you will need to add <code>overflow:hidden</code> to the container to produce a rounded label.</div>
<div class="ui two column grid">
<div class="column">
<div class="ui fluid image">
<a class="ui left red corner label">
<a class="ui red left corner label">
<i class="heart icon"></i>
</a>
<img src="/images/wireframe/image.png">
@ -175,7 +128,7 @@ themes : ['Default']
</div>
<div class="column">
<div class="ui fluid image">
<a class="ui black corner label">
<a class="ui black right corner label">
<i class="save icon"></i>
</a>
<img src="/images/wireframe/image.png">
@ -192,7 +145,7 @@ themes : ['Default']
<a class="ui teal tag label">Featured</a>
</div>
<div class="example">
<div class="example" data-class="left ribbon, right ribbon, ribbon">
<h4 class="ui header">Ribbon</h4>
<p>A label can appear as a ribbon attaching itself to an element.</p>