<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 vertical segment">
<div class="ui basic segment">
<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>
<h2 class="ui header">Second header</h2>
@ -71,7 +71,7 @@ type : 'UI Element'
<h5 class="ui header">Fifth header</h5>
<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>
</div>
<div class="ui ignored secondary font menu">
<div class="ui ignored secondary two item font menu">
<a class="increase item"> <i class="icon circular green plus"></i> Base Font</a>
<a class="decrease item"> <i class="icon circular red minus"></i> Base Font</a>
</div>
@ -81,7 +81,7 @@ type : 'UI Element'
<h4 class="ui header">Content Headings</h4>
<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 vertical segment">
<div class="ui basic segment">
<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>
<div class="ui large header">Large Header</div>
@ -93,7 +93,7 @@ type : 'UI Element'
<div class="ui tiny header">Tiny Header</div>
<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>
</div>
<div class="ui ignored secondary font menu">
<div class="ui ignored secondary two item font menu">
<a class="increase item"> <i class="icon circular green plus"></i> Base Font</a>
<a class="decrease item"> <i class="icon circular red minus"></i> Base Font</a>
</div>
@ -111,18 +111,47 @@ type : 'UI Element'
<h2 class="ui dividing header">Variations</h2>
<div class="example">
<h4 class="ui header">Dividing</h4>
<p>A header can be formatted to divide itself from the content below it</p>
<h3 class="ui dividing header">
The nature of dogs
</h3>
<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>
</div>
<div class="example">
<h4 class="ui header">Block</h4>
<p>A header can be formatted to appear inside a content block</p>
<h3 class="ui black block header">
Block Header
</h3>
<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>
</div>
<div class="example">
<h4 class="ui header">Attached</h4>
<p>A header can be attached to other content</p>
<p>A header can be attached to other content, like a <a href="elements/segment.html">segment</a></p>
<h4 class="ui top attached header">
Sign Up For Our Site
Section 1
</h4>
<div class="ui segment attached">
<div class="ui attached segment">
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</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>
</div>
<h4 class="ui attached header">
Section 2
</h4>
<div class="ui attached segment">
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</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>
</div>
<h4 class="ui bottom attached header">
Thanks
Thanks for reading
</h4>
</div>
@ -183,27 +212,6 @@ type : 'UI Element'
</h3>
</div>
<div class="example">
<h4 class="ui header">Dividing</h4>
<p>A header can be formatted to divide itself from the content below it</p>
<h3 class="ui dividing header">
The nature of dogs
</h3>
<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>
</div>
<div class="example">
<h4 class="ui header">Block</h4>
<p>A header can be formatted to create a block</p>
<h4 class="ui black block header">
Block Header
</h4>
<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>An icon sets contains an arbitrary number of glyphs</p>
<div class="ui ignored warning message">
Icons serve a very similar function to text in a page. In semantic icons receive a special tag "i" which allow for an abbreviated markup when sitting along-side text.
Icons serve a very similar function to text in a page. In Semantic icons receive a special tag <code><i></code> which allow for an abbreviated markup when sitting along-side text.
jlukic
11 years ago