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.
266 lines
8.3 KiB
266 lines
8.3 KiB
---
|
|
layout : 'default'
|
|
css : 'header'
|
|
|
|
element : 'header'
|
|
elementType : 'element'
|
|
|
|
title : 'Header'
|
|
description : 'A header provides a short summary of content'
|
|
type : 'UI Element'
|
|
|
|
themes : ['Default', 'Classic', 'Bookish', 'Chubby']
|
|
---
|
|
|
|
<%- @partial('header') %>
|
|
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/header.less" />
|
|
<script src="/javascript/header.js"></script>
|
|
|
|
<div class="main container">
|
|
|
|
<h2 class="ui dividing header">Types</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Header</h4>
|
|
<p>A standard header</p>
|
|
<h2 class="ui header">
|
|
Account Settings
|
|
</h2>
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Descriptive Headers</h4>
|
|
<p>Headers may have sub headers containing further context to the section</p>
|
|
<h2 class="ui header">
|
|
Account Settings
|
|
<div class="sub header">Manage your account settings and set e-mail preferences.</div>
|
|
</h2>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
</div>
|
|
<div class="another example">
|
|
<h2 class="ui header">
|
|
<i class="settings icon"></i>
|
|
<div class="content">
|
|
Account Settings
|
|
<div class="sub header">Manage your account settings and set e-mail preferences.</div>
|
|
</div>
|
|
</h2>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Icon</h4>
|
|
<p>A header can be formatted to emphasize an icon</p>
|
|
<h2 class="ui icon header">
|
|
<i class="settings icon"></i>
|
|
<div class="content">
|
|
Account Settings
|
|
<div class="sub header">Manage your account settings and set e-mail preferences.</div>
|
|
</div>
|
|
</h2>
|
|
<img class="ui wireframe image" src="/images/wireframe/centered-paragraph.png">
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Page Headings</h4>
|
|
<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="plus icon"></i> Base Font</a>
|
|
<a class="decrease ui button"> <i class="minus icon"></i> Base Font</a>
|
|
</div>
|
|
<div class="sizer">
|
|
<h1 class="ui header">First header</h1>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
<h2 class="ui header">Second header</h2>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
<h3 class="ui header">Third header</h3>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
<h4 class="ui header">Fourth header</h4>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
<h5 class="ui header">Fifth header</h5>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<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 ignored two fluid font buttons">
|
|
<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="sizer">
|
|
<div class="ui huge header">Huge Header</div>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
<div class="ui large header">Large Header</div>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
<div class="ui medium header">Medium Header</div>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
<div class="ui small header">Small Header</div>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
<div class="ui tiny header">Tiny Header</div>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
</div>
|
|
</div>
|
|
|
|
<h2 class="ui dividing header">States</h2>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Disabled</h4>
|
|
<p>A header can show that it is inactive</p>
|
|
<div class="ui disabled header">
|
|
Disabled Header
|
|
</div>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
</div>
|
|
|
|
<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>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
<h3 class="ui dividing header">
|
|
Dividing Header
|
|
</h3>
|
|
<img class="ui wireframe image" src="/images/wireframe/short-paragraph.png">
|
|
</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>
|
|
<img class="ui wireframe image" src="/images/wireframe/media-paragraph.png">
|
|
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Attached</h4>
|
|
<p>A header can be attached to other content, like a <a href="/elements/segment.html">segment</a></p>
|
|
<h3 class="ui top attached header">
|
|
Top Attached
|
|
</h3>
|
|
<div class="ui attached segment">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<h3 class="ui attached header">
|
|
Attached
|
|
</h3>
|
|
<div class="ui attached segment">
|
|
<img class="ui wireframe image" src="/images/wireframe/paragraph.png">
|
|
</div>
|
|
<h3 class="ui bottom attached header">
|
|
Bottom Attached
|
|
</h3>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">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="clearing example">
|
|
<h4 class="ui header">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 justified header">
|
|
This should take up the full width even if only one line
|
|
</h3>
|
|
<h3 class="ui center aligned header">
|
|
Center
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Colors</h4>
|
|
<p>A header can be formatted with different colors</p>
|
|
<h4 class="ui black header">
|
|
Black
|
|
</h4>
|
|
<h4 class="ui blue header">
|
|
Blue
|
|
</h4>
|
|
<h4 class="ui green header">
|
|
Green
|
|
</h4>
|
|
<h4 class="ui orange header">
|
|
Orange
|
|
</h4>
|
|
<h4 class="ui pink header">
|
|
Pink
|
|
</h4>
|
|
<h4 class="ui purple header">
|
|
Purple
|
|
</h4>
|
|
<h4 class="ui red header">
|
|
Red
|
|
</h4>
|
|
<h4 class="ui teal header">
|
|
Teal
|
|
</h4>
|
|
<h4 class="ui yellow header">
|
|
Yellow
|
|
</h4>
|
|
</div>
|
|
|
|
|
|
<div class="example">
|
|
<h4 class="ui header">Inverted</h4>
|
|
<p>A header can have its colors inverted for contrast</p>
|
|
<div class="ui info message">
|
|
Inverted headers use modified light versions of your site's color scheme that are adapted to have more contrast on dark background
|
|
</div>
|
|
<div class="ui inverted segment">
|
|
<h4 class="ui black header">
|
|
Black
|
|
</h4>
|
|
<h4 class="ui blue header">
|
|
Blue
|
|
</h4>
|
|
<h4 class="ui green header">
|
|
Green
|
|
</h4>
|
|
<h4 class="ui orange header">
|
|
Orange
|
|
</h4>
|
|
<h4 class="ui pink header">
|
|
Pink
|
|
</h4>
|
|
<h4 class="ui purple header">
|
|
Purple
|
|
</h4>
|
|
<h4 class="ui red header">
|
|
Red
|
|
</h4>
|
|
<h4 class="ui teal header">
|
|
Teal
|
|
</h4>
|
|
<h4 class="ui yellow header">
|
|
Yellow
|
|
</h4>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|