LGSS | Service Manual

Frontend Styleguide

Colors (View Code)

    <ul class="sg-colors">
  <li class="sg-color">
    <div class="sg-swatch color-brand-primary"></div>
    
    <div class="sg-label">$brand-primary <span class="sg-hex">#0077C0</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-brand-secondary"></div>
    
    <div class="sg-label">$brand-secondary <span class="sg-hex">#961D78</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-white"></div>
    
    <div class="sg-label">$white <span class="sg-hex">#ffffff</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-ghost-gray"></div>
    
    <div class="sg-label">$ghost-gray <span class="sg-hex">#f1f3f1</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-whitesmoke"></div>
    
    <div class="sg-label">$whitesmoke <span class="sg-hex">#edf4f7</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-geyser"></div>
    
    <div class="sg-label">$geyser <span class="sg-hex">#dbe1e3</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-manatee"></div>
    
    <div class="sg-label">$manatee <span class="sg-hex">#9299A5</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-mine-shaft"></div>
    
    <div class="sg-label">$mine-shaft <span class="sg-hex">#353535</span></div>
  </li>
  <li class="sg-color">
    <div class="sg-swatch color-black"></div>
    
    <div class="sg-label">$black <span class="sg-hex">#000000</span></div>
  </li>
<li class="sg-color">
  <div class="sg-swatch color-fail"></div>
  <div class="sg-label">$fail <span class="sg-hex">#FF0000</span></div>
</li>
<li class="sg-color">
  <div class="sg-swatch color-success"></div>
  <div class="sg-label">$success <span class="sg-hex">#80AB25</span></div>
</li>
<li class="sg-color">
  <div class="sg-swatch color-highlight"></div>
  <div class="sg-label">$highlight <span class="sg-hex">#FFBF47</span></div>
</li>
</ul>

Our main color palette.

Partner and Customer Colors (View Code)

    <ul class="sg-colors">
<li class="sg-color">
  <div class="sg-swatch color-ccc"></div>
  <div class="sg-label">$ccc <span class="sg-hex">#3e96d5</span></div>
</li>
<li class="sg-color">
  <div class="sg-swatch color-ncc"></div>
  <div class="sg-label">$ncc <span class="sg-hex">#961D78</span></div>
</li>
</ul>
<ul class="sg-colors">
<li class="sg-color">
  <div class="sg-swatch color-hdc"></div>
  <div class="sg-label">$hdc <span class="sg-hex">#80AB25</span></div>
</li>
<li class="sg-color">
  <div class="sg-swatch color-nocc"></div>
  <div class="sg-label">$nocc <span class="sg-hex">#007F6B</span></div>
</li>
<li class="sg-color">
  <div class="sg-swatch color-nbc"></div>
  <div class="sg-label">$nbc <span class="sg-hex">#BBAB12</span></div>
</li>
<li class="sg-color">
  <div class="sg-swatch color-nph"></div>
  <div class="sg-label">$nph <span class="sg-hex">#1D1D1B</span></div>
</li>
<li class="sg-color">
  <div class="sg-swatch color-ocs"></div>
  <div class="sg-label">$ocs <span class="sg-hex">#333399</span></div>
</li>
<li class="sg-color">
  <div class="sg-swatch color-nhft"></div>
  <div class="sg-label">$nhft <span class="sg-hex">#F08221</span></div>
</li>
</ul>

Our partner and customer organisations color palette.

Fonts (View Code)

    <p>Primary font: "Helvetica", "Tahoma", sans-serif;</p>
<p><em>Primary font italic: "Helvetica", "Tahoma", sans-serif;</em></p>
<p><strong>Primary font bold: "Helvetica", "Tahoma", sans-serif;</strong></p>
<p>Secondary font: "Helvetica", "Tahoma", sans-serif;</p>

The main font stack.

Primary font: "Helvetica", "Tahoma", sans-serif;

Primary font italic: "Helvetica", "Tahoma", sans-serif;

Primary font bold: "Helvetica", "Tahoma", sans-serif;

Secondary font: "Helvetica", "Tahoma", sans-serif;

Headings (View Code)

    <h1>LGSS</h1>
<h2>LGSS</h2>
<h3>LGSS</h3>
<h4>LGSS</h4>
<h5>LGSS</h5>
<h6>LGSS</h6>

LGSS

LGSS

LGSS

LGSS

LGSS
LGSS

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, <a href="#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.

Heading Classes (View Code)

    <h6 class="h1">LGSS</h6>
<h1 class="h2">LGSS</h1>
<h2 class="h3">LGSS</h2>
<h3 class="h4">LGSS</h3>
<h4 class="h5">LGSS</h4>
<h5 class="h6">LGSS</h5>

You can also use class names to style headings. This should only be used to keep markup consistent with content.

LGSS

LGSS

LGSS

LGSS

LGSS

LGSS

Intro Text (View Code)

    <p class="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, <a href="#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)

    <div class="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)

    <div class="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.

Address (View Code)

    <div class="vcard">
  <div class="org">LGSS</div>
  <div class="adr">
    <div class="street-address">Shire Hall</div>
    <span class="locality">Castle Hill, Cambridge</span>
    <span class="postal-code">CB3 0AJ</span>,
    <abbr class="region" title="United Kingdom">UK</abbr>
  </div>
  <div class="tel">0300 126 1111</div>
</div>

Vcard markup

LGSS
Shire Hall
Castle Hill, Cambridge CB3 0AJ, UK
0300 126 1111

Accessibility (View Code)

    <span class="accessible"> Opens in new window</span>

An off-viewport notice for links that open in a new window, you can't see it but that's kind of the point.

Opens in new window

Time (View Code)

    <time datetime="2020-11-04T09:46:55+00:00">2 weeks ago</time>

Accessibility (View Code)

    <span class="accessible"> Opens in new window</span>

An off-viewport notice for links that open in a new window, you can't see it but that's kind of the point.

Opens in new window

Citation (View Code)

    <p><cite>BBC</cite>, January 2nd, 2014</p>

A way of describing the reference for another element

BBC, January 2nd, 2014

Definition (View Code)

    <p>A <dfn>kernel</dfn> is a softer, usually edible part of a nut, seed, or fruit stone contained within its shell.</p>

Define a term

A kernel is a softer, usually edible part of a nut, seed, or fruit stone contained within its shell.

Horizontal Rule (View Code)

    <hr>

Ordered List (View Code)

    <ol>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
</ol>

  1. Link 1
  2. Link 2
  3. Link 3
  4. Link 4
  5. Link 5

Unordered List (View Code)

    <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>

Unordered List (No Bullets) (View Code)

    <ul class="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>

Inline List (View Code)

    <ul>
  <li><a href="#">Link 1</a></li>
  <li><a href="#">Link 2</a></li>
  <li><a href="#">Link 3</a></li>
  <li><a href="#">Link 4</a></li>
  <li><a href="#">Link 5</a></li>
</ul>

Definition List (View Code)

    <dl>
  <dt>The word</dt>
  <dd>The definition</dd>
</dl>

The word
The definition

Text Filter (View Code)

    <div>
  <form>
    <input class="filter" type="text" placeholder="Filter results...">
  </form>
  <ul class="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.
  • List item
  • List item
    • Nested List Item
    • Nested List Item
    • Nested List Item
  • List item
  • List item
  • List item

Text Input (View Code)

    <p>
  <label for="text">Text Input <abbr title="Required">*</abbr></label>
  <input id="text" type="text" placeholder="Text Input">
</p>

Valid Input (View Code)

    <label  class="valid">Valid</label>
<input  class="is-valid" type="text" placeholder="Text Input">

Error Text Field (View Code)

    <p>
  <label class="error">This is what happens when you do it wrong</label>
  <input class="is-error" type="text" placeholder="Text Input">
</p>

Password Input (View Code)

    <p>
  <label for="password">Password</label>
  <input id="password" type="password" placeholder="Type your Password">
</p>

Number Input (View Code)

    <p>
  <label for="number">Number Input <abbr title="Required">*</abbr></label>
  <input id="number" type="number" placeholder="Enter a Number" pattern="[0-9]*">
</p>

Web Address (View Code)

    <p>
  <label for="webaddress">Web Address</label>
  <input id="webaddress" type="url" placeholder="http://yoursite.com">
</p>

Select Menu (View Code)

    <label for="select">Select</label>
  <select id="select">
    <optgroup label="Option Group">
        <option>Option One</option>
        <option>Option Two</option>
        <option>Option Three</option>
    </optgroup>
</select>

Checkboxes (View Code)

    <form action="#">
  <fieldset>
    <legend>Checkbox <abbr title="Required">*</abbr></legend>
    <ul>
      <li><label for="checkbox1"><input id="checkbox1" name="checkbox" type="checkbox" checked="checked"> Choice A</label></li>
      <li><label for="checkbox2"><input id="checkbox2" name="checkbox" type="checkbox"> Choice B</label></li>
      <li><label for="checkbox3"><input id="checkbox3" name="checkbox" type="checkbox"> Choice C</label></li>
    </ul>
  </fieldset>
</form>

Checkbox *

Radio Buttons (View Code)

    <form action="#">
  <fieldset>
    <legend>Radio</legend>
    <ul>
      <li><label for="radio1"><input id="radio1" name="radio" type="radio" checked="checked"> Option 1</label></li>
      <li><label for="radio2"><input id="radio2" name="radio" type="radio"> Option 2</label></li>
      <li><label for="radio3"><input id="radio3" name="radio" type="radio"> Option 3</label></li>
    </ul>
  </fieldset>
</form>

Radio

Textarea (View Code)

    <p>
  <label for="textarea">Textarea</label>
  <textarea id="textarea" rows="8" cols="48" placeholder="Enter your message here"></textarea>
</p>

Buttons (View Code)

    <button>Button</button>
<button class="button--secondary">Button Secondary</button>
<button class="button--alt">Button Alternate</button>
<button>Disabled Button</button>

Button with Description (View Code)

    <a href="#" class="button">Start Now</a>
<p class="small-text">On the public sector jobs website</p>

Primarily for "Start Now" buttons on Service Pages

Start Now

On the public sector jobs website

Task button (View Code)

    <div class="row g button-group">
  <a href="#" title="" class="g-column g-one-third button--task">
  	<p>Claim your mileage</p>
  </a>
  <a href="#" title="" class="g-column g-one-third button--task">
  	<p>Apply for a DBS check</p>
  </a>
  <a href="#" title="" class="g-column g-one-third button--task">
  	<p>Check your payday</p>
  </a>
</div>

Claim your mileage

Apply for a DBS check

Check your payday

Landscape Image (View Code)

    <img src="/images/lgss-image-placeholder-3-2.png" alt="image placeholder 3 to 2 ratio">

image placeholder 3 to 2 ratio

Light Logo (View Code)

    <a class="logo" href="/"><img src="/images/lgss-light.png" class="no-scale" alt="LGSS"></a>

Breadcrumbs (View Code)

    <div class="row">
  <div class="breadcrumbs">
    <ul class="inline-list">
      <li><a href="#">Home</a></li>
      <li><a href="#">Grandparent</a></li>
      <li><a href="#">Parent</a></li>
      <li>Child</li>
    </ul>
  </div>
</div>

Table (View Code)

    <table class="table-info" role="grid" summary="A description of the table should go here for screenreaders.">
  <thead>
    <tr>
      <th width="200">Table Header</th>
      <th>Table Header</th>
      <th width="150">Table Header</th>
      <th width="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>
      <td class="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>
      <td class="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>
      <td class="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)

    <div class="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)

    <div class="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)

    <div class="site-message--fail">
    <strong>Oh no!</strong> Something went wrong. <a href="#">More information</a>
</div>

Usually a negative action related alert

Oh no! Something went wrong. More information

Site-Wide Alert (View Code)

    <div class="site-wide-alert">
    <div class="site-wide-alert__header">
      <h2 class="site-wide-alert__title">Social Care System advisory</h2>
        <div class="site-wide-alert__time"><strong>from</strong> <time datetime="2015-01-05T+06:00">05/01/2015 06:00pm</time> <strong>to</strong> <time datetime="2015-01-08T+02:00">08/01/2015 02:00</time>pm</div>
      </div>
        <div class="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

from to 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 -->
<header role="banner" class="site-header">
  <div class="container">
    <div class="site-logo">
      <a class="logo" href="/"><img src="/images/lgss.png" class="no-scale" alt="LGSS"></a>

    </div>
    <div class="site-search">
      <form class="search">
 	<input type="text" placeholder="I'm looking for..."><input type="submit" value="Search">
</form>

    </div>
  </div>
</header>
<!-- End .header -->

Light Header (View Code)

    <!-- Begin .header -->
<header role="banner" class="site-header--light">
  <div class="container">
    <div class="site-logo">
      <a class="logo" href="/"><img src="/images/lgss.png" class="no-scale" alt="LGSS"></a>

    </div>
    <div class="site-search">
      <form class="search">
 	<input type="text" placeholder="I'm looking for..."><input type="submit" value="Search">
</form>

    </div>
  </div>
</header>
<!-- End .header -->

Dark Header (View Code)

    <!-- Begin .header -->
<header role="banner" class="site-header--dark">
  <div class="container">
    <div class="site-logo">
      <a class="logo" href="/"><img src="/images/lgss-light.png" class="no-scale" alt="LGSS"></a>

    </div>
    <div class="site-search">
      <form class="search">
 	<input type="text" placeholder="I'm looking for..."><input type="submit" value="Search">
</form>

    </div>
  </div>
</header>
<!-- End .header -->

Full Width-Layout (View Code)

      <div class="row g example">
    <div class="g-column"></div>
  </div>

A single column for full page use

Two-Column Layout (View Code)

    <div class="row g example">
  <div class="g-column g-one-half"></div>
  <div class="g-column g-one-half"></div>
</div>

Two column grid

Three Column Layout (View Code)

    <div class="row g example">
  <div class="g-column g-one-third"></div>
  <div class="g-column g-one-third"></div>
  <div class="g-column g-one-third"></div>
</div>

Three column grid

Two-thirds Column Layout (View Code)

    <div class="row g example">
  <div class="g-column g-two-thirds"></div>
  <div class="g-column g-one-third"></div>
</div>

Two thirds column grid

Email Template (View Code)

    <!-- add email code here -->

Media Block (View Code)

    <div class="row g">
  <div class="g-column g-one-third">
    <div class="media">
      <img src="/images/lgss-image-placeholder-3-2.png" alt="placeholder image 3 to 2 ratio" class="media__media">
      <div class="media__body">
        <h4 class="title">Let's Go Direct is now live</h4>
        <p>The Let's Go Direct self-service portal has launched for staff, it's now possible to <a href="#" target="_blank">complete a task online</a> 24/7.
        </p>
      </div>
    </div>
  </div>
  <div class="g-column g-one-third">
    <div class="media">
      <img src="/images/lgss-image-placeholder-3-2.png" alt="placeholder image 3 to 2 ratio" class="media__media">
      <div class="media__body">
        <h4 class="title">Let's Go Direct is now live</h4>
        <p>The Let's Go Direct self-service portal has launched for staff, it's now possible to <a href="#" target="_blank">complete a task online</a> 24/7.
        </p>
      </div>
    </div>
  </div>
  <div class="g-column g-one-third">
    <div class="media">
      <img src="/images/lgss-image-placeholder-3-2.png" alt="placeholder image 3 to 2 ratio" class="media__media">
      <div class="media__body">
        <h4 class="title">Let's Go Direct is now live</h4>
        <p>The Let's Go Direct self-service portal has launched for staff, it's now possible to <a href="#" target="_blank">complete a task online</a> 24/7.
        </p>
      </div>
    </div>
  </div>
</div>

placeholder image 3 to 2 ratio

Let's Go Direct is now live

The Let's Go Direct self-service portal has launched for staff, it's now possible to complete a task online 24/7.

placeholder image 3 to 2 ratio

Let's Go Direct is now live

The Let's Go Direct self-service portal has launched for staff, it's now possible to complete a task online 24/7.

placeholder image 3 to 2 ratio

Let's Go Direct is now live

The Let's Go Direct self-service portal has launched for staff, it's now possible to complete a task online 24/7.

Panel (View Code)

    <div class="panel"><p>Anything wrong with this page? <a href="#">Let us know</a>.</p></div>

Anything wrong with this page? Let us know.

Sidebar and related content (View Code)

    <div class="sidebar" role="complementary">
	<div class="block--guide">
    	<h3 class="block__title">Guide</h3>
    	<ol>
    		<li><a href="#" title="link">Section title</a></li>
    		<li><a href="#" title="link">Section title</a></li>
    		<li><a href="#" title="link">Section title</a></li>
    		<li><a href="#" title="link">Section title</a></li>
    	</ol>
	</div>
	<div class="block">
    	<h3 class="block__title">Related</h3>
    	<ul>
    		<li><a href="#" title="link">Related link</a></li>
    		<li><a href="#" title="link">Related link</a></li>
    		<li><a href="#" title="link">Related link</a></li>
    		<li><a href="#" title="link">Related link</a></li>
    	</ul>
	</div>
	<div class="block">
    	<h3 class="block__title">Documents &amp; policies</h3>
    	<ul>
    		<li><a href="#" title="link">Policy link</a></li>
    		<li><a href="#" title="link">Policy link</a></li>
    		<li><a href="#" title="link">Document link</a></li>
    		<li><a href="#" title="link">Document link</a></li>
    	</ul>
	</div>
</div>