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>
      <span class="c-accordion__icon c-accordion__text--toggle"></span>
    </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>
      <span class="c-accordion__icon"></span>
    </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>
      <span class="c-accordion__icon"></span>
    </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>
      <span class="c-accordion__icon"></span>
    </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>

Avatar Jump to Source

The avatar component.

.c-avatar

Default appearance.
Kitty Cat!

.c-avatar--tiny

Tiny variant.
Kitty Cat!

.c-avatar--small

Small variant.
Kitty Cat!

.c-avatar--medium

Medium variant.
Kitty Cat!

.c-avatar--large

Large Variant.
Kitty Cat!

.c-avatar--fluid

Fluid variant, fills available space.
Kitty Cat!
Source 

<div style="max-width: 480px;">
  <div class="c-avatar [modifier class]">
    <div class="c-avatar__inner">
      <img class="c-avatar__image" src="https://placekitten.com/g/512/512" alt="Kitty Cat!" />
    </div>
  </div>
</div>

Block Jump to Source

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

.c-block

Default appearance.

Block Title

Block Subtitle

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.

.c-block--bordered

Bordered variant.

Block Title

Block Subtitle

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.

.c-block--centered

Centered content variant.

Block Title

Block Subtitle

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.

.c-block--flush

Flush variant.

Block Title

Block Subtitle

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.

.c-block--flush-media

Flush media variant.

Block Title

Block Subtitle

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.

.c-block--rounded

Rounded variant.

Block Title

Block Subtitle

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="c-block [modifier class]" style="max-width: 480px;">

  <div class="c-block__inner">
  
    <div class="c-block__header">

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

      <div class="c-block__icons">
        <span class="c-symbol c-symbol--c-symbol c-symbol--allied-health"></span>
        <span class="c-symbol c-symbol--c-symbol c-symbol--nursing"></span>
      </div>

      <h2 class="c-block__title">
        Block Title
      </h2>

      <h3 class="c-block__subtitle">
        Block Subtitle
      </h3>

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

Blockquote Jump to Source

The breadcrumb component.

Why Pulse?

"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat lobortis cursus. Curabitur eu risus finibus, tempus metus in, ultrices eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos."

Sarah Smith, Psychiatry Doctory
Source 

<blockquote class="c-blockquote">
  <h2 class="t-h1 t-weight-700 c-blockquote__title">Why Pulse?</h2>
  <p class="c-blockquote__quote">&quot;Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat lobortis cursus. Curabitur eu risus
        finibus, tempus metus in, ultrices eros. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
        inceptos himenaeos.&quot;</p>
  <footer>
    <span class="t-weight-700 c-blockquote__meta">Sarah Smith, Psychiatry Doctory</span>
  </footer>
</blockquote>

Breadcrumb Jump to Source

The breadcrumb 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 Colours

Primary Button
Prussian Blue Button
Fuzzy Wuzzy Brown Button
River Bed Button
Allports Button
Japanese Laurel Button
Green Haze Button
Tamarillo Button
Rose of Sharon Button
Wisteria Button
Olive Button
Guardsman Red Button

Bordered Button Colours

Primary Button
Prussian Blue Button
Fuzzy Wuzzy Brown Button
River Bed Button
Allports Button
Japanese Laurel Button
Green Haze Button
Tamarillo Button
Rose of Sharon Button
Wisteria Button
Olive Button
Guardsman Red Button

Button Sizes

Tiny Button Small Button Button Large Button

Button Square

Button with Icon

Button Button

Multiline Button

Fill Button

Full-width Buttons

Full-width Button Mobile Full-width Button

Disabled Button

Disabled Button Disabled Button
Source 

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

  <h4>Default Button</h4>

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

</div>

<!-- Button - Colours -->
<div class="l-grid u-mgn-b-m@xs">

  <div class="w-1-1@xs w-1-2@md">
    <h4>Button Colours</h4>
  
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--primary">Primary Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--prussian-blue">Prussian Blue Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--fuzzy-wuzzy-brown">Fuzzy Wuzzy Brown Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--river-bed">River Bed Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--allports">Allports Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--japanese-laurel">Japanese Laurel Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--green-haze">Green Haze Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--tamarillo">Tamarillo Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--rose-of-sharon">Rose of Sharon Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--wisteria">Wisteria Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--olive">Olive Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--guardsman-red">Guardsman Red Button</a></div>
  </div>

  <div class="w-1-1@xs w-1-2@md">
    <h4>Bordered Button Colours</h4>
  
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--bordered c-btn--primary">Primary Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--bordered c-btn--prussian-blue">Prussian Blue Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--bordered c-btn--fuzzy-wuzzy-brown">Fuzzy Wuzzy Brown Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--bordered c-btn--river-bed">River Bed Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--bordered c-btn--allports">Allports Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--bordered c-btn--japanese-laurel">Japanese Laurel Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--bordered c-btn--green-haze">Green Haze Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--bordered c-btn--tamarillo">Tamarillo Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--bordered c-btn--rose-of-sharon">Rose of Sharon Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--bordered c-btn--wisteria">Wisteria Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--bordered c-btn--olive">Olive Button</a></div>
    <div class="u-mgn-v-s@xs"><a href="#" class="c-btn c-btn--bordered c-btn--guardsman-red">Guardsman Red Button</a></div>
  </div>

</div>

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

  <h4>Button Sizes</h4>
  <a href="#" class="c-btn c-btn--tiny">Tiny Button</a>
  <a href="#" class="c-btn c-btn--small">Small Button</a>
  <a href="#" class="c-btn">Button</a>
  <a href="#" class="c-btn c-btn--large">Large Button</a>

</div>

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

  <h4>Button Square</h4>
  <a href="#" class="c-btn c-btn--square c-btn--tiny"><span class="c-btn__icon"></span><span class="c-symbol c-symbol--email"></a>
  <a href="#" class="c-btn c-btn--square c-btn--small"><span class="c-btn__icon"></span><span class="c-symbol c-symbol--email"></a>
  <a href="#" class="c-btn c-btn--square"><span class="c-btn__icon"></span><span class="c-symbol c-symbol--email"></a>
  <a href="#" class="c-btn c-btn--square c-btn--large"><span class="c-btn__icon"></span><span class="c-symbol c-symbol--email"></a>

</div>

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

  <h4>Button with Icon</h4>

  <a href="#" class="c-btn c-btn--icon"><span class="c-btn__icon"><span class="c-symbol c-symbol--email"></span></span>Button</a>
  <a href="#" class="c-btn c-btn--icon c-btn--primary c-btn--bordered"><span class="c-btn__icon"><span class="c-symbol c-symbol--search"></span></span>Button</a>

</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>Multiline Button</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>Fill Button</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">Full-width Button</a>
  <a href="#" class="c-btn c-btn--mobilefull">Mobile Full-width Button</a>

</div>

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

  <h4>Disabled Button</h4>

  <a href="#" class="c-btn is-disabled">Disabled Button</a>
  <a href="#" class="c-btn c-btn--japanese-laurel is-disabled">Disabled Button</a>

</div>

Card Jump to Source

Card styles.

Default Card

News Card

Talking to children about mental health

23rd July 2020
Sarah smith
Nursing
Allied Health
Source 

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

  <h4>Default Card</h4>

  <div class="c-card" style="width: 33.3%;">

  </div>

</div>

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

  <h4>News Card</h4>

  <a href="#" class="c-card" style="width: 50%;">

    <div class="c-card__inner">

      <div class="c-card__visual">
        <div class="c-card__image u-cover-image u-aspect-ratio-16-9@xs u-aspect-ratio-5-2@md" style="background-image: url('../../img/styleguide/hero-example.jpg')"></div>
      </div>
      <div class="c-card__information">
        <div class="c-card__header">
          <h4 class="c-card__title">Talking to children about mental health</h4>
        </div>
        <div class="c-card__meta">
          <div class="c-card__meta-info">
              <div class="c-card__meta-date">23rd July 2020</div>
              <div class="c-card__meta-title">Sarah smith</div>
          </div>
        </div>

        <div class="c-card__chips">
          <div class="c-card__chip">
            <div class="c-chip c-chip--tamarillo">Nursing</div>
          </div>
          <div class="c-card__chip">
            <div class="c-chip c-chip--green-haze">Allied Health</div>
          </div>
        </div>

      
      </div>
    </div>
  </a>

</div>

Chip Jump to Source

The Chip component.

News
Allied Health
Source 

<div class="c-chip c-chip--grey">
    News
    <div class="c-chip__cross">
        <span class="c-chip__line"></span>
        <span class="c-chip__line"></span>
    </div>
</div>

<div class="c-chip c-chip--japanese-laurel">
    Allied Health
    <div class="c-chip__cross">
        <span class="c-chip__line"></span>
        <span class="c-chip__line"></span>
    </div>
</div>

Companion Jump to Source

Companion styles.

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="c-companion">

  <div class="c-companion__inner">

    <div class="c-companion__content">
      <div class="c-companion__content-inner">
        <div class="c-companion__content-wrap">
          <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>

Filter Jump to Source

Filter Styles e.g. news categories.

Form Jump to Source

Various form shapes and styles.

Inputs

Add Location
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="c-form__item-group">

            <div class="c-form__item">
                <label>Short text:</label>
                <input type="text" placeholder="This is an example">
            </div>

            <div class="c-form__item">
                <label>Mid text:</label>
                <input type="text" class="c-form__input-full" placeholder="This is an example of longer text requiring a longer field">
            </div>

            <div class="c-form__item">
                <label>Password:</label>
                <input type="password" placeholder="Password">
            </div>

            <div class="c-form__item">
                <label>Time:</label>
                <input type="time">
            </div>

            <div class="c-form__item">
                <label>Number:</label>
                <input type="number">
            </div>

            <div class="c-form__item">
                <label>Long text:</label>
                <textarea rows="3" placeholder="Type you message here..."></textarea>
            </div>

            <div class="c-form__item">
                <label>Radio buttons:</label>
                <div class="c-form__options">
                    <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>

            <div class="c-form__item">
                <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="c-form__item">
                <label>Drop down:</label>
                <select>
                    <option>- Select -</option>
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                </select>

            </div>

            <div class="c-form__item">
                <label>Drop down & add:</label>
                <div class="c-form__item-wrapper">
                    <select>
                        <option>- Select -</option>
                        <option>Option 1</option>
                        <option>Option 2</option>
                        <option>Option 3</option>
                    </select>
                    <div class="c-form__select-button">
                        <div class="c-btn">Add Location</div>
                    </div>
                </div>

            </div>

            <div class="c-form__item">
                <label>Error:</label>
                <div>
                    <input class="has-error" type="text" placeholder="Text">
                    <div role="alert" class="wpcf7-not-valid-tip">Oh no, an error!</div>
                </div>
                

            </div>

        </div>

    </form>

  </div>

</div>

Hero Jump to Source

Various hero styles.

Strong positioning statement goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac mollis nisi. Nullam rutrum ante arcu, vel convallis diam rutrum ultricies. Vivamus eu elit id nulla molestie consectetur.
Source 
<div class="c-hero">

    <div class="c-hero__image" style="background-image: url('../../img/styleguide/hero-example.jpg')"><div class="c-hero__overlay"></div></div>
    <div class="c-hero__content">
        <h1 class="c-hero__title">Strong positioning statement goes here</h1>
        <div class="c-hero__subtitle">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ac mollis nisi. Nullam rutrum ante arcu, vel convallis diam rutrum ultricies. Vivamus eu elit id nulla molestie consectetur.</div>
    </div>

</div>

Job Card Jump to Source

Various Job Card styles.

Hello

n/a

n/a

n/a

View
Source 
<div class="c-job-card">
  <div class="c-job-card__inner u-bg-tamarillo-light">
    <div class="c-job-card__content">
      <h2 class="c-job-card__title t-h3 t-color-tamarillo">Hello</h2>
      <p class="c-job-card__body-text"></p>
    </div>
    <div class="c-job-card__meta">
      <div class="c-job-card__meta-overlay u-bg-tamarillo"></div>
      <div class="c-job-card__meta-info">
          <div class="c-job-card__meta-item">
            <span class="c-symbol c-symbol--2x c-symbol--location"></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--2x c-symbol--job-type-alt"></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--2x c-symbol--salary"></span>
            <p class="c-job-card__meta-text">n/a</p>
          </div>
      </div>
      <div class="c-job-card__action">
        <a href="http://pulsejobs.local/jobs/hello/" class="c-btn c-btn--tamarillo">
          <span>View</span>
        </a>
      </div>
    </div>
  </div>
</div>

Job Details Card Jump to Source

Various Job Details Card styles.

Job Details

Location

Job Type

Salary

Band

Sub-sector
Sub-sector
Professions
Profession 1, Profession 2
Apply
Source 
<div class="c-job-details-card c-job-details-card--executive">
  <div class="c-job-details-card__inner">
    <div class="c-job-details-card__body">
      <div class="c-job-details-card__body-inner">
        <h2>Job Details</h2>

        <div class="c-job-details-card__meta">
          <div class="c-job-details-card__meta-item">
            <p><span class="c-symbol c-symbol--location"></span> Location</p>
          </div>
          <div class="c-job-details-card__meta-item">
            <p><span class="c-symbol c-symbol--job-type-alt"></span> Job Type</p>
          </div>
          <div class="c-job-details-card__meta-item">
            <p><span class="c-symbol c-symbol--salary"></span> Salary</p>
          </div>
          <div class="c-job-details-card__meta-item">
            <p><span class="c-symbol c-symbol--job-band"></span> Band</p>
          </div>
        </div>

        <div class="c-job-details-card__content">
          <div class="c-job-details-card__heading">Sub-sector</div>
          <div class="c-job-details-card__body">Sub-sector</div>
          <div class="c-job-details-card__heading">Professions</div>
          <div class="c-job-details-card__body">Profession 1, Profession 2 </div>
        </div>

      </div>
      </div>
    </div>
    
  <div class="c-job-details-card__footer">
    <div class="c-job-details-card__footer-inner">
      <div class="c-job-details-card__action">
        <a href="#" class="c-btn">Apply</a>
      </div>
    </div>

  </div>
</div>

Menu Toggle Jump to Source

Menu toggle icon.

Source 
<div class="c-menu-toggle js-menu-toggle">
  <div class="c-menu-toggle__hamburger">
    <span class="c-menu__line"></span>
    <span class="c-menu__line"></span>
    <span class="c-menu__line"></span>
  </div>
  <div class="c-menu-toggle__cross">
    <span class="c-menu__line"></span>
    <span class="c-menu__line"></span>
  </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>

Pagination Jump to Source

Global pagination

Source 

<nav class="c-Pagination">
    <div class="c-pagination__section">
        <span class="c-pagination__link-prev c-pagination__link--disabled"></span>
    </div>
    
    <div class="c-pagination__section">
        <span class="c-pagination__info">Page 1 of 3</span>
    </div>

    <div class="c-pagination__section">
        <a href="#" class="o-pager__link"><span class="c-pagination__link-next"></span></a>
    </div>
</nav>

Progress Tracker Jump to Source

Global iconography.

  1. Step 1
  2. Step 2
  3. Step 3
Source 

<ol class="c-progress-tracker">
  <li class="c-progress-tracker__step is-complete">
    <span class="c-progress-tracker__dot"></span>
    <span class="c-progress-tracker__stepLabel">Step 1</span>
  </li>
  <li class="c-progress-tracker__step is-current">
    <span class="c-progress-tracker__dot"></span>
    <span class="c-progress-tracker__stepLabel">Step 2</span>
  </li>
  <li class="c-progress-tracker__step">
    <span class="c-progress-tracker__dot"></span>
    <span class="c-progress-tracker__stepLabel">Step 3</span>
  </li>
</ol>

Search Jump to Source

The main search component.

Source 

<div class="c-search">

    <div class="c-search__inner">
        
        <div class="c-search__bar">
            <div class="c-search__form">
                
                <form method="get" id="searchform">
                    <input type="search" placeholder="Search the site" class="c-search__input">
                </form>
    
            </div>
    
            <div class="c-search__actions">
    
                <div>
                    <button type="submit" form="searchform" value="Submit" class="c-btn c-btn--primary c-btn--bordered c-btn--icon c-search__submit">
                        <span class="c-symbol c-symbol--search"></span>
                        Search
                    </button>
                </div>
    
                <div class="c-search__close">
                    <span class="c-symbol c-symbol--cross"></span>
                </div>
    
            </div>
        </div>

    </div>

</div>

Site Footer Jump to Source

The main site footer component.

Footer Primary Region
Footer Closure Region
Source 

<div class="c-site-footer">

  <div class="c-site-footer__inner">

    <div class="l-constrained l-large">

      Footer Primary Region

    </div>

  </div>

  <div class="c-site-footer__closure">

    <div class="l-constrained l-extra-large">

      Footer Closure Region

    </div>

  </div>

</div>

Site Header Jump to Source

The main site header component.

Branding Region
Top Navigation Region
Bottom Navigation Region
Source 

<div class="c-site-header">

  <div class="c-site-header__inner">

    <div class="c-site-header__top">

      <div class="c-site-header__top-branding">
        Branding Region
      </div>

      <div class="c-site-header__top-nav">
        Top Navigation Region
      </div>

    </div>

    <div class="c-site-header__bottom">

      <div class="c-site-header__bottom-nav">
        Bottom Navigation Region
      </div>

    </div>

  </div>

</div>

Site Logo Jump to Source

The main site logo component.

.c-site-logo

Default appearance.

.c-site-logo--white

White-coloured variant.

.c-site-logo--blue

Blue-coloured variant.

.c-site-logo--fluid

"Fluid" Modifier. Fills available width and scales accordingly.
Source 
<a href="#" class="c-site-logo [modifier class]">Site Logo</a>

Slider Jump to Source

The main slider component.

.c-slider

Default appearance.

News Slider

1
2
3
4
5

CTA Slider

Source 

<h4>News Slider</h4>
<div class="c-slider c-slider__overflow">
  <div class="c-slider__track">
    <div class="c-slider__list">
      <div class="c-slider__slide">1</div>
      <div class="c-slider__slide">2</div>
      <div class="c-slider__slide">3</div>
      <div class="c-slider__slide">4</div>
      <div class="c-slider__slide">5</div>
    </div>
  </div>
</div>

<h4>CTA Slider</h4>
<section>
  <div class="c-slider js-slider js-intersect js-medialoader u-reveal"
    data-responsive='{
        "xl" : { "show": "5", "scroll": "1" },
        "lg" : { "show": "4", "scroll": "1" },
        "sm" : { "show": "3", "scroll": "1" },
        "ph" : { "show": "2", "scroll": "1" },
        "xs" : { "show": "1", "scroll": "1" }
    }'
    
    data-slider='{
      "dots"          : false,
      "arrows"        : true,
      "slidesToShow"  : 4
    }'>

    <div class="c-slider__slide-content u-cover-image" style="background-image: url('https://via.placeholder.com/50');"></div>
    <div class="c-slider__slide-content u-cover-image" style="background-image: url('https://via.placeholder.com/50');"></div>
    <div class="c-slider__slide-content u-cover-image" style="background-image: url('https://via.placeholder.com/50');"></div>
    <div class="c-slider__slide-content u-cover-image" style="background-image: url('https://via.placeholder.com/50');"></div>
    <div class="c-slider__slide-content u-cover-image" style="background-image: url('https://via.placeholder.com/50');"></div>
    <div class="c-slider__slide-content u-cover-image" style="background-image: url('https://via.placeholder.com/50');"></div>
    <div class="c-slider__slide-content u-cover-image" style="background-image: url('https://via.placeholder.com/50');"></div>
    <div class="c-slider__slide-content u-cover-image" style="background-image: url('https://via.placeholder.com/50');"></div>
    <div class="c-slider__slide-content u-cover-image" style="background-image: url('https://via.placeholder.com/50');"></div>
    <div class="c-slider__slide-content u-cover-image" style="background-image: url('https://via.placeholder.com/50');"></div>

  </div>
</section>

Symbols Jump to Source

Global iconography.

Font Icons

Image Icons

Specialism Icons

Source 

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

  <div class="u-mgn-b-m@xs">
      <h4>Font Icons</h4>
      <span class="c-symbol c-symbol--chevron-down"></span>
      <span class="c-symbol c-symbol--chevron-up"></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--row-display"></span>
      <span class="c-symbol c-symbol--linkedin"></span>
      <span class="c-symbol c-symbol--twitter"></span>
      <span class="c-symbol c-symbol--facebook"></span>
      <span class="c-symbol c-symbol--tick"></span>
      <span class="c-symbol c-symbol--cross"></span>
      <span class="c-symbol c-symbol--dash"></span>
      <span class="c-symbol c-symbol--external"></span>
  </div>

  <div class="u-mgn-b-m@xs">
      <h4>Image Icons</h4>
      <span class="c-symbol c-symbol--search"></span>
      <span class="c-symbol c-symbol--enquiries"></span>
      <span class="c-symbol c-symbol--enquiries-alt"></span>
      <span class="c-symbol c-symbol--location"></span>
      <span class="c-symbol c-symbol--job-type"></span>
      <span class="c-symbol c-symbol--job-type-alt"></span>
      <span class="c-symbol c-symbol--salary"></span>
      <span class="c-symbol c-symbol--job-band"></span>
      <span class="c-symbol c-symbol--email"></span>
      <span class="c-symbol c-symbol--email-screen"></span>
      <span class="c-symbol c-symbol--cards"></span>
      <span class="c-symbol c-symbol--telephone"></span>
      <span class="c-symbol c-symbol--telephone-thick"></span>
      <span class="c-symbol c-symbol--telephone-return"></span>
      <span class="c-symbol c-symbol--telephone-return-thick"></span>
      <span class="c-symbol c-symbol--recommend"></span>
      <span class="c-symbol c-symbol--hamburger"></span>
      <span class="c-symbol c-symbol--filtering"></span>
      <span class="c-symbol c-symbol--link"></span>
      <span class="c-symbol c-symbol--job-specialisms"></span>
      <span class="c-symbol c-symbol--job-search"></span>
      <span class="c-symbol c-symbol--badge"></span>
      <span class="c-symbol c-symbol--play"></span>
      <span class="c-symbol c-symbol--talk-health"></span>
  </div>

  <div>
      <h4>Specialism Icons</h4>
      <span class="c-symbol c-symbol--health-sciences"></span>
      <span class="c-symbol c-symbol--allied-health"></span>
      <span class="c-symbol c-symbol--nursing"></span>
      <span class="c-symbol c-symbol--psychological"></span>
      <span class="c-symbol c-symbol--psychiatry"></span>
      <span class="c-symbol c-symbol--acute-doctors"></span>
  </div>

</div>

Tabs Jump to Source

Generic styling for tabs.

Content
Source 
<div id="g-block-tabs-5f7da432b6558" class="c-tabs js-tabs" role="tablist">

    <select name="" id="" class="c-tabs__select">

    <option class="c-tabs__option">Tab 1</option>
    <option class="c-tabs__option">Tab 2</option>
    
    </select>

    <div class="c-tabs__item js-tab-content t-color-primary is-active" role="tab">Tab 1</div>

    <div class="c-tabs__content js-tab-content is-active" role="tabpanel">
    Content
    </div>

    <div class="c-tabs__item js-tab-content t-color-primary" role="tab" >Tab 2<div>

    <div class="c-tabs__content js-tab-content" role="tabpanel">
    Content 2
    </div>

</div>

Taskbar Jump to Source

Global iconography.

or
Register for Pulse
Source 
<div style="display: flex;">
    <div class="c-taskbar">
    
        <div class="c-taskbar__inner">
            
            <form method="get" id="taskbar-search" class="c-taskbar__form">
    
                    <div class="c-taskbar__select-wrapper">
                        <select name="" id="" class="c-taskbar__select">
    
                            <option class="t-weight-bold" value="">Specialisms</option>
                            <option value="">1</option>
                            <option value="">2</option>
    
                        </select>
                    </div>
    
                <div class="c-taskbar__input">
                    <span class="c-symbol c-symbol--2x c-symbol--job-search"></span>
                    <input class="c-taskbar__keyword" type="search" placeholder="Search by keyword or role">
                </div>
    
                <div class="c-taskbar__input">
                    <span class="c-symbol c-symbol--2x c-symbol--location"></span>
                    <input class="c-taskbar__location" type="search" placeholder="Search by location">
                </div>
    
            </form>
    
            <div class="c-taskbar__divider"></div>
    
            <div class="c-taskbar__search">
    
                <button type="submit" form="taskbar-search" value="Submit" class="c-btn c-btn--allports c-btn--mobilefull">
                    Search jobs
                </button>
    
                    <div class="c-taskbar__end">
                        <span class="u-pad-h-s@xs">or</span>
                
                        <div>
                            <div class="c-btn c-btn--primary c-btn--bordered">
                                Register for Pulse
                            </div>
                        </div>
                    </div>
    
            </div>
    
        </div>
    
    </div>
</div>
Page Generated: Thu, Jun 1, 2023 at 12:00:57 PM