Components

Accordion Jump to Source

The accordion component.

This is a frequently asked question?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien purus, gravida a rhoncus a, varius vel est. Quisque sollicitudin tincidunt felis pellentesque rhoncus.

This is a frequently asked question?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien purus, gravida a rhoncus a, varius vel est. Quisque sollicitudin tincidunt felis pellentesque rhoncus.

This is a frequently asked question?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien purus, gravida a rhoncus a, varius vel est. Quisque sollicitudin tincidunt felis pellentesque rhoncus.

This is a frequently asked question?

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien purus, gravida a rhoncus a, varius vel est. Quisque sollicitudin tincidunt felis pellentesque rhoncus.

Source 

<div class="c-accordion js-accordion" data-accordion-group="">

  <div class="c-accordion__tab js-accordion-tab is-accordion is-open" data-accordion="">
    <div class="c-accordion__control js-accordion-control" data-control="">
      <div class="c-accordion__text">This is a frequently asked question?</div>
    </div>
    <div class="js-accordion-content" data-content="" style="max-height: 100px; overflow: hidden;">
      <p class="c-accordion__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien purus, gravida a rhoncus a, varius vel est. Quisque sollicitudin tincidunt felis pellentesque rhoncus.</p>
    </div>
  </div>

  <div class="c-accordion__tab js-accordion-tab is-accordion" data-accordion="">
    <div class="c-accordion__control js-accordion-control" data-control="">
      <div class="c-accordion__text">This is a frequently asked question?</div>
    </div>
    <div class="js-accordion-content" data-content="" style="max-height: 0px; overflow: hidden;">
      <p class="c-accordion__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien purus, gravida a rhoncus a, varius vel est. Quisque sollicitudin tincidunt felis pellentesque rhoncus.</p>
    </div>
  </div>

  <div class="c-accordion__tab js-accordion-tab is-accordion" data-accordion="">
    <div class="c-accordion__control js-accordion-control" data-control="">
      <div class="c-accordion__text">This is a frequently asked question?</div>
    </div>
    <div class="js-accordion-content" data-content="" style="max-height: 0px; overflow: hidden;">
      <p class="c-accordion__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien purus, gravida a rhoncus a, varius vel est. Quisque sollicitudin tincidunt felis pellentesque rhoncus.</p>
    </div>
  </div>

  <div class="c-accordion__tab js-accordion-tab is-accordion" data-accordion="">
    <div class="c-accordion__control js-accordion-control" data-control="">
      <div class="c-accordion__text">This is a frequently asked question?</div>
    </div>
    <div class="js-accordion-content" data-content="" style="max-height: 0px; overflow: hidden;">
      <p class="c-accordion__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum sapien purus, gravida a rhoncus a, varius vel est. Quisque sollicitudin tincidunt felis pellentesque rhoncus.</p>
    </div>
  </div>

</div>

Block Jump to Source

The block component. Supports slots for media images, two icons, a title, a subtitle, content, and actions.

Block Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo maximus tristique. Nullam et nibh mi. Morbi accumsan lacinia erat, vel dictum est. Pellentesque consectetur gravida lacus a bibendum. Aenean urna lorem, commodo ut est ac, porta semper nunc. Proin in leo vel mauris commodo elementum. Donec diam libero, pellentesque eget placerat quis, mollis at lacus.

Block Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo maximus tristique. Nullam et nibh mi. Morbi accumsan lacinia erat, vel dictum est. Pellentesque consectetur gravida lacus a bibendum. Aenean urna lorem, commodo ut est ac, porta semper nunc. Proin in leo vel mauris commodo elementum. Donec diam libero, pellentesque eget placerat quis, mollis at lacus.

Source 

<div class="l-grid">
  <div class="w-1-2@md">
    <div class="c-block">

      <div class="c-block__media">
        <div class="c-media-image c-media-image--squared u-cover-image u-aspect-ratio-16-10@xs" style="background-image: url('../../img/styleguide/block-example.jpg');"></div>
      </div>

      <div class="c-block__inner">
      
        <div class="c-block__header">  
          <h2 class="c-block__title">
            Block Title
          </h2>    
        </div>
    
        <div class="c-block__content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo maximus tristique. Nullam et nibh mi. Morbi
          accumsan lacinia erat, vel dictum est. Pellentesque consectetur gravida lacus a bibendum. Aenean urna lorem, commodo ut
          est ac, porta semper nunc. Proin in leo vel mauris commodo elementum. Donec diam libero, pellentesque eget placerat
          quis, mollis at lacus.</p>
        
        </div>
    
        <div class="c-block__footer">
    
          <div>
            <a href="#" class="c-btn c-btn--primary c-btn--bordered c-btn--default">
              <span>Block Action</span>
            </a>
          </div>
    
          <div>
            <a href="#" class="c-btn c-btn--primary c-btn--default">
              <span>Block Action</span>
            </a>
          </div>
    
        </div>
    
      </div>
    
    </div>
  </div>

  <div class="w-1-2@md">
    <div class="c-block c-block--padded">
      <div class="c-block__inner u-bg-grey">
      
        <div class="c-block__header">    
          <div class="c-block__icon">
            <span class="c-symbol c-symbol--xl c-symbol--flexible-work"></span>
          </div>    
          <h2 class="c-block__title">
            Block Title
          </h2>    
        </div>
    
        <div class="c-block__content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo maximus tristique. Nullam et nibh mi. Morbi
          accumsan lacinia erat, vel dictum est. Pellentesque consectetur gravida lacus a bibendum. Aenean urna lorem, commodo ut
          est ac, porta semper nunc. Proin in leo vel mauris commodo elementum. Donec diam libero, pellentesque eget placerat
          quis, mollis at lacus.</p>
        
        </div>
    
        <div class="c-block__footer">
    
          <div>
            <a href="#" class="c-btn c-btn--primary c-btn--bordered c-btn--default">
              <span>Block Action</span>
            </a>
          </div>
    
          <div>
            <a href="#" class="c-btn c-btn--primary c-btn--default">
              <span>Block Action</span>
            </a>
          </div>
    
        </div>
    
      </div>
    
    </div>
  </div>
</div>

Breadcrumbs Jump to Source

The breadcrumbs component.

Source 

<div class="c-breadcrumbs">
  <div class="c-breadcrumbs__inner">
    <ul class="c-breadcrumbs__list" itemscope="" itemtype="https://schema.org/BreadcrumbList">
      <li class="c-breadcrumbs__list-item" itemprop="itemListElement" itemscope=""
        itemtype="https://schema.org/ListItem"><a class="c-breadcrumbs__link" href="#" itemprop="item">
          <div class="c-breadcrumbs__label" itemprop="name">Home</div>
        </a></li>
      <li class="c-breadcrumbs__list-item"><span class="c-breadcrumbs__separator"></span></li>
      <li class="c-breadcrumbs__list-item" itemprop="itemListElement" itemscope=""
        itemtype="https://schema.org/ListItem"><a class="c-breadcrumbs__link" href="#" itemprop="item">
          <div class="c-breadcrumbs__label" itemprop="name">Breadcrumb Item</div>
        </a></li>
      <li class="c-breadcrumbs__list-item"><span class="c-breadcrumbs__separator"></span></li>
      <li class="c-breadcrumbs__list-item" itemprop="itemListElement" itemscope=""
        itemtype="https://schema.org/ListItem"><a class="c-breadcrumbs__link" href="#" itemprop="item">
          <div class="c-breadcrumbs__label" itemprop="name">Breadcrumb Item</div>
        </a></li>
    </ul>
  </div>
</div>

Button Jump to Source

Various button shapes and styles.

Default Button

Button

Button Sizes

Tiny Button
Small Button
Normal Button
Large Button
Wide Button

Button Colours

Button
Button
Button
Button
Button
Button
Button
Button
Button

Button Bordered

Button
Button
Button
Button
Button
Button
Button
Button
Button

Button Icon

Button

Button Flat

Button

Multiline Button

Fill Button

Full-width Buttons

Full-width Button Mobile Full-width Button

Disabled Button

Disabled Button
Disabled Button
Disabled Button
Disabled Button
Disabled Button
Disabled Button
Source 

<div class="u-mgn-b-m@xs">

  <h4>Default Button</h4>

  <a href="#" class="c-btn"><span class="c-btn__label">Button</span></a>

</div>

<!-- Button - Size -->
<div class="u-mgn-b-m@xs">

  <h4>Button Sizes</h4>
  <div class="l-grid l-grid--spaced l-grid--align-center">
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--tiny"><span class="c-btn__label">Tiny Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--small"><span class="c-btn__label">Small Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn"><span class="c-btn__label">Normal Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--large"><span class="c-btn__label">Large Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--wide"><span class="c-btn__label">Wide Button</span></a></div>
  </div>

</div>

<!-- Button - Colours -->
<div class="u-mgn-b-m@xs">
  <h4>Button Colours</h4>
  <div class="l-grid l-grid--spaced">
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--primary"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--secondary"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--navy"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--teal"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--blue"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--green"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--purple"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--beige"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs u-bg-black"><a href="#" class="c-btn c-btn--white"><span class="c-btn__label">Button</span></a></div>
  </div>
</div>

<!-- Button - Bordered -->
<div class="u-mgn-b-m@xs">
  <h4>Button Bordered</h4>
  <div class="l-grid l-grid--spaced">
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--primary"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--secondary"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--navy"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--teal"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--blue"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--green"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--purple"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--beige"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs u-bg-black"><a href="#" class="c-btn c-btn--bordered c-btn--white"><span class="c-btn__label">Button</span></a></div>
  </div>
</div>

<!-- Button - Icon -->
<div class="u-mgn-b-m@xs">
  <h4>Button Icon</h4>
  <div class="l-grid l-grid--spaced">
    <div class="w-auto@xs">
      <a href="#" class="c-btn">
        <span class="c-btn__icon">
          <span class="c-symbol c-symbol--phone"></span>
        </span>
        <span class="c-btn__label">Button</span>
        </a>
      </div>
  </div>
</div>

<!-- Button - Flat -->
<div class="u-mgn-b-m@xs">
  <h4>Button Flat</h4>
  <div class="l-grid l-grid--spaced">
    <div class="w-auto@xs">
      <a href="#" class="c-btn c-btn--flat">
        <span class="c-btn__label">Button</span>
        </a>
      </div>
  </div>
</div>

<!-- Button - Multiline -->
<div class="u-mgn-b-m@xs">

  <h4>Multiline Button</h4>

  <div style="max-width:150px;"><a href="#" class="c-btn c-btn--multiline"><span class="c-btn__label">Multiline Button</span></a></div>

</div>

<!-- Button - Fill -->
<div class="u-mgn-b-m@xs">

  <h4>Fill Button</h4>

  <div style="height:300px;"><a href="#" class="c-btn c-btn--fill"><span class="c-btn__label">Fill Button</span></a></div>

</div>

<!-- Button - Full-width -->
<div class="u-mgn-b-m@xs">

  <h4>Full-width Buttons</h4>

  <a href="#" class="c-btn c-btn--full"><span class="c-btn__label">Full-width Button</span></a>
  <a href="#" class="c-btn c-btn--mobile-full"><span class="c-btn__label">Mobile Full-width Button</span></a>

</div>

<!-- Button - Disabled -->
<div class="u-mgn-b-m@xs">

  <h4>Disabled Button</h4>

  <div class="l-grid l-grid--spaced">
    <div class="w-auto@xs"><a href="#" class="c-btn is-disabled"><span class="c-btn__label">Disabled Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--secondary is-disabled"><span class="c-btn__label">Disabled Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--white is-disabled"><span class="c-btn__label">Disabled Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered is-disabled"><span class="c-btn__label">Disabled Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--secondary c-btn--bordered is-disabled"><span class="c-btn__label">Disabled Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--white c-btn--bordered is-disabled"><span class="c-btn__label">Disabled Button</span></a></div>
  </div>

</div>

Card Jump to Source

The card component. Supports slots for media images, two icons, a title, a subtitle, content, and actions.

Tag One
Tag One
5th September 2024
By Author name

Block Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo maximus tristique. Nullam et nibh mi. Morbi accumsan lacinia erat, vel dictum est. Pellentesque consectetur gravida lacus a bibendum. Aenean urna lorem, commodo ut est ac, porta semper nunc. Proin in leo vel mauris commodo elementum. Donec diam libero, pellentesque eget placerat quis, mollis at lacus.

Read more
Tag One
Tag One
Wed, 5th September 2024
10:00 AM
Microsoft Teams
Free

Block Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo maximus tristique. Nullam et nibh mi. Morbi accumsan lacinia erat, vel dictum est. Pellentesque consectetur gravida lacus a bibendum. Aenean urna lorem, commodo ut est ac, porta semper nunc. Proin in leo vel mauris commodo elementum. Donec diam libero, pellentesque eget placerat quis, mollis at lacus.

Read more
Source 

<div class="l-grid l-grid--spaced">
  <div class="w-1-2@md">
    <a href="#" class="c-card c-card--fill">

      <div class="c-card__wrapper">

        <div class="c-card__media">
          <div class="c-media-image c-media-image--squared u-cover-image u-aspect-ratio-5-3@xs" style="background-image: url('../../img/styleguide/block-example.jpg');"></div>
        </div>
  
        <div class="c-card__inner">
  
          <div class="c-card__chips">
            <div class="c-card__chip">
              <div class="c-chip c-chip--light-blue">Tag One</div>
            </div>
            <div class="c-card__chip">
              <div class="c-chip c-chip--light-green">Tag One</div>
            </div>
          </div>
  
          <div class="c-card__meta">
            <div class="c-card__meta-item">5th September 2024</div>
            <div class="c-card__meta-item">By Author name</div>
          </div>
        
          <div class="c-card__header">  
            <h2 class="c-card__title">
              Block Title
            </h2>    
          </div>
      
          <div class="c-card__content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo maximus tristique. Nullam et nibh mi. Morbi
            accumsan lacinia erat, vel dictum est. Pellentesque consectetur gravida lacus a bibendum. Aenean urna lorem, commodo ut
            est ac, porta semper nunc. Proin in leo vel mauris commodo elementum. Donec diam libero, pellentesque eget placerat
            quis, mollis at lacus.</p>
          
          </div>
      
          <div class="c-card__footer">
      
            <div class="c-card__action">
              <div class="c-btn c-btn--bordered c-btn--wide">Read more</div>
            </div>
      
          </div>
      
        </div>
      </div>
    
    </a>
  </div>
  <div class="w-1-2@md">
    <div class="c-card c-card--fill c-card--shadowed">

      <div class="c-card__wrapper">
        <div class="c-card__media">
          <div class="c-media-image c-media-image--squared u-cover-image u-aspect-ratio-5-3@xs" style="background-image: url('../../img/styleguide/block-example.jpg');"></div>
        </div>
  
        <div class="c-card__inner">

           <div class="c-card__chips">
            <div class="c-card__chip">
              <div class="c-chip c-chip--light-blue">Tag One</div>
            </div>
            <div class="c-card__chip">
              <div class="c-chip c-chip--light-green">Tag One</div>
            </div>
          </div>

          <div class="c-card__meta">
            <div class="c-card__meta-item">Wed, 5th September 2024</div>
            <div class="c-card__meta-item">10:00 AM</div>
            <div class="c-card__meta-item">Microsoft Teams</div>
            <div class="c-card__meta-item">Free</div>
          </div>
        
          <div class="c-card__header">             

            <h2 class="c-card__title">
              Block Title
            </h2>    
          </div>
      
          <div class="c-card__content">
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo maximus tristique. Nullam et nibh mi. Morbi
            accumsan lacinia erat, vel dictum est. Pellentesque consectetur gravida lacus a bibendum. Aenean urna lorem, commodo ut
            est ac, porta semper nunc. Proin in leo vel mauris commodo elementum. Donec diam libero, pellentesque eget placerat
            quis, mollis at lacus.</p>
          
          </div>
      
          <div class="c-card__footer">
      
            <div class="c-card__action">
              <div class="c-btn c-btn--bordered c-btn--full">Read more</div>
            </div>
      
          </div>
      
        </div>
      </div>
    
    </div>
  </div>
</div>

Chip Jump to Source

Various chip shapes and styles.

Chip text
Chip text
Chip text
Source 

<div class="c-chip c-chip--light-blue"><span class="c-chip__label">Chip text</span></div>
<div class="c-chip c-chip--light-green"><span class="c-chip__label">Chip text</span></div>
<div class="c-chip c-chip--teal c-chip--remove"><span class="c-chip__label">Chip text</span></div>

Divider Jump to Source

Source 

<div class="c-divider u-bg-shamrock"></div>

Filter Jump to Source

Filter Styles e.g. news categories.

Form Jump to Source

Various form shapes and styles.

Inputs

Oh no, an error!
Source 

<div class="u-mgn-b-m@xs">

  <h4>Inputs</h4>

  <div class="u-pad-h-m@xs u-pad-v-m@xs">

    <form class="c-form">

        <div class="u-mgn-b-s@xs">
            <label>Short text:</label>
            <input type="text" placeholder="This is an example">
        </div>

        <div class="u-mgn-b-s@xs">
            <label>Disabled:</label>
            <input disabled type="text" placeholder="This is an example">
        </div>

        <div class="u-mgn-b-s@xs">
            <label>Password:</label>
            <input type="password" placeholder="Password">
        </div>

        <div class="u-mgn-b-s@xs">
            <label>Time:</label>
            <input type="time">
        </div>

        <div class="u-mgn-b-s@xs">
            <label>Number:</label>
            <input type="number">
        </div>

        <div class="u-mgn-b-s@xs">
            <label>Long text:</label>
            <textarea rows="3" placeholder="Type you message here..."></textarea>
        </div>

        <div class="u-mgn-b-s@xs">
            <label>Radio buttons:</label>
            <div class="radio">
                <input type="radio" id="radio-1-" name="radio">
                <label for="radio-1-">Option 1</label>
            </div>

            <div class="radio">
                <input type="radio" id="radio-2-" name="radio">
                <label for="radio-2-">Option 2</label>
            </div>

        </div>

        <div class="u-mgn-b-s@xs">
            <label>Checkboxes:</label>
            <div>
                <div class="checkbox">
                    <input type="checkbox" id="checkbox-1-" name="checkbox-1-">
                    <label for="checkbox-1-">Checkbox</label>
                </div>
            </div>
        </div>

        <div class="u-mgn-b-s@xs">
            <label>Drop down:</label>
            <select>
                <option>- Select -</option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
            </select>
        </div>

        <div class="u-mgn-b-s@xs">
            <div class="has-error">
                <label>Error:</label>
                <div>
                    <div><input type="text" placeholder="Text" aria-invalid="true" class="is-error"></div>
                    <div class="validation_message"><span class="is-error">Oh no, an error!</span></div>
                </div>
            </div>
            

        </div>


    </form>

  </div>

</div>

Form Jump to Source

Various form shapes and styles.

Inputs

Oh no, an error!
Source 

<div class="u-mgn-b-m@xs">

  <h4>Inputs</h4>

  <div class="u-pad-h-m@xs u-pad-v-m@xs">

    <form class="c-form">

        <div class="u-mgn-b-s@xs">
            <label>Short text:</label>
            <input type="text" placeholder="This is an example">
        </div>

        <div class="u-mgn-b-s@xs">
            <label>Disabled:</label>
            <input disabled type="text" placeholder="This is an example">
        </div>

        <div class="u-mgn-b-s@xs">
            <label>Password:</label>
            <input type="password" placeholder="Password">
        </div>

        <div class="u-mgn-b-s@xs">
            <label>Time:</label>
            <input type="time">
        </div>

        <div class="u-mgn-b-s@xs">
            <label>Number:</label>
            <input type="number">
        </div>

        <div class="u-mgn-b-s@xs">
            <label>Long text:</label>
            <textarea rows="3" placeholder="Type you message here..."></textarea>
        </div>

        <div class="u-mgn-b-s@xs">
            <label>Radio buttons:</label>
            <div class="radio">
                <input type="radio" id="radio-1-" name="radio">
                <label for="radio-1-">Option 1</label>
            </div>

            <div class="radio">
                <input type="radio" id="radio-2-" name="radio">
                <label for="radio-2-">Option 2</label>
            </div>

        </div>

        <div class="u-mgn-b-s@xs">
            <label>Checkboxes:</label>
            <div>
                <div class="checkbox">
                    <input type="checkbox" id="checkbox-1-" name="checkbox-1-">
                    <label for="checkbox-1-">Checkbox</label>
                </div>
            </div>
        </div>

        <div class="u-mgn-b-s@xs">
            <label>Drop down:</label>
            <select>
                <option>- Select -</option>
                <option>Option 1</option>
                <option>Option 2</option>
                <option>Option 3</option>
                <option>Option 4</option>
            </select>
        </div>

        <div class="u-mgn-b-s@xs">
            <div class="has-error">
                <label>Error:</label>
                <div>
                    <div><input type="text" placeholder="Text" aria-invalid="true" class="is-error"></div>
                    <div class="validation_message"><span class="is-error">Oh no, an error!</span></div>
                </div>
            </div>
            

        </div>


    </form>

  </div>

</div>

Hero Jump to Source

Various Hero styles.

Chip
5th Sep 2024
By Author name

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet similique unde dolores odio culpa a consequatur sed quo sint, consequuntur sit, laudantium cupiditate voluptate voluptatum dolor mollitia officiis et dignissimos!
Find out more
Chip
5th Sep 2024
By Author name

Lorem ipsum

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet similique unde dolores odio culpa a consequatur sed quo sint, consequuntur sit, laudantium cupiditate voluptate voluptatum dolor mollitia officiis et dignissimos!
Find out more
Source 

<div class="l-grid l-grid--spaced">
    <div class="w-1-1@xs">
        <div class="c-hero c-hero--teal">
            <div class="c-hero__overlay"></div>
            <div class="c-hero__ribbon"></div>
        
            <div class="c-hero__inner">
                <div class="c-hero__grid l-grid l-grid--spaced l-grid--justify-space-between">
        
                    <div class="w-1-1@xs w-1-2@md">
                        <div class="c-hero__content">
                
                                <div class="c-hero__chips">
          
                                        <div class="c-hero__chip">
                                            <div class="c-chip c-chip--light-blue">Chip</div>
                                        </div>
        
                                </div>
        
                                <div class="c-hero__meta">
                                        <div class="c-hero__meta-item">
                                            <div>5th Sep 2024</div>
                                        </div>
                                        <div class="c-hero__meta-item">
                                            <div>By Author name</div>
                                        </div>
                                </div>
        
        
                                <h1 class="c-hero__title">Lorem ipsum</h1>
                                
        
                                <div class="c-hero__subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet similique unde dolores odio culpa a consequatur sed quo sint, consequuntur sit, laudantium cupiditate voluptate voluptatum dolor mollitia officiis et dignissimos!</div>
                
                                <div class="c-hero__action">
                                    <a href="#" title="Find out more" class="c-btn  c-btn--mobilefull">
                                        <span class="c-btn__label">Find out more</span>
                                    </a>
                                </div>
                
                        </div>
                    </div>
        
                    <div class="w-1-1@xs w-1-2@md w-2-5@lg">
                            <div class="c-hero__media">
                                <div class="c-media-image">
                                    <div class="u-cover-image u-aspect-ratio-5-7@xs" style="background-image: url('../../img/styleguide/block-example.jpg');"></div>
                                </div>
                            </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
    
    <div class="w-1-1@xs">
        <div class="c-hero c-hero--dark">
            <div class="c-hero__overlay"></div>
            <div class="c-hero__ribbon"></div>
        
            <div class="c-hero__inner">
                <div class="c-hero__grid l-grid l-grid--spaced l-grid--justify-space-between">
        
                    <div class="w-1-1@xs w-1-2@md">
                        <div class="c-hero__content">
                
                                <div class="c-hero__chips">
          
                                        <div class="c-hero__chip">
                                            <div class="c-chip c-chip--light-blue">Chip</div>
                                        </div>
        
                                </div>
        
                                <div class="c-hero__meta">
                                        <div class="c-hero__meta-item">
                                            <div>5th Sep 2024</div>
                                        </div>
                                        <div class="c-hero__meta-item">
                                            <div>By Author name</div>
                                        </div>
                                </div>
        
        
                                <h1 class="c-hero__title">Lorem ipsum</h1>
                                
        
                                <div class="c-hero__subtitle">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eveniet similique unde dolores odio culpa a consequatur sed quo sint, consequuntur sit, laudantium cupiditate voluptate voluptatum dolor mollitia officiis et dignissimos!</div>
                
                                <div class="c-hero__action">
                                    <a href="#" title="Find out more" class="c-btn  c-btn--mobilefull">
                                        <span class="c-btn__label">Find out more</span>
                                    </a>
                                </div>
                
                        </div>
                    </div>
        
                    <div class="w-1-1@xs w-1-2@md w-2-5@lg">
                            <div class="c-hero__media">
                                <div class="c-media-image">
                                    <div class="u-cover-image u-aspect-ratio-5-7@xs" style="background-image: url('../../img/styleguide/block-example.jpg');"></div>
                                </div>
                            </div>
                    </div>
                    
                </div>
            </div>
        </div>
    </div>
</div>

Job Card Jump to Source

Various Job Card styles.

Health and Wellbeing Coach - Frimley

Are you an Exercise and Nutrition professional looking for a flexible working opportunity? We are looking for a passionate individual to help us make a difference and join us as a Health & Wellbeing C...

n/a

n/a

View job

Health and Wellbeing Coach - Frimley

Are you an Exercise and Nutrition professional looking for a flexible working opportunity? We are looking for a passionate individual to help us make a difference and join us as a Health & Wellbeing C...

n/a

n/a

View job
Source 
<div class="c-job-card">
  <div class="c-job-card__inner">
    <div class="c-job-card__content">
      <h2 class="c-job-card__title">Health and Wellbeing Coach - Frimley</h2>
      <div class="c-job-card__body-text">Are you an Exercise and Nutrition professional looking for a flexible working opportunity? We are looking for a passionate individual to help us make a difference and join us as a Health & Wellbeing C...</div>
    </div>
    <div class="c-job-card__meta">
      <div class="c-job-card__meta-info">
          <div class="c-job-card__meta-item">
            <span class="c-symbol c-symbol--xl c-symbol--flag"></span>
            <p class="c-job-card__meta-text">n/a</p>
          </div>
          <div class="c-job-card__meta-item">
            <span class="c-symbol c-symbol--xl c-symbol--group"></span> 
            <p class="c-job-card__meta-text">n/a</p>
          </div>
      </div>
      <div class="c-job-card__action">
        <a href="#" class="c-btn c-btn--white c-btn--full">
          <span>View job</span>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="c-list-jobs is-grid">
  <div class="c-job-card">
    <div class="c-job-card__inner">
      <div class="c-job-card__content">
        <h2 class="c-job-card__title">Health and Wellbeing Coach - Frimley</h2>
        <div class="c-job-card__body-text">Are you an Exercise and Nutrition professional looking for a flexible working opportunity? We are looking for a passionate individual to help us make a difference and join us as a Health & Wellbeing C...</div>
      </div>
      <div class="c-job-card__meta">
        <div class="c-job-card__meta-info">
            <div class="c-job-card__meta-item">
              <span class="c-symbol c-symbol--xl c-symbol--flag"></span>
              <p class="c-job-card__meta-text">n/a</p>
            </div>
            <div class="c-job-card__meta-item">
              <span class="c-symbol c-symbol--xl c-symbol--group"></span> 
              <p class="c-job-card__meta-text">n/a</p>
            </div>
        </div>
        <div class="c-job-card__action">
          <a href="#" class="c-btn c-btn--white c-btn--full">
            <span>View job</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

Job Details Jump to Source

Various Job Details styles.

Job Details

Location

Job Type

Your consultant
John Doe

01992305604

Apply for this role
Source 
<div class="c-job-details">
  <div class="c-job-details__inner">
    <div class="c-job-details__body">
      <div class="c-job-details__body-inner">
        <h2>Job Details</h2>

        <div class="c-job-details__meta">
          <div class="c-job-details__meta-item">
            <p><span class="c-symbol c-symbol--flag u-mgn-r-xs@xs"></span> Location</p>
          </div>
          <div class="c-job-details__meta-item">
            <p><span class="c-symbol c-symbol--group u-mgn-r-xs@xs"></span> Job Type</p>
          </div>
        </div>
      </div>
      </div>
    </div>
    
  <div class="c-job-details__footer">
    <div class="c-job-details__consultant-heading">Your consultant</div>
    <div class="c-job-details__consultant-text">John Doe</div>
    <p class="c-job-details__consultant-contact"><span class="c-symbol c-symbol--phone u-mgn-r-xs@xs"></span><a href="#" class="c-job-details__consultant-phone">01992305604</a></p>
    <div class="c-job-details__action">
      <a href="#" class="c-btn">Apply for this role</a>
    </div>
  </div>
</div>

Jobs Search Jump to Source

Job search bar.

Source 
<div style="display: flex;">
    <div class="c-jobs-search">
    
        <div class="c-jobs-search__inner">
            
            <form method="get" id="jobs-search" class="c-jobs-search__form">

                <div class="c-jobs-search__input">
                    <span class="c-symbol c-symbol--xl c-symbol--group t-color-navy"></span>
                    <select name="" id="" class="c-jobs-search__select">

                        <option class="t-color-shuttle" value="">Occupation</option>
                        <option value="1">1</option>
                        <option value="2">2</option>

                    </select>
                </div>

                <div class="c-jobs-search__input">
                    <span class="c-symbol c-symbol--xl c-symbol--search t-color-navy"></span>
                    <input class="c-jobs-search__keyword" type="search" placeholder="Search by keyword or role">
                </div>
    
                <div class="c-jobs-search__input">
                    <span class="c-symbol c-symbol--xl c-symbol--flag t-color-navy"></span>
                    <input class="c-jobs-search__location" type="search" placeholder="Search by country">
                </div>

                <div class="c-jobs-search__search">
    
                    <button type="submit" form="jobs-search" value="Submit" class="c-btn c-btn--full">
                        Search
                    </button>
        
                </div>   
            </form>
            
    
        </div>
    
    </div>
</div>

Message Jump to Source

Generic styling for messages.

.c-message

Default Appearance.
Success message here
Warning message here
Error message here
Source 

<div class="u-mgn-v-s@xs">
    <div class="c-message c-message--success">
        <span class="c-symbol c-symbol--tick"></span>Success message here
    </div>
</div>

<div class="u-mgn-v-s@xs">
    <div class="c-message c-message--warning">
        <span class="c-symbol c-symbol--cross"></span>Warning message here
    </div>
</div>

<div class="u-mgn-v-s@xs">
    <div class="c-message c-message--error">
        <span class="c-symbol c-symbol--cross"></span>Error message here
    </div>
</div>

Pay Rate Jump to Source

Various Pay Rate shapes and styles.

Shift
Total hourly pay
Day
Mon - Fri | 8am - 8pm
£39.11
Night
Mon - Thurs | 8am - 8pm
Fri | 8am - 9pm
£139.11
Source 

<div class="c-pay-rate">
    <div class="c-pay-rate__headers u-bg-teal">
        <div class="c-pay-rate__column"><strong>Shift</strong></div>
        <div class="c-pay-rate__column"><strong>Total hourly pay</strong></div>
    </div>
    <div class="c-pay-rate__body">
        <div class="c-pay-rate__row">
            <div class="c-pay-rate__column">
                <div><strong>Day</strong></div>
                <div>Mon - Fri | 8am - 8pm</div>
            </div>
            <div class="c-pay-rate__column">
                <div>£39.11</div>
            </div>
        </div>
        <div class="c-pay-rate__row">
            <div class="c-pay-rate__column">
                <div><strong>Night</strong></div>
                <div>Mon - Thurs | 8am - 8pm</div>
                <div>Fri | 8am - 9pm</div>
            </div>
            <div class="c-pay-rate__column">
                <div>£139.11</div>
            </div>
        </div>
    </div>
</div>

Symbols Jump to Source

Global iconography.

Font Icons

Source 

<div style="font-size: 64px;">

  <div class="u-mgn-b-m@xs">
      <h4>Font Icons</h4>
      <span class="c-symbol c-symbol--filter"></span>
      <span class="c-symbol c-symbol--list"></span>
      <span class="c-symbol c-symbol--timer"></span>
      <span class="c-symbol c-symbol--pin"></span>
      <span class="c-symbol c-symbol--edit"></span>
      <span class="c-symbol c-symbol--facebook"></span>
      <span class="c-symbol c-symbol--linkedin"></span>
      <span class="c-symbol c-symbol--instagram"></span>
      <span class="c-symbol c-symbol--twitter"></span>
      <span class="c-symbol c-symbol--link"></span>
      <span class="c-symbol c-symbol--share"></span>
      <span class="c-symbol c-symbol--phone"></span>
      <span class="c-symbol c-symbol--chevron-left"></span>
      <span class="c-symbol c-symbol--chevron-right"></span>
      <span class="c-symbol c-symbol--chevron-down"></span>
      <span class="c-symbol c-symbol--chevron-up"></span>
      <span class="c-symbol c-symbol--money"></span>
      <span class="c-symbol c-symbol--tick"></span>
      <span class="c-symbol c-symbol--close"></span>
      <span class="c-symbol c-symbol--wallet"></span>
      <span class="c-symbol c-symbol--error"></span>
      <span class="c-symbol c-symbol--speech"></span>
      <span class="c-symbol c-symbol--24-hr-clock"></span>
      <span class="c-symbol c-symbol--24-hr-phone"></span>
      <span class="c-symbol c-symbol--certified"></span>
      <span class="c-symbol c-symbol--chat"></span>
      <span class="c-symbol c-symbol--dependable"></span>
      <span class="c-symbol c-symbol--document"></span>
      <span class="c-symbol c-symbol--document-heart"></span>
      <span class="c-symbol c-symbol--email"></span>
      <span class="c-symbol c-symbol--envelope"></span>
      <span class="c-symbol c-symbol--expertise"></span>
      <span class="c-symbol c-symbol--group"></span>
      <span class="c-symbol c-symbol--group-heart"></span>
      <span class="c-symbol c-symbol--hand-cog"></span>
      <span class="c-symbol c-symbol--handshake"></span>
      <span class="c-symbol c-symbol--home-heart"></span>
      <span class="c-symbol c-symbol--journey"></span>
      <span class="c-symbol c-symbol--location"></span>
      <span class="c-symbol c-symbol--passion"></span>
      <span class="c-symbol c-symbol--people-heart"></span>
      <span class="c-symbol c-symbol--phone-call"></span>
      <span class="c-symbol c-symbol--puzzle"></span>
      <span class="c-symbol c-symbol--stopwatch"></span>
  </div>

</div>

Team member Jump to Source

Various Team Member shapes and styles.

Full name

Position

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo maximus tristique. Nullam et nibh mi. Morbi accumsan lacinia erat, vel dictum est. Pellentesque consectetur gravida lacus a bibendum. Aenean urna lorem, commodo ut est ac, porta semper nunc. Proin in leo vel mauris commodo elementum. Donec diam libero, pellentesque eget placerat quis, mollis at lacus.

Read more about Name
Source 

<div class="w-1-3@md">

    <div class="c-team-member">
    
      <div class="c-team-member__media">
        <div class="c-media-image c-media-image--squared u-cover-image u-aspect-ratio-5-4@xs" style="background-image: url('../../img/styleguide/block-example.jpg');"></div>
      </div>
    
      <div class="c-team-member__inner">
      
        <h2 class="c-team-member__title">
            Full name
        </h2>

        <div class="c-team-member__subtitle">
            Position
        </div>
    
        <div class="c-team-member__content">
          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo maximus tristique. Nullam et nibh mi. Morbi
          accumsan lacinia erat, vel dictum est. Pellentesque consectetur gravida lacus a bibendum. Aenean urna lorem, commodo ut
          est ac, porta semper nunc. Proin in leo vel mauris commodo elementum. Donec diam libero, pellentesque eget placerat
          quis, mollis at lacus.</p>
        
        </div>

        <div class="c-team-member__footer">
            <div class="c-team-member__action c-btn c-btn--bordered">Read more about Name</div>
            <a href="#" class="c-team-member__linkedin"><span class="c-symbol c-symbol--linkedin"></span></a>
        </div>
    
      </div>
    
    </div>

</div>

Testimonial Jump to Source

Various Testimonial shapes and styles.

Lorem ipsum dolor sit amet consectetur. Tempus ut nisi malesuada nec magna viverra vel urna mattis. Mauris tellus rhoncus porttitor quisque. Dui odio nibh auctor eget risus. Ac tellus tincidunt amet ut!
- James, London
Source 

<div class="c-testimonial">
    <div class="c-testimonial__inner">
        <div class="c-testimonial__media">
            <div class="c-media-image c-media-image--squared u-cover-image u-aspect-ratio-4-3@xs" style="background-image: url('../../img/styleguide/block-example.jpg');"></div>
        </div>
        <div class="c-testimonial__content">
            <div class="c-testimonial__text">Lorem ipsum dolor sit amet consectetur. Tempus ut nisi malesuada nec magna viverra vel urna mattis. Mauris tellus rhoncus porttitor quisque. Dui odio nibh auctor eget risus. Ac tellus tincidunt amet ut!</div>
            <div class="c-testimonial__author">- James, London</div>
        </div>
    </div>

</div>
Page Generated: Wed, Aug 6, 2025 at 9:34:34 AM