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

Various block shapes and styles.

Title here
Text here
Learn more
Title here
Text here
Learn more
Source 

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

    <div class="c-block c-block--fill">
      <div class="c-block__inner">
        <div class="c-block__content">
          <div class="c-block__title t-h3">
            Title here
          </div>
          <div class="c-block__text">
            Text here
          </div>
        </div>
        <div class="c-block__footer">
          <a href="#" class="c-btn c-btn--simple">Learn more</a>
        </div>
      </div>
    </div>

  </div>

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

    <a href="#" class="c-block c-block--fill">
      <div class="c-block__inner">
        <div class="c-block__content">
          <div class="c-block__title t-h3">
            Title here
          </div>
          <div class="c-block__text">
            Text here
          </div>
        </div>
        <div class="c-block__footer">
          <div class="c-btn c-btn--simple">Learn more</div>
        </div>
      </div>
    </a>

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

Primary Button
Secondary Button
Tertiary Button
Cod Gray Button
Coral Button
Flame Button
Salem Button
Forest Button
Spanish White Button
Butter Button
Boulder Button
Concrete Button
White Button
Black Button

Button Bordered Colours

Primary Button
Secondary Button
Tertiary Button
Cod Gray Button
Coral Button
Flame Button
Salem Button
Forest Button
Spanish White Button
Butter Button
Boulder Button
Concrete Button
White Button
Black Button

Button with icon

Multiline Button

Fill Button

Full-width Buttons

Full-width Button Mobile Full-width Button

Disabled Button

Disabled Button Disabled Button Disabled Button Disabled Button

Simple Button

Source 

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

  <h4>Default Button</h4>

  <a href="#" class="c-btn">Button</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">Primary Button</a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--secondary"><span class="c-btn__label">Secondary Button</span></a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--tertiary"><span class="c-btn__label">Tertiary Button</span></a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--cod-gray"><span class="c-btn__label">Cod Gray Button</span></a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--coral"><span class="c-btn__label">Coral Button</span></a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--flame"><span class="c-btn__label">Flame Button</span></a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--salem"><span class="c-btn__label">Salem Button</span></a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--forest"><span class="c-btn__label">Forest Button</span></a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--plaster"><span class="c-btn__label">Spanish White Button</span></a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--butter"><span class="c-btn__label">Butter Button</span></a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--boulder"><span class="c-btn__label">Boulder Button</span></a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--concrete"><span class="c-btn__label">Concrete Button</span></a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--white"><span class="c-btn__label">White Button</span></a></div>
      <div class="w-auto@xs"><a href="#" class="c-btn c-btn--black"><span class="c-btn__label">Black Button</span></a></div>
    </div>

</div>

<!-- Button - Bordered -->
<div class="w-1-1@xs w-1-2@md">
  <h4>Button Bordered Colours</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">Primary Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--secondary"><span class="c-btn__label">Secondary Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--tertiary"><span class="c-btn__label">Tertiary Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--cod-gray"><span class="c-btn__label">Cod Gray Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--coral"><span class="c-btn__label">Coral Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--flame"><span class="c-btn__label">Flame Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--salem"><span class="c-btn__label">Salem Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--forest"><span class="c-btn__label">Forest Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--plaster"><span class="c-btn__label">Spanish White Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--butter"><span class="c-btn__label">Butter Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--boulder"><span class="c-btn__label">Boulder Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--concrete"><span class="c-btn__label">Concrete Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--white"><span class="c-btn__label">White Button</span></a></div>
    <div class="w-auto@xs"><a href="#" class="c-btn c-btn--bordered c-btn--black"><span class="c-btn__label">Black Button</span></a></div>
  </div>

</div>

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

  <h4>Button with icon</h4>

  <div style="max-width:150px;"><a href="#" class="c-btn c-btn--multiline"><span class="c-btn__icon c-symbol c-symbol--search"></span><span class="c-btn__label">Button</span></a></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>

  <a href="#" class="c-btn is-disabled"><span class="c-btn__label">Disabled Button</span></a>
  <a href="#" class="c-btn c-btn--secondary is-disabled"><span class="c-btn__label">Disabled Button</span></a>
  

  <a href="#" class="c-btn c-btn--bordered is-disabled"><span class="c-btn__label">Disabled Button</span></a>
  <a href="#" class="c-btn c-btn--secondary c-btn--bordered is-disabled"><span class="c-btn__label">Disabled Button</span></a>
  

</div>

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

  <h4>Simple Button</h4>

  <div style="height:300px;"><a href="#" class="c-btn c-btn--simple">Simple Button</a></div>

</div>

Card Jump to Source

Various card shapes and styles.

Test Provider

Great advice!
Great experience with this broker. Knew the market and was able to get me a good ...
Joanna C June 28, 2022
Source 


<a
	class="c-card"
	href="#"
>

  <div class="c-card__inner">

    <h3 class="c-card__title">Test Provider</h3>

    <div class="c-card__stars">
      <div class="c-star-rating c-star-rating--flame">
        <span class="c-symbol c-symbol--star  c-star-rating__active"></span>
        <span class="c-symbol c-symbol--star  c-star-rating__active"></span>
        <span class="c-symbol c-symbol--star  c-star-rating__active"></span>
        <span class="c-symbol c-symbol--star"></span>
        <span class="c-symbol c-symbol--star"></span>
      </div>
    </div>

    <div class="c-card__content">
      <strong>Great advice!</strong>
      <div>Great experience with this broker. Knew the market and was able to get me a good ...</div>
    </div>

    <div class="c-card__meta">
      <span class="c-card__author">Joanna C</span>
      <span class="c-card__date">June 28, 2022</span>
    </div>

  </div>

</a>

Company Card Jump to Source

Various company card shapes and styles.

Test Provider

6 reviews
0755555555
NG7 2BA
email@address.co.uk
Source 


<a
	class="c-company-card"
	href="#"
>

	<div class="w-1-1@xs">

		<div class="c-company-card__wrapper">

			<div class="c-company-card__inner">

				<h3 class="t-delta t-weight-500 u-mgn-b-0@xs u-mgn-b-xs@ph">Test Provider</h3>

				<div class="c-company-card__reviews">

					<div class="w-auto@xs u-pad-r-xs@xs">

						<div class="c-star-rating">
							<span class="c-symbol c-symbol--star  c-star-rating__active"></span>
							<span class="c-symbol c-symbol--star  c-star-rating__active"></span>
							<span class="c-symbol c-symbol--star  c-star-rating__active"></span>
							<span class="c-symbol c-symbol--star"></span>
							<span class="c-symbol c-symbol--star"></span>
						</div>
					</div>

					<div class="w-auto@xs">
						<span class="t-color-silver">6 reviews</span>
					</div>

				</div>

				<div class="l-grid u-hidden@xs u-hidden@ph">
					<div class="w-auto@xs">
						<span
							class="c-symbol c-symbol--phone c-symbol--no-va u-pad-r-xxs@xs"
						></span>
						<span class="t-weight-500">0755555555</span>
					</div>
					<div class="w-auto@xs">
						<span
							class="c-symbol c-symbol--pin c-symbol--no-va u-pad-r-xxs@xs"
						></span>
						<span class="t-weight-500">NG7 2BA</span>
					</div>
					<div class="w-auto@xs">
						<span
							class="c-symbol c-symbol--email c-symbol--no-va u-pad-r-xxs@xs"
						></span>
						<span class="t-weight-500">email@address.co.uk</span>
					</div>
				</div>

			</div>

			<div class="c-company-card__logo-wrapper">
				<div
					class="c-company-card__logo"
					style="background-image: url(../../../assets/img/styleguide/logo-example.svg)";
				></div>
			</div>

		</div>

	</div>

</a>

Chip Jump to Source

Various chip shapes and styles.

Chip
Chip
Chip
Chip
Chip
Source 


<div class="l-grid l-grid--spaced l-grid--align-center">
    <div>
        <div class="c-chip u-bg-platinum">
            <span class="c-chip__title">Chip</span>
            <span class="c-chip__close-icon">
                <span class="c-symbol c-symbol--cross c-symbol--xs"></span>
            </span>
        </div>
    </div>
     <div>
        <div class="c-chip u-bg-platinum">
            <span class="c-chip__title">Chip</span>
            <span class="c-chip__icon">
                <span class="c-symbol c-symbol--star c-symbol--sm"></span>
            </span>
            <span class="c-chip__close-icon">
                <span class="c-symbol c-symbol--cross c-symbol--xs"></span>
            </span>
        </div>
    </div>
     <div>
        <div class="c-chip u-bg-primary">
            <span class="c-chip__title">Chip</span>
            <span class="c-chip__icon">
                <span class="c-symbol c-symbol--star c-symbol--sm"></span>
            </span>
            <span class="c-chip__close-icon">
                <span class="c-symbol c-symbol--cross c-symbol--xs"></span>
            </span>
        </div>
    </div>
     <div>
        <div class="c-chip u-bg-concrete">
            <span class="c-chip__title">Chip</span>
            <span class="c-chip__icon">
                <span class="c-symbol c-symbol--star c-symbol--sm"></span>
            </span>
            <span class="c-chip__close-icon">
                <span class="c-symbol c-symbol--cross c-symbol--xs"></span>
            </span>
        </div>
    </div>

     <div>
        <div class="c-chip u-bg-vermilion">
            <span class="c-chip__title">Chip</span>
            <span class="c-chip__icon">
                <span class="c-symbol c-symbol--star c-symbol--sm"></span>
            </span>
            <span class="c-chip__close-icon">
                <span class="c-symbol c-symbol--cross c-symbol--xs"></span>
            </span>
        </div>
    </div>
<div>

Companion Jump to Source

Companion styles.

Right (Default)

Lorem ipsum dolor sit amet consectetur

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

Left

Lorem ipsum dolor sit amet consectetur

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-pad-m@xs u-bg-plaster">
  <div class="l-grid l-grid--spaced">
    <div class="w-1-1@xs">
      <h4>Right (Default)</h4>
      <div class="c-companion">
      
        <div class="c-companion__inner">

          <div class="c-companion__media">
            <div class="c-companion__media-inner">
              <div class="c-companion__media-placeholder"></div>
            </div>
          </div>
      
          <div class="c-companion__content">
            <div class="c-companion__content-inner">
              <div class="c-companion__content-wrap">
                <h2>Lorem ipsum dolor sit amet consectetur</h2>
                <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>
      
      </div>
    </div>

    <div class="w-1-1@xs">
      <h4>Left</h4>
      <div class="c-companion c-companion--left">
      
        <div class="c-companion__inner">

          <div class="c-companion__media">
            <div class="c-companion__media-inner">
              <div class="c-companion__media-placeholder"></div>
            </div>
          </div>
      
          <div class="c-companion__content">
            <div class="c-companion__content-inner">
              <div class="c-companion__content-wrap">
                <h2>Lorem ipsum dolor sit amet consectetur</h2>
                <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>
      
      </div>
    </div>    
    
  </div>
</div>

Divider Jump to Source

Source 

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

Filter Jump to Source

Filter Styles

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

        </div>

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

        </div>


    </form>

  </div>

</div>

Hero Jump to Source

Hero component

We believe sharing experiences will help everyone find the approved provider that works for them and so will always be 100% free to use.

Source 

<div class="c-hero">
    <div class="u-bg-salem">
        <div class="u-pad-v-s@xs u-pad-v-xl@md ">
            <div class="c-hero__inner">
                <div class="w-2-5@md w-1-2@lg">
                    <h1 class="t-weight-300 u-mgn-b-0@xs">We believe<strong> sharing experiences</strong> will help everyone find the <strong>approved</strong> provider that works for them and so will always be <strong>100% free</strong> to use.</h1>
                </div>
            </div>

        </div>
        <div class="c-hero__shapes">
                <div class="c-hero__shape-a"></div>
                <div class="c-hero__shape-b"></div>
            </div>
    </div>
</div>

Overlapped Images Jump to Source

Overlapped Images styles.

Default

Right

Source 
<div class="u-pad-m@xs u-bg-plaster">
  <div class="l-grid l-grid--spaced">
    <div class="w-1-1@xs">
      <h4>Default</h4>
      <div class="c-overlapped-images">
      
        <div class="c-overlapped-images__inner">

          <div class="c-overlapped-images__media-left">
            <div class="c-overlapped-images__media-left-inner">
              <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>

          <div class="c-overlapped-images__media-right">
            <div class="c-overlapped-images__media-right-inner">
              <div class="c-media-image u-cover-image u-aspect-ratio-4-3@xs" style="background-image: url('../../img/styleguide/block-example.jpg');"></div>
            </div>
          </div>
      
      
        </div>
      
      </div>
    </div>  

    <div class="w-1-1@xs">
      <h4>Right</h4>
      <div class="c-overlapped-images c-overlapped-images--reversed">
      
        <div class="c-overlapped-images__inner">

          <div class="c-overlapped-images__media-left">
            <div class="c-overlapped-images__media-left-inner">
              <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>
      
          <div class="c-overlapped-images__media-right">
            <div class="c-overlapped-images__media-right-inner">
              <div class="c-media-image u-cover-image u-aspect-ratio-4-3@xs" style="background-image: url('../../img/styleguide/block-example.jpg');"></div>
            </div>
          </div>         
      
        </div>
      
      </div>
    </div>
    
  </div>
</div>

Review Card Jump to Source

Review card component

NH
Name Here
Company Here
15th July 2022
Yes, I recommend this provider.
Title
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Source 


<div class="c-review-card">

  <div class="c-review-card__inner">

    <div class="c-review-card__header">
      <div class="c-review-card__avatar">
        NH
      </div>
      <div>
        <div class="c-review-card__author">
          <div class="c-review-card__name">Name Here</div>
          <div class="c-review-card__company">Company Here</div>
        </div>
        <div class="c-review-card__date">15th July 2022</div>
      </div>

    </div>


    <div class="c-review-card__rating">
      <div class="c-review-card__stars">

        <div class="c-star-rating">
            <span class="c-symbol c-symbol--star  c-star-rating__active"></span>
            <span class="c-symbol c-symbol--star  c-star-rating__active"></span>
            <span class="c-symbol c-symbol--star  c-star-rating__active"></span>
            <span class="c-symbol c-symbol--star"></span>
            <span class="c-symbol c-symbol--star"></span>
          </div>

      </div>

      <div class="c-review-card__recommended">
        <span class="c-symbol c-symbol--tick t-color-primary"></span>
        <span>Yes, I recommend this provider.</span>
      </div>
    </div>

    <div class="c-review-card__content">
      <strong>Title</strong>
      <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</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--chevron-down"></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--linkedin"></span>
      <span class="c-symbol c-symbol--badge"></span>
      <span class="c-symbol c-symbol--email"></span>
      <span class="c-symbol c-symbol--tick"></span>
      <span class="c-symbol c-symbol--cross"></span>
      <span class="c-symbol c-symbol--error"></span>
      <span class="c-symbol c-symbol--external"></span>
      <span class="c-symbol c-symbol--hamburger"></span>
      <span class="c-symbol c-symbol--location"></span>
      <span class="c-symbol c-symbol--phone"></span>
      <span class="c-symbol c-symbol--pin"></span>
      <span class="c-symbol c-symbol--review"></span>
      <span class="c-symbol c-symbol--search"></span>
      <span class="c-symbol c-symbol--star"></span>
  </div>

</div>
Page Generated: Wed, Jan 25, 2023 at 2:15:50 PM