<p>Primary font: "Arial", "Tahoma", sans-serif;</p><p><em>Primary font italic: "Arial", "Tahoma", sans-serif;</em></p><p><strong>Primary font bold: "Arial", "Tahoma", sans-serif;</strong></p><p>Secondary font: "Arial", "Tahoma", sans-serif;</p>
The main font stack.
Primary font: "Arial", "Tahoma", sans-serif;
Primary font italic: "Arial", "Tahoma", sans-serif;
Primary font bold: "Arial", "Tahoma", sans-serif;
Secondary font: "Arial", "Tahoma", sans-serif;
Headings (View Code)
<h1class="ncc-section-title">Northamptonshire County Council</h1><h1>Northamptonshire County Council</h1><h2>Northamptonshire County Council</h2><h3>Northamptonshire County Council</h3><h4>Northamptonshire County Council</h4><h5>Northamptonshire County Council</h5><h6>Northamptonshire County Council</h6>
Northamptonshire County Council
Northamptonshire County Council
Northamptonshire County Council
Northamptonshire County Council
Northamptonshire County Council
Northamptonshire County Council
Northamptonshire County Council
Paragraph (View Code)
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, <ahref="#link"title="A link example">paragraphs are usually an expected</a> part of formal writing, used to organize longer prose.</p>
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
You can also use class names to style headings. This should only be used to keep markup consistent with content.
Northamptonshire
Northamptonshire
Northamptonshire
Northamptonshire
Northamptonshire
Northamptonshire
Intro Text (View Code)
<pclass="intro">The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.</p>
The intro text may be a lead-in to the passage of text, or it may just be used to create a visual distinction between the rest of the passage of text.
Paragraph (View Code)
<p>A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, <ahref="#link"title="A link example">paragraphs are usually an expected</a> part of formal writing, used to organize longer prose.</p>
A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.
Small Text (View Code)
<divclass="small-text">Look how meta we are!</div>
Small text useful for other things users need to know.
Look how meta we are!
Blockquote (View Code)
<blockquote><p>A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.</p></blockquote>
A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.
Callout (View Code)
<divclass="callout"><p>You may need the following information before you pay online: National Insurance Number (NINO) or your payroll number.</p></div>
You can use any combination of headings, but they should be in order.
You may need the following information before you pay online: National Insurance Number (NINO) or your payroll number.
<ul><li>List item with a much longer description or more content.</li><li>List item</li><li>List item
<ul><li>Nested List Item</li><li>Nested List Item</li><li>Nested List Item</li></ul></li><li>List item</li><li>List item</li><li>List item</li></ul>
List item with a much longer description or more content.
List item
List item
Nested List Item
Nested List Item
Nested List Item
List item
List item
List item
Unordered List (No Bullets) (View Code)
<ulclass="no-bullet"><li>List item with a much longer description or more content.</li><li>List item</li><li>List item
<ul><li>Nested List Item</li><li>Nested List Item</li><li>Nested List Item</li></ul></li><li>List item</li><li>List item</li><li>List item</li></ul>
List item with a much longer description or more content.
<div><form><inputclass="filter"type="text"placeholder="Filter results..."></form><ulclass="list"><li>List item with a much longer description or more content.</li><li>List item</li><li>List item
<ul><li>Nested List Item</li><li>Nested List Item</li><li>Nested List Item</li></ul></li><li>List item</li><li>List item</li><li>List item</li></ul></div>
List item with a much longer description or more content.
<p><labelclass="error">This is what happens when you do it wrong</label><inputclass="is-error"type="text"placeholder="Text Input"></p>
Password Input (View Code)
<p><labelfor="password">Password</label><inputid="password"type="password"placeholder="Type your Password"></p>
Number Input (View Code)
<p><labelfor="number">Number Input <abbrtitle="Required">*</abbr></label><inputid="number"type="number"placeholder="Enter a Number"pattern="[0-9]*"></p>
<tableclass="table-info"role="grid"summary="A description of the table should go here for screenreaders."><thead><tr><thwidth="200">Table Header</th><th>Table Header</th><thwidth="150">Table Header</th><thwidth="150"class="number">Table Header</th></tr></thead><tbody><tr><td>Content Goes Here</td><td>This is longer content Donec id elit non mi porta gravida at eget metus.</td><td>Content Goes Here</td><tdclass="align-right">£12.00</td></tr><tr><td>Content Goes Here</td><td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td><td>Content Goes Here</td><tdclass="number">£24.00</td></tr><tr><td>Content Goes Here</td><td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td><td>Content Goes Here</td><tdclass="number">£48.00</td></tr></tbody></table>
Accessible tables, ftw!
Table Header
Table Header
Table Header
Table Header
Content Goes Here
This is longer content Donec id elit non mi porta gravida at eget metus.
Content Goes Here
£12.00
Content Goes Here
This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.
Content Goes Here
£24.00
Content Goes Here
This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.
Content Goes Here
£48.00
Information Message (View Code)
<divclass="site-message--info"><strong>Interesting, </strong> something happened and it was possibly worth noting
</div>
Usually an information alert
Interesting, something happened and it was possibly worth noting
Success Message (View Code)
<divclass="site-message--success"><strong>Success!</strong> You did a thing brilliantly.
</div>
Usually a positive action related alert
Success! You did a thing brilliantly.
Fail Message (View Code)
<divclass="site-message--fail"><strong>Oh no!</strong> Something went wrong. <ahref="#">More information</a></div>
<divclass="site-wide-alert"><divclass="site-wide-alert__header"><h2class="site-wide-alert__title">Social Care System advisory</h2><divclass="site-wide-alert__time"><strong>from</strong><timedatetime="2015-01-05T+06:00">05/01/2015 06:00pm</time><strong>to</strong><timedatetime="2015-01-08T+02:00">08/01/2015 02:00</time>pm</div></div><divclass="site-wide-alert__detail"><strong>System offline: </strong>The social care systems at NCC are due to be offline for maintanence.
</div></div>
Usually a system related alert
Social Care System advisory
fromto pm
System offline: The social care systems at NCC are due to be offline for maintanence.
Page Title (View Code)
<title>LGSS Patterns | lgss.co.uk</title>
The title tag should be in the following format - Page Title | website url
LGSS Patterns | lgss.co.uk
Standard Header (View Code)
<!-- Begin .header --><headerrole="banner"class="site-header"><divclass="container"><divclass="site-logo"><aclass="logo"href="/"><imgsrc="/images/ncc-logo.png"class="no-scale"alt="Northamptonshire County Council"></a></div><!--<div class="site-search">
<form class="search">
<input type="text" placeholder="Search"><input type="submit" value="Search">
</form>
</div>--></div></header><!-- End .header -->
Light Header (View Code)
<!-- Begin .header --><headerrole="banner"class="site-header--light"><divclass="container"><divclass="site-logo"><aclass="logo"href="/"><imgsrc="/images/ncc-logo.png"class="no-scale"alt="Northamptonshire County Council"></a></div><!--<div class="site-search">
<form class="search">
<input type="text" placeholder="Search"><input type="submit" value="Search">
</form>
</div>--></div></header><!-- End .header -->
Dark Header (View Code)
<!-- Begin .header --><headerrole="banner"class="site-header--dark"><divclass="container"><divclass="site-logo"><aclass="logo"href="/"><imgsrc="/images/ncc-logo.png"class="no-scale"alt="Northamptonshire County Council"></a></div><!--<div class="site-search">
<form class="search">
<input type="text" placeholder="Search"><input type="submit" value="Search">
</form>
</div>--></div></header><!-- End .header -->
Theme Header (View Code)
<!-- Begin .header --><headerrole="banner"class="site-header--theme"><divclass="container"><divclass="site-logo"><aclass="logo"href="/"><imgsrc="/images/ncc-logo.png"class="no-scale"alt="Northamptonshire County Council"></a></div><!--<div class="site-search">
<form class="search">
<input type="text" placeholder="Search"><input type="submit" value="Search">
</form>
</div>--></div></header><!-- End .header -->
Full Width-Layout (View Code)
<divclass="row g example"><divclass="g-column"></div></div>
A single column for full page use
Two-Column Layout (View Code)
<divclass="row g example"><divclass="g-column g-one-half"></div><divclass="g-column g-one-half"></div></div>
Two column grid
Three Column Layout (View Code)
<divclass="row g example"><divclass="g-column g-one-third"></div><divclass="g-column g-one-third"></div><divclass="g-column g-one-third"></div></div>
Three column grid
Two-thirds Column Layout (View Code)
<divclass="row g example"><divclass="g-column g-two-thirds"></div><divclass="g-column g-one-third"></div></div>
Two thirds column grid
Quarter Column Layout (View Code)
<divclass="row g example"><divclass="g-column g-one-quarter"></div><divclass="g-column g-three-quarters"></div></div>
Quarter column grid
Email Template (View Code)
<!-- add email code here -->
Panel (View Code)
<divclass="panel"><p>Anything wrong with this page? <ahref="#">Let us know</a>.</p></div>
an example download link (PDF 162kb)