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.
193 lines
6.5 KiB
193 lines
6.5 KiB
---
|
|
layout : 'default'
|
|
css : 'header'
|
|
|
|
title : 'Header'
|
|
type : 'UI Element'
|
|
---
|
|
<div class="segment">
|
|
<div class="container">
|
|
<h1>Header</h1>
|
|
<p>Headers provide a short summary of content</p>
|
|
</div>
|
|
</div>
|
|
<div class="main container">
|
|
|
|
<div class="peek">
|
|
<div class="ui vertical pointing menu">
|
|
<a class="active item">Standard</a>
|
|
<a class="item">States</a>
|
|
<a class="item">Variations</a>
|
|
</div>
|
|
</div>
|
|
<h2>Standard</h2>
|
|
|
|
<div class="example">
|
|
<h4>Page Headings</h4>
|
|
<p>Page headings are ordered headings showing the structure of content on a page. There size is always relative to the page's font size</p>
|
|
<div class="ui top attached 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>
|
|
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
|
|
<h3 class="ui header">Third header</h3>
|
|
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
|
|
<h4 class="ui header">Fourth header</h4>
|
|
<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>
|
|
<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 two item bottom attached small basic font menu">
|
|
<a class="increase item"> <i class="icon plus"></i> Base Font</a>
|
|
<a class="decrease item"> <i class="icon minus"></i> Base Font</a>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4>Content Headings</h4>
|
|
<p>Content headings are specified by their size and will change their size relative to the font-size of the content that surrounds it.</p>
|
|
<div class="ui top attached segment">
|
|
<h3 class="ui huge header">Huge Header</h3>
|
|
<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>
|
|
<h3 class="ui large header">Large Header</h3>
|
|
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
|
|
<h3 class="ui medium header">Medium Header</h3>
|
|
<p>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</p>
|
|
<h3 class="ui small header">Small Header</h3>
|
|
<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>
|
|
<h3 class="ui tiny header">Tiny Header</h3>
|
|
<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 two item bottom attached small basic font menu">
|
|
<a class="increase item"> <i class="icon plus"></i> Base Font</a>
|
|
<a class="decrease item"> <i class="icon minus"></i> Base Font</a>
|
|
</div>
|
|
</div>
|
|
|
|
<h2>States</h2>
|
|
|
|
<div class="example">
|
|
<h4>Disabled</h4>
|
|
<p>A header can show that its inactive</p>
|
|
<div class="ui disabled header">
|
|
Disabled Header
|
|
</div>
|
|
</div>
|
|
|
|
<h2>Variations</h2>
|
|
|
|
<div class="example">
|
|
<h4>Icon</h4>
|
|
<p>A header can be formatted to emphasize an icon</p>
|
|
<h1 class="ui icon header">
|
|
<i class="icon mail"></i>
|
|
Message Anyone
|
|
</h1>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4>Floating</h4>
|
|
<p>A header can sit to the left or right of other content</p>
|
|
<div class="ui segment">
|
|
<h3 class="ui right floated header">
|
|
Go Forward
|
|
</h3>
|
|
<h3 class="ui left floated header">
|
|
Go Back
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div class="example">
|
|
<h4>Text Alignment</h4>
|
|
<p>A header can have its text aligned to a side</p>
|
|
<div class="ui segment">
|
|
<h3 class="ui right aligned header">
|
|
Right
|
|
</h3>
|
|
<h3 class="ui left aligned header">
|
|
Left
|
|
</h3>
|
|
<h3 class="ui center aligned header">
|
|
Center
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4>Colors</h4>
|
|
<p>A header can be formatted with different colors</p>
|
|
<h5 class="ui black header">
|
|
Black
|
|
</h5>
|
|
<h5 class="ui blue header">
|
|
Blue
|
|
</h5>
|
|
<h5 class="ui red header">
|
|
Red
|
|
</h5>
|
|
<h5 class="ui green header">
|
|
Green
|
|
</h5>
|
|
<h5 class="ui purple header">
|
|
Purple
|
|
</h5>
|
|
<h5 class="ui teal header">
|
|
Teal
|
|
</h5>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4>Inverted</h4>
|
|
<p>A header can have its colors inverted for contrast</p>
|
|
<h5 class="ui inverted black header">
|
|
Black
|
|
</h5>
|
|
<h5 class="ui inverted blue header">
|
|
Blue
|
|
</h5>
|
|
<h5 class="ui inverted red header">
|
|
Red
|
|
</h5>
|
|
<h5 class="ui inverted green header">
|
|
Green
|
|
</h5>
|
|
<h5 class="ui inverted purple header">
|
|
Purple
|
|
</h5>
|
|
<h5 class="ui inverted teal header">
|
|
Teal
|
|
</h5>
|
|
</div>
|
|
|
|
<!--
|
|
<div class="example">
|
|
<h4>Dividing</h4>
|
|
<p>A header can be formatted to be displayed with a divider</p>
|
|
<h1 class="ui dividing header">
|
|
<i class="icon easel"></i>
|
|
Step 1
|
|
</h1>
|
|
</div> -->
|
|
|
|
<div class="example">
|
|
<h4>Attached</h4>
|
|
<p>A header can be attached to other content</p>
|
|
<h3 class="ui top attached header">
|
|
Sign Up For Our Site
|
|
</h3>
|
|
<div class="ui segment attached">
|
|
<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>
|
|
<h3 class="ui bottom attached header">
|
|
Thanks
|
|
</h3>
|
|
|
|
</div>
|
|
|
|
|
|
<h2>Groups</h2>
|
|
|
|
|
|
|
|
</div>
|