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

Button Colours

Button
Button
Button

Button Bordered

Button
Button
Button

Button Icon

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>

</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 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"><span class="c-btn__label">Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--secondary c-btn--bordered"><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 c-btn--bordered"><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--external"></span>
        </span>
        <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
Sep 13, 2023
19:00-23:00 (GMT)
Virtual
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

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

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

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--teal c-card--ribbon c-card--fill" data-ribbon-style="events">

      <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 class="c-card__media-overlay"></div>
          <div class="c-card__media-ribbon"></div>
        </div>
  
        <div class="c-card__inner">
  
          <div class="c-card__chips">
            <div class="c-card__chip">
              <div class="c-chip c-chip--lemon is-active">Tag One</div>
            </div>
            <div class="c-card__chip">
              <div class="c-chip c-chip--lemon is-active">Tag One</div>
            </div>
          </div>
  
          <div class="c-card__meta">
            <div class="c-card__meta-item">Sep 13, 2023</div>
            <div class="c-card__meta-item">19:00-23:00 (GMT)</div>
            <div class="c-card__meta-item">Virtual</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">
              <span>Read more</span>
            </div>
      
          </div>
      
        </div>
      </div>
    
    </a>
  </div>
  <div class="w-1-2@md">
    <div class="c-card c-card--teal c-card--ribbon c-card--fill" data-ribbon-style="events">

      <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 class="c-card__media-overlay"></div>
          <div class="c-card__media-ribbon"></div>
        </div>
  
        <div class="c-card__inner">
        
          <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">
              <span>Read more</span>
            </div>
      
          </div>
      
        </div>
      </div>
    
    </div>
  </div>
  <div class="w-1-2@md">
    <div class="c-card c-card--dark c-card--pistachio c-card--ribbon is-odd" data-ribbon-style="news">

      <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 class="c-card__media-overlay"></div>
          <div class="c-card__media-ribbon"></div>
        </div>
  
        <div class="c-card__inner">
        
          <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">
              <span>Read more</span>
            </div>
  
          </div>
      
        </div>
      </div>
    
    </div>
  </div>

  <div class="w-1-2@md">
    <div class="c-card c-card--dark c-card--pistachio c-card--ribbon" data-ribbon-style="news">

      <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 class="c-card__media-overlay"></div>
          <div class="c-card__media-ribbon"></div>
        </div>
  
        <div class="c-card__inner">
        
          <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">
              <span>Read more</span>
            </div>
      
          </div>
      
        </div>
      </div>
    
    </div>
  </div>
</div>

Case Study Jump to Source

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

Tag One
Published 14 April 2024

How John found his dream role as a nurse in the USA

Lorem ipsum dolor sit amet consectetur. Ipsum orci posuere at sagittis. Ultrices dui in ac vitae odio semper pellentesque. Sit penatibus lectus vivamus adipiscing est augue.

Read more
Tag One
Published 14 April 2024

How John found his dream role as a nurse in the USA

Lorem ipsum dolor sit amet consectetur. Ipsum orci posuere at sagittis. Ultrices dui in ac vitae odio semper pellentesque. Sit penatibus lectus vivamus adipiscing est augue.

Read more
Source 

<div class="l-grid">
  <div class="w-1-2@md">
    <a href="#" class="c-case-study">
      <div class="c-case-study__inner">
        <div class="c-case-study__meta">
          <div class="c-case-study__chips">
            <div class="c-case-study__chip">
              <div class="c-chip c-chip--lemon is-active">Tag One</div>
            </div>
          </div>
          <div class="c-case-study__date">Published 14 April 2024</div>
        </div>
    
        <h2 class="c-case-study__title">
          How John found his dream role as a nurse in the USA
        </h2>
    
        <div class="c-case-study__content">
          <p>Lorem ipsum dolor sit amet consectetur. Ipsum orci posuere at sagittis. Ultrices dui in ac vitae odio semper pellentesque. Sit penatibus lectus vivamus adipiscing est augue.</p>
        </div>
    
        <div class="c-case-study__footer">    
          <div class="c-case-study__action">Read more</div>    
        </div>
    
      </div>   
    </a> 
  </div>  
  <div class="w-1-2@md">
    <a href="#" class="c-case-study c-case-study--lemon">
      <div class="c-case-study__inner">
        <div class="c-case-study__meta">
          <div class="c-case-study__chips">
            <div class="c-case-study__chip">
              <div class="c-chip c-chip--lemon is-active">Tag One</div>
            </div>
          </div>
          <div class="c-case-study__date">Published 14 April 2024</div>
        </div>
    
        <h2 class="c-case-study__title">
          How John found his dream role as a nurse in the USA
        </h2>
    
        <div class="c-case-study__content">
          <p>Lorem ipsum dolor sit amet consectetur. Ipsum orci posuere at sagittis. Ultrices dui in ac vitae odio semper pellentesque. Sit penatibus lectus vivamus adipiscing est augue.</p>
        </div>
    
        <div class="c-case-study__footer">    
          <div class="c-case-study__action">Read more</div>    
        </div>
    
      </div>   
    </a> 
  </div>  
</div>

Chip Jump to Source

Various chip shapes and styles.

Chip text
Chip text
Chip text
Source 

<div class="c-chip c-chip--primary"><span class="c-chip__label">Chip text</span></div>
<div class="c-chip c-chip--primary is-active"><span class="c-chip__label">Chip text</span></div>

<div class="c-chip c-chip--primary c-chip--remove"><span class="c-chip__label">Chip text</span></div>

Companion Jump to Source

Companion styles.

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae lacus euismod lacus rutrum semper. In aliquet, felis at semper porttitor, lectus magna laoreet sapien, a elementum risus nulla quis velit. Integer dictum a metus commodo porttitor. Fusce eget orci neque. Morbi eu lorem non mauris aliquam euismod. Integer sodales arc

Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae lacus euismod lacus rutrum semper. In aliquet, felis at semper porttitor, lectus magna laoreet sapien, a elementum risus nulla quis velit. Integer dictum a metus commodo porttitor. Fusce eget orci neque. Morbi eu lorem non mauris aliquam euismod. Integer sodales arc

Source 

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

        <div class="c-companion__inner">

            <div class="c-companion__content">
            <div class="c-companion__content-inner u-bg-primary">
                <div class="c-companion__content-wrap">
                <h3>Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae lacus euismod lacus rutrum semper. In
                    aliquet, felis at semper porttitor, lectus magna laoreet sapien, a elementum risus nulla quis velit. Integer dictum a
                    metus commodo porttitor. Fusce eget orci neque. Morbi eu lorem non mauris aliquam euismod. Integer sodales arc</p>
                </div>
            </div>
            </div>

            <div class="c-companion__media">
            <div class="c-companion__media-inner">
                <div class="c-companion__media-placeholder"></div>
            </div>
            </div>

        </div>

        </div>
</div>

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

        <div class="c-companion__inner">

            <div class="c-companion__content">
            <div class="c-companion__content-inner u-bg-primary">
                <div class="c-companion__content-wrap">
                <h3>Lorem ipsum dolor sit amet</h3>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum vitae lacus euismod lacus rutrum semper. In
                    aliquet, felis at semper porttitor, lectus magna laoreet sapien, a elementum risus nulla quis velit. Integer dictum a
                    metus commodo porttitor. Fusce eget orci neque. Morbi eu lorem non mauris aliquam euismod. Integer sodales arc</p>
                </div>
            </div>
            </div>

            <div class="c-companion__media">
            <div class="c-companion__media-inner">
                <div class="c-companion__media-placeholder"></div>
            </div>
            </div>

        </div>

        </div>
</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.

Make the move to our international healthcare jobs

Lorem ipsum dolor sit amet consectetur. Ipsum orci posuere at sagittis. Ultrices dui in ac vitae odio semper pellentesque. Sit penatibus lectus vivamus adipiscing est augue. Ut quam facilisis lectus elementum magna semper.
Search jobs

Make the move to our international healthcare jobs

Lorem ipsum dolor sit amet consectetur. Ipsum orci posuere at sagittis. Ultrices dui in ac vitae odio semper pellentesque. Sit penatibus lectus vivamus adipiscing est augue. Ut quam facilisis lectus elementum magna semper.
Search jobs
Source 

<div class="c-hero c-hero--pistachio c-hero--home">
    <div class="c-hero__media">
        <div class="c-hero__background">
            <div class="c-media-image c-media-image--squared">
                <div class="u-cover-image u-aspect-ratio-1-1@xs" style="background-image: url('../../img/styleguide/block-example.jpg');"></div>
            </div>
        </div>
        <div class="c-hero__media-overlay"></div>
        <div class="c-hero__media-ribbon"></div>
        <div class="c-hero__foreground">
            
                <div class="c-media-image c-media-image--squared">
                    <div class="u-contain-image u-aspect-ratio-1-1@xs u-bg-anchor-right-bottom" style="background-image: url('../../img/styleguide/hero-foreground-example-cropped.png');"></div>
                </div>
        </div>
    </div>    

    <div class="c-hero__inner">
        <div class="c-hero__content">
            <h1 class="c-hero__title">Make the move to our international healthcare jobs</h1>
            <div class="c-hero__subtitle">Lorem ipsum dolor sit amet consectetur. Ipsum orci posuere at sagittis. Ultrices dui in ac vitae odio semper pellentesque. Sit penatibus lectus vivamus adipiscing est augue. Ut quam facilisis lectus elementum magna semper.</div>
            <div class="c-hero__action">
                <a href="#" class="c-btn"><span>Search jobs</span></a>
            </div>
        </div>
    </div>

</div>

<div class="u-pad-v-xl@xs"></div>

<div class="c-hero c-hero--indigo">
    <div class="c-hero__media">
        <div class="c-hero__background">
            <div class="c-media-image c-media-image--squared">
                <div class="u-cover-image u-aspect-ratio-1-1@xs" style="background-image: url('../../img/styleguide/block-example.jpg');"></div>
            </div>
        </div>
        <div class="c-hero__media-overlay"></div>
        <div class="c-hero__media-ribbon"></div>
        <div class="c-hero__foreground">
            
                <div class="c-media-image c-media-image--squared">
                    <div class="u-contain-image u-aspect-ratio-1-1@xs u-bg-anchor-right-bottom" style="background-image: url('../../img/styleguide/hero-foreground-example-cropped.png');"></div>
                </div>
        </div>
    </div>    

    <div class="c-hero__inner">
        <div class="c-hero__content">
            <h1 class="c-hero__title">Make the move to our international healthcare jobs</h1>
            <div class="c-hero__subtitle">Lorem ipsum dolor sit amet consectetur. Ipsum orci posuere at sagittis. Ultrices dui in ac vitae odio semper pellentesque. Sit penatibus lectus vivamus adipiscing est augue. Ut quam facilisis lectus elementum magna semper.</div>
            <div class="c-hero__action">
                <a href="#" class="c-btn"><span>Search jobs</span></a>
            </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>

Quote Jump to Source

Various Quote styles.

“Lorem ipsum dolor sit amet consectetur. Ipsum orci posuere at sagittis. Ultrices dui in ac vitae odio semper pellentesque. Sit penatibus lectus vivamus adipiscing est augue.”

- Name, Job role
View all our testimonials
Source 

<div class="c-quote c-quote--gold u-bg-navy">
        <div class="c-quote__media">
            <div class="c-media-image c-media-image--squared">
                <div class="u-cover-image u-aspect-ratio-16-10@xs" style="background-image: url('../../img/styleguide/block-example.jpg');"></div>
            </div> 
            <div class="c-quote__media-overlay u-bg-navy"></div>
            <div class="c-quote__media-ribbon"></div>           
        </div>
        <div class="c-quote__inner">
            <div class="c-quote__content">
                <div class="c-quote__content-inner">
                    <h4>“Lorem ipsum dolor sit amet consectetur. Ipsum orci posuere at sagittis. Ultrices dui in ac vitae odio semper pellentesque. Sit penatibus lectus vivamus adipiscing est augue.”</h4>
                    <strong>- Name, Job role</strong>
                    <div class="c-quote__action">
                        <a href="#" class="c-btn c-btn--malibu c-btn--mobilefull"><span>View all our testimonials</span></a>
                    </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--welcome-pack"></span>
      <span class="c-symbol c-symbol--viewpoint"></span>
      <span class="c-symbol c-symbol--awards"></span>
      <span class="c-symbol c-symbol--payroll"></span>
      <span class="c-symbol c-symbol--pin"></span>
      <span class="c-symbol c-symbol--group"></span>
      <span class="c-symbol c-symbol--flag"></span>
      <span class="c-symbol c-symbol--chevron-down"></span>
      <span class="c-symbol c-symbol--arrow-right"></span>
      <span class="c-symbol c-symbol--list"></span>
      <span class="c-symbol c-symbol--grid"></span>
      <span class="c-symbol c-symbol--search"></span>
      <span class="c-symbol c-symbol--share"></span>
      <span class="c-symbol c-symbol--phone"></span>
      <span class="c-symbol c-symbol--mail"></span>
      <span class="c-symbol c-symbol--tick"></span>
      <span class="c-symbol c-symbol--login"></span>
      <span class="c-symbol c-symbol--chevron-up"></span>
      <span class="c-symbol c-symbol--chevron-right"></span>
      <span class="c-symbol c-symbol--chevron-left"></span>
      <span class="c-symbol c-symbol--close"></span>
      <span class="c-symbol c-symbol--linkedin-solid"></span>
      <span class="c-symbol c-symbol--close-thick"></span>
      <span class="c-symbol c-symbol--arrow-left"></span>
      <span class="c-symbol c-symbol--filter"></span>
      <span class="c-symbol c-symbol--external"></span>
      <span class="c-symbol c-symbol--pin-filled"></span>
      <span class="c-symbol c-symbol--copy"></span>
      <span class="c-symbol c-symbol--twitter"></span>
      <span class="c-symbol c-symbol--flexible-work"></span>
      <span class="c-symbol c-symbol--clock"></span>
      <span class="c-symbol c-symbol--pound"></span>
      <span class="c-symbol c-symbol--linkedin"></span>
      <span class="c-symbol c-symbol--facebook"></span>
      <span class="c-symbol c-symbol--graphs"></span>
      <span class="c-symbol c-symbol--hero-awards"></span>
      <span class="c-symbol c-symbol--location"></span>
      <span class="c-symbol c-symbol--reports"></span>
      <span class="c-symbol c-symbol--workforce"></span>
      <span class="c-symbol c-symbol--scenery"></span>
      <span class="c-symbol c-symbol--choice"></span>
      <span class="c-symbol c-symbol--diversity"></span>
      <span class="c-symbol c-symbol--elearning"></span>
      <span class="c-symbol c-symbol--family-friendly"></span>
      <span class="c-symbol c-symbol--healthier-environment"></span>
      <span class="c-symbol c-symbol--historical-significance"></span>
      <span class="c-symbol c-symbol--market-leader"></span>
      <span class="c-symbol c-symbol--nhs"></span>
      <span class="c-symbol c-symbol--online-interviews"></span>
      <span class="c-symbol c-symbol--outdoor-activities"></span>
      <span class="c-symbol c-symbol--safety-security"></span>
      <span class="c-symbol c-symbol--error"></span>
      <span class="c-symbol c-symbol--workforce-shortages-1"></span>
      <span class="c-symbol c-symbol--workforce-shortages-2"></span>
      <span class="c-symbol c-symbol--candidate-focused"></span>
      <span class="c-symbol c-symbol--enhance-skills"></span>
      <span class="c-symbol c-symbol--enhanced-candidate"></span>
      <span class="c-symbol c-symbol--ethical-recruitment"></span>
      <span class="c-symbol c-symbol--expertise"></span>
      <span class="c-symbol c-symbol--global-reach"></span>
      <span class="c-symbol c-symbol--tailored-best-practice"></span>
      <span class="c-symbol c-symbol--control"></span>
      <span class="c-symbol c-symbol--workforce-development"></span>
      <span class="c-symbol c-symbol--international-staffing"></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>

USP Jump to Source

The USP component.

Lorem ipsum dolor sit Lorem ipsum dolor sit

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis, veniam! Natus, neque enim in culpa ex quisquam atque velit temporibus illo cupiditate laboriosam dicta unde nisi veritatis inventore suscipit fuga!

Lorem ipsum dolor sit

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis, veniam! Natus, neque enim in culpa ex quisquam atque velit temporibus illo cupiditate laboriosam dicta unde nisi veritatis inventore suscipit fuga!

Lorem ipsum dolor sit

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis, veniam! Natus, neque enim in culpa ex quisquam atque velit temporibus illo cupiditate laboriosam dicta unde nisi veritatis inventore suscipit fuga!

Lorem ipsum dolor sit

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis, veniam! Natus, neque enim in culpa ex quisquam atque velit temporibus illo cupiditate laboriosam dicta unde nisi veritatis inventore suscipit fuga!
Source 

<div class="l-grid l-grid--spaced">
    <div class="w-1-1@xs w-1-3@md">
        <div class="c-usp c-usp--fill">
            <div class="c-usp__inner">
                <div class="c-usp__icon">
                    <img src="../../img/styleguide/block-example.jpg" alt="">
                </div>
                <div class="c-usp__content">
                    <h3 class="c-usp__title">
                        Lorem ipsum dolor sit Lorem ipsum dolor sit
                    </h3>
                    <div class="c-usp__text">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis, veniam! Natus, neque enim in culpa ex quisquam atque velit temporibus illo cupiditate laboriosam dicta unde nisi veritatis inventore suscipit fuga!
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="w-1-1@xs w-1-3@md">
        <div class="c-usp c-usp--fill">
            <div class="c-usp__inner">
                <div class="c-usp__icon">
                    <img src="../../img/styleguide/block-example.jpg" alt="">                    
                </div>
                <div class="c-usp__content">
                    <h3 class="c-usp__title">
                        Lorem ipsum dolor sit
                    </h3>
                    <div class="c-usp__text">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis, veniam! Natus, neque enim in culpa ex quisquam atque velit temporibus illo cupiditate laboriosam dicta unde nisi veritatis inventore suscipit fuga!
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="l-grid l-grid--spaced">
    <div class="w-1-1@xs w-1-2@md">
        <div class="c-usp c-usp--fill c-usp--horizontal">
            <div class="c-usp__inner">
                <div class="c-usp__icon">
                    <img src="../../img/styleguide/block-example.jpg" alt="">                    
                </div>
                <div class="c-usp__content">
                    <h3 class="c-usp__title">
                        Lorem ipsum dolor sit
                    </h3>
                    <div class="c-usp__text">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis, veniam! Natus, neque enim in culpa ex quisquam atque velit temporibus illo cupiditate laboriosam dicta unde nisi veritatis inventore suscipit fuga!
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="w-1-1@xs w-1-2@md">
        <div class="c-usp c-usp--fill c-usp--horizontal">
            <div class="c-usp__inner">
                <div class="c-usp__icon">
                    <img src="../../img/styleguide/block-example.jpg" alt="">                    
                </div>
                <div class="c-usp__content">
                    <h3 class="c-usp__title">
                        Lorem ipsum dolor sit
                    </h3>
                    <div class="c-usp__text">
                        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Perferendis, veniam! Natus, neque enim in culpa ex quisquam atque velit temporibus illo cupiditate laboriosam dicta unde nisi veritatis inventore suscipit fuga!
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
Page Generated: Thu, Apr 24, 2025 at 3:06:09 PM