Brand Logo

This is the TID brand logo. You can change the size of it by overriding the width and height of the BrandLogo module. The logo is applied as a background image so the widths and heights must remain proportional to the logo.

    
      <!-- sections used for Style Guide spacing -->
<div class="section">

    <span class="BrandLogo" title="Travel Insurance Direct"></span>

</div>
<div class="section">

    <a href="/" class="BrandLogo BrandLogo--min" title="Travel Insurance Direct"></a>

</div>

<a href="/" class="BrandLogo BrandLogo--responsive" title="Travel Insurance Direct"></a>

Callouts

Callouts are used as a visual container for content. They define consistent padding and styling for content that requires increased hierarchical attention from users.

This is a callout.
This is a ghost callout.
This is a light callout.
This is a dark callout with reversed copy.
This is a callout with our primary brand colour.
This is a callout with our secondary brand colour.
This is a secondary callout with the text colour reversed.

      <!-- sections used for Style Guide spacing -->
<div class="section">

    <div class="Callout">This is a callout.</div>

</div>
<div class="section">

    <div class="Callout Callout--ghost">This is a ghost callout.</div>

</div>
<div class="section">

    <div class="Callout Callout--light">This is a light callout.</div>

</div>
<div class="section">

    <div class="Callout Callout--dark Callout--reverse">This is a dark callout with reversed copy.</div>

</div>
<div class="section">

    <div class="Callout Callout--primary">This is a callout with our primary brand colour.</div>

</div>
<div class="section">

    <div class="Callout Callout--secondary">This is a callout with our secondary brand colour.</div>

</div>
<div class="Callout Callout--secondary Callout--reverse">This is a secondary callout with the text colour reversed.</div>
    

Split Callouts

Note: Do not combine Callout header with callout columns. This pattern doesn't exist in the designs.

Callout with header section

Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.

Callout with header section

Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.

Split callout

Woohoo! My clubs worth $2,000 is now covered.

+$80

Or combine them all

Split callout

Woohoo! My clubs worth $2,000 is now covered.

+$80

      <div class="row section">
    <div class="col-sm-3">

        <div class="Callout">
            <div class="Callout-header">
                <h3>Callout with header section</h3>
            </div>
            <p>Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.</p>
        </div>

    </div>
    <div class="col-sm-3">

        <div class="Callout Callout--secondary Callout--reverse">
            <div class="Callout-header">
                <h3>Callout with header section</h3>
            </div>
            <p>Lorem ipsum dolor amet squid kitsch ramps selfies artisan knausgaard. +1 unicorn jianbing literally, tacos pok pok drinking vinegar.</p>
        </div>

    </div>
</div>
<div class="section">

    <div class="Callout Callout--light Callout--split">
        <div class="Callout-col">
            <h3>Split callout</h3>
            <div>Woohoo! My clubs worth $2,000 is now covered.</div>
        </div>
        <div class="Callout-col">
            <div class="section-centered">
                <div class="PriceTotal PriceTotal--sm">
                    +$80
                </div>
                <button class="TypeBtn TypeBtn--inline TypeBtn--sm" type="button">
                    Remove
                </button>
            </div>
        </div>
    </div>

</div>

<div class="Callout Callout--light Callout--split">
    <div class="Callout-header">
        <h2>Or combine them all</h2>
    </div>
    <div class="Callout-col">
        <h3>Split callout</h3>
        <div>Woohoo! My clubs worth $2,000 is now covered.</div>
    </div>
    <div class="Callout-col">
        <div class="section-centered">
            <div class="PriceTotal PriceTotal--sm">
                +$80
            </div>
            <button class="TypeBtn TypeBtn--inline TypeBtn--sm" type="button">
                Remove
            </button>
        </div>
    </div>
</div>
    

Colours

All colours should be selected from the following colour pallette. Under no exception should other colours be used, nor should colours be manipulated, either with opacity or SCSS functions, such as darken(). If you want a new colour included, make the case with the team.

$color-primary $color-primary-dark $color-secondary

$color-error $color-attention

$color-mono-100 $color-mono-200 $color-mono-300 $color-mono-400 $color-mono-500 $color-mono-600 $color-mono-700

$color-body $color-body-dark $color-border $color-font $color-font-light

Emoji

Emoji's are used to add personality and approachability to content, particulaly headings.

    
      <span class="Emoji Emoji--aloha" title="An aloha emoji"></span>
<span class="Emoji Emoji--ambulance" title="An ambulance emoji"></span>
<span class="Emoji Emoji--asia" title="An asian emoji"></span>
<span class="Emoji Emoji--aussie" title="An aussie emoji"></span>
<span class="Emoji Emoji--baby" title="A baby emoji"></span>
<span class="Emoji Emoji--backpack" title="A backpack emoji"></span>
<span class="Emoji Emoji--callme" title="A call me emoji"></span>
<span class="Emoji Emoji--clocklate" title="A clock late emoji"></span>
<span class="Emoji Emoji--cool" title="A cool emoji"></span>
<span class="Emoji Emoji--cruise" title="A cruise emoji"></span>
<span class="Emoji Emoji--dance" title="A dance emoji"></span>
<span class="Emoji Emoji--excited" title="An excited emoji"></span>
<span class="Emoji Emoji--expert" title="An expert emoji"></span>
<span class="Emoji Emoji--pilot" title="A pilot emoji"></span>
<span class="Emoji Emoji--grimace" title="A grimace emoji"></span>
<span class="Emoji Emoji--guitar" title="A guitar emoji"></span>
<span class="Emoji Emoji--happy" title="A happy emoji"></span>
<span class="Emoji Emoji--hearteyes" title="A heart eyes emoji"></span>
<span class="Emoji Emoji--helmet" title="A helmet emoji"></span>
<span class="Emoji Emoji--hmmn" title="A thinking emoji"></span>
<span class="Emoji Emoji--medical" title="A medical emoji"></span>
<span class="Emoji Emoji--kid" title="A kid emoji"></span>
<span class="Emoji Emoji--knight" title="A knight emoji"></span>
<span class="Emoji Emoji--londoner" title="A londoner emoji"></span>
<span class="Emoji Emoji--cry" title="A crying emoji"></span>
<span class="Emoji Emoji--luggage" title="A luggage emoji"></span>
<span class="Emoji Emoji--meh" title="A meh emoji"></span>
<span class="Emoji Emoji--miserable" title="A miserable emoji"></span>
<span class="Emoji Emoji--moneyeyes" title="A money eyes emoji"></span>
<span class="Emoji Emoji--ohno" title="An oh no emoji"></span>
<span class="Emoji Emoji--planeocean" title="A planeocean emoji"></span>
<span class="Emoji Emoji--planewatermelon" title="A planewatermelon emoji"></span>
<span class="Emoji Emoji--powpow" title="A powpow emoji"></span>
<span class="Emoji Emoji--redcar" title="A redcar emoji"></span>
<span class="Emoji Emoji--scooter" title="A scooter emoji"></span>
<span class="Emoji Emoji--sick" title="A sick emoji"></span>
<span class="Emoji Emoji--snoozy" title="An snoozy emoji"></span>
<span class="Emoji Emoji--snorkel" title="A snorkel emoji"></span>
<span class="Emoji Emoji--summer" title="A summer emoji"></span>
<span class="Emoji Emoji--tears" title="A teary emoji"></span>
<span class="Emoji Emoji--unhappy" title="An unhappy emoji"></span>
<span class="Emoji Emoji--usa" title="A usa emoji"></span>
<span class="Emoji Emoji--volcano" title="A volcano emoji"></span>
<span class="Emoji Emoji--wine" title="A wine emoji"></span>

Inline emoji's

Emoji's can be added inline to text elements. They will inherit the height of that text.

Capicola leberkas burgdoggen meatloaf

Swine cupim beef spare ribs ground round flank prosciutto

      <h1>Capicola leberkas burgdoggen meatloaf <span class="Emoji Emoji--ambulance" title="An ambulance emoji"></span></h1>
<p>Swine cupim beef spare ribs ground round flank prosciutto <span class="Emoji Emoji--asia" title="A pilot emoji"></span></p>
    

Emoji sizes

You can specify the size of an emoji when it's not being used within a text element.

    
      <span class="Emoji Emoji--lg Emoji--aloha" title="An aloha emoji"></span>
<span class="Emoji Emoji--xlg Emoji--pilot" title="A pilot emoji"></span>
<span class="Emoji Emoji--xxlg Emoji--medical" title="A medical emoji"></span>
<span class="Emoji Emoji--xxxlg Emoji--cry" title="A crying emoji"></span>

Graphic icons

The Graphic is designed to be paired with inline svg illustration elements.

    


      <span class="Graphic Graphic--burger" title="Burger icon"></span>
<span class="Graphic Graphic--deskbell" title="Desk bell icon"></span>
<span class="Graphic Graphic--lovehands" title="Shaking hands icon"></span>
<span class="Graphic Graphic--megaphone" title="Megaphone icon"></span>
<span class="Graphic Graphic--rocket" title="Rocket icon"></span>
<span class="Graphic Graphic--worldtravel" title="Airplane around earth icon"></span>
<span class="Graphic Graphic--contact" title="Contact us icon"></span>
<span class="Graphic Graphic--amt" title="Amt icon"></span>
<span class="Graphic Graphic--basics" title="Basics icon"></span>
<span class="Graphic Graphic--domestic" title="Domestic icon"></span>
<span class="Graphic Graphic--works" title="Works icon"></span>
<span class="Graphic Graphic--cruise" title="Cruise icon"></span>
<span class="Graphic Graphic--medical" title="Medical icon"></span>
<span class="Graphic Graphic--luggage" title="Luggage icon"></span>
<span class="Graphic Graphic--alcohol" title="Alcohol icon"></span>
<span class="Graphic Graphic--cancellation" title="Cancellation icon"></span>
<span class="Graphic Graphic--children" title="Children icon"></span>
<span class="Graphic Graphic--delay" title="Delay icon"></span>
<span class="Graphic Graphic--dontcover" title="Dont Cover icon"></span>
<span class="Graphic Graphic--evacuation" title="Evacuation us icon"></span>
<span class="Graphic Graphic--event" title="Event icon"></span>
<span class="Graphic Graphic--ignorewarnings" title="Ignoring Warnings icon"></span>
<span class="Graphic Graphic--motorbike" title="Motorbike icon"></span>
<span class="Graphic Graphic--sportsactivities" title="Sports Activities icon"></span>
<span class="Graphic Graphic--stds" title="STDs icon"></span>
<span class="Graphic Graphic--tech" title="Tech icon"></span>
<span class="Graphic Graphic--vehicle" title="Vehicle icon"></span>
<span class="Graphic Graphic--wreckless" title="Wreckless icon"></span>
<span class="Graphic Graphic--facemask" title="Facemask icon"></span>
<div class="Callout Callout--light">

    <span class="Graphic Graphic--circle Graphic--burger" title="Burger icon"></span>

</div>
    

Icons

To add new icons to the set:

Generate SVG with artboard 16px square
Flatten and outline elements as much as possible, do not use any masks
Ensure the icon is scaled so that it's largest dimension is 16px, center it within the artboard
Export the svg to wng-frontend/src/tid/svg/icons/
Remove any styling properties from the SVG, add fill="currentColor" to any path elements
SVG file name should semantic and camelCase
Add the icon the this documentation

    
      <svg class="Icon" title="arrow down icon" role="img">
    <use xlink:href="#arrowDown"></use>
</svg>
<svg class="Icon" title="arrow left icon" role="img">
    <use xlink:href="#arrowLeft"></use>
</svg>
<svg class="Icon" title="arrow right icon" role="img">
    <use xlink:href="#arrowRight"></use>
</svg>
<svg class="Icon" title="arrow up icon" role="img">
    <use xlink:href="#arrowUp"></use>
</svg>
<svg class="Icon" title="attention icon" role="img">
    <use xlink:href="#attention"></use>
</svg>
<svg class="Icon" title="burger icon" role="img">
    <use xlink:href="#burger"></use>
</svg>
<svg class="Icon" title="menu icon" role="img">
    <use xlink:href="#menu"></use>
</svg>
<svg class="Icon" title="calendar icon" role="img">
    <use xlink:href="#calendar"></use>
</svg>
<svg class="Icon" title="call icon" role="img">
    <use xlink:href="#call"></use>
</svg>
<svg class="Icon" title="case icon" role="img">
    <use xlink:href="#case"></use>
</svg>
<svg class="Icon" title="check icon" role="img">
    <use xlink:href="#check"></use>
</svg>
<svg class="Icon" title="close icon" role="img">
    <use xlink:href="#close"></use>
</svg>
<svg class="Icon" title="cvvAmex icon" role="img">
    <use xlink:href="#cvvAmex"></use>
</svg>
<svg class="Icon" title="cvvVisa icon" role="img">
    <use xlink:href="#cvvVisa"></use>
</svg>
<svg class="Icon" title="download icon" role="img">
    <use xlink:href="#download"></use>
</svg>
<svg class="Icon" title="edit icon" role="img">
    <use xlink:href="#edit"></use>
</svg>
<svg class="Icon" title="email icon" role="img">
    <use xlink:href="#email"></use>
</svg>
<svg class="Icon" title="user icon" role="img">
    <use xlink:href="#user"></use>
</svg>
<svg class="Icon" title="help icon" role="img">
    <use xlink:href="#help"></use>
</svg>
<svg class="Icon" title="info icon" role="img">
    <use xlink:href="#info"></use>
</svg>
<svg class="Icon" title="location icon" role="img">
    <use xlink:href="#location"></use>
</svg>
<svg class="Icon" title="minus icon" role="img">
    <use xlink:href="#minus"></use>
</svg>
<svg class="Icon" title="overflow icon" role="img">
    <use xlink:href="#overflow"></use>
</svg>
<svg class="Icon" title="padlock icon" role="img">
    <use xlink:href="#padlock"></use>
</svg>
<svg class="Icon" title="phone icon" role="img">
    <use xlink:href="#phone"></use>
</svg>
<svg class="Icon" title="plus icon" role="img">
    <use xlink:href="#plus"></use>
</svg>
<svg class="Icon" title="share icon" role="img">
    <use xlink:href="#share"></use>
</svg>
<svg class="Icon" title="facebook icon" role="img">
    <use xlink:href="#facebook"></use>
</svg>
<svg class="Icon" title="Twitter icon" role="img">
    <use xlink:href="#twitter"></use>
</svg>
<svg class="Icon" title="Google+ icon" role="img">
    <use xlink:href="#google-plus"></use>
</svg>
<svg class="Icon" title="Instagram icon" role="img">
    <use xlink:href="#instagram"></use>
</svg>
<svg class="Icon" title="YouTube icon" role="img">
    <use xlink:href="#youtube"></use>
</svg>
<svg class="Icon" title="Logo icon" role="img">
    <use xlink:href="#logo"></use>
</svg>

Icon Sizes

Icon sizes align to the font size variables.

Notes: - If a size sub-module is ommitted, the icon size will be relative to it's parent container (1em).

    
      <svg class="Icon" title="calendar icon" role="img">
    <use xlink:href="#calendar"></use>
</svg>
<svg class="Icon Icon--lg" title="calendar icon" role="img">
    <use xlink:href="#calendar"></use>
</svg>
<svg class="Icon Icon--xl" title="calendar icon" role="img">
    <use xlink:href="#calendar"></use>
</svg>
<svg class="Icon Icon--xxl" title="calendar icon" role="img">
    <use xlink:href="#calendar"></use>
</svg>
<svg class="Icon Icon--xxxl" title="calendar icon" role="img">
    <use xlink:href="#calendar"></use>
</svg>

Circular icons

Any icon can be converted to a circular icon by using the --circle sub-module.

    
      <svg class="Icon Icon--circle" title="calendar icon" role="img">
    <use xlink:href="#calendar"></use>
</svg>
<svg class="Icon Icon--circle Icon--lg" title="case icon" role="img">
    <use xlink:href="#case"></use>
</svg>
<svg class="Icon Icon--circle Icon--xl" title="close icon" role="img">
    <use xlink:href="#close"></use>
</svg>
<svg class="Icon Icon--circle Icon--xxl" title="edit icon" role="img">
    <use xlink:href="#help"></use>
</svg>
<svg class="Icon Icon--circle Icon--xxxl" title="email icon" role="img">
    <use xlink:href="#info"></use>
</svg>

Brand icon colours

Icons will inherit the color property of their parent via currentColor. Otherwise they must use one of the following colour sub-modules.

    
      <div class="Callout section">

    <svg class="Icon" title="close icon" role="img">
        <use xlink:href="#close"></use>
    </svg>
    <svg class="Icon Icon--light" title="edit icon" role="img">
        <use xlink:href="#edit"></use>
    </svg>
    <svg class="Icon Icon--error" title="help icon" role="img">
        <use xlink:href="#help"></use>
    </svg>
    <svg class="Icon Icon--success" title="info icon" role="img">
        <use xlink:href="#info"></use>
    </svg>

    <svg class="Icon Icon--circle" title="close icon" role="img">
        <use xlink:href="#close"></use>
    </svg>
    <svg class="Icon Icon--circle Icon--light" title="edit icon" role="img">
        <use xlink:href="#edit"></use>
    </svg>
    <svg class="Icon Icon--circle Icon--error" title="help icon" role="img">
        <use xlink:href="#help"></use>
    </svg>
    <svg class="Icon Icon--circle Icon--success" title="info icon" role="img">
        <use xlink:href="#info"></use>
    </svg>

</div>
<div class="Callout Callout--primary">
    <!-- Callout used for display online -->

    <svg class="Icon Icon--reverse" title="email icon" role="img">
        <use xlink:href="#email"></use>
    </svg>

    <svg class="Icon Icon--circle Icon--reverse" title="email icon" role="img">
        <use xlink:href="#email"></use>
    </svg>

</div>

Pagination

The pagination component is implemented based on the markup specified in the Pager component HTML in the SMACSS Orchard theme.

        <<
<
2
3
4
5
6
>
>>

    

      <div class="Pagination Pagination--center">
        <ul class="Pagination-inner">
            <li><a href="#" class="Pagination-first">&lt;&lt;</a></li>
            <li><a href="#" class="Pagination-previous">&lt;</a></li>
            <li><span class="Pagination-ellipsis"></span></li>
            <li><a href="#">2</a></li>
            <li><a href="#">3</a></li>
            <li><span class="Pagination-current">4</span></li>
            <li><a href="#">5</a></li>
            <li><a href="#">6</a></li>
            <li><span class="Pagination-ellipsis"></span></li>
            <li><a href="#" class="Pagination-next">&gt;</a></li>
            <li><a href="#" class="Pagination-last">&gt;&gt;</a></li>
        </ul>
    </div>
    

Review Rating

The customer review rating is intended to increase user trust in TID.

Note: this module is currently static

        
      <!-- Callouts and sections used for display purposes -->
<div class="section">

    <div class="ReviewRating" title="Customer review star rating">
        <span class="ReviewRating-stars"></span>
        <span class="ReviewRating-label"></span>
    </div>

</div>
<div class="Callout Callout--light">

    <div class="ReviewRating ReviewRating--reverse" title="Customer review star rating">
        <span class="ReviewRating-stars"></span>
        <span class="ReviewRating-label"></span>
    </div>

</div>

Typography

All font sizes, line-heights, margins, etc. are defined as global base styles. Under no exceptions should these be overridden.

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Paragraph: Austin adaptogen prism yuccie 90's schlitz sriracha. Authentic paleo tofu health goth, wayfarers artisan gentrify truffaut dreamcatcher freegan irony photo booth la croix everyday carry. Taiyaki chia gochujang, palo santo vaporware whatever green juice. Chia authentic offal jianbing, kickstarter bushwick echo park shoreditch quinoa air plant la croix palo santo tilde la croix everyday carry.

Fineprint: Ennui fam farm-to-table typewriter af photo booth tote bag edison bulb flexitarian trust fund thundercats +1. Godard etsy banh mi, pork belly bespoke slow-carb pok pok.

      <h1>Heading One</h1>

<h2>Heading Two</h2>

<h3>Heading Three</h3>

<h4>Heading Four</h4>

<h5>Heading Five</h5>

<p><strong>Paragraph:</strong> Austin adaptogen prism yuccie 90's schlitz sriracha. Authentic paleo tofu health goth, wayfarers artisan gentrify truffaut dreamcatcher freegan irony photo booth <a href="">la croix everyday carry</a>. Taiyaki chia gochujang, palo santo vaporware whatever green juice. Chia authentic offal jianbing, kickstarter bushwick echo park shoreditch quinoa air plant la croix palo santo tilde <a href="" class="fine">la croix everyday carry</a>.</p>

<small class="fineprint">Fineprint: Ennui fam farm-to-table typewriter af photo booth tote bag edison bulb flexitarian trust fund thundercats +1. Godard etsy banh mi, pork belly bespoke slow-carb pok pok.</small>

Apply heading styles via classes

There are occasions where you may wish to style elements as headings, but with less semantic element like spans.

This is a span that looks like an h1

This is a paragraph that looks like an h3

      <span class="heading-1">This is a span that looks like an h1</span>

<p class="heading-3">This is a paragraph that looks like an h3</p>

Heading groups

There are occasions where you may wish to style elements as headings, but with less semantic element like spans.

    Heading One
    with a continuation of the heading

    Heading One
    A subgroup of the heading.

      <h1>
    Heading One
    <span class="heading-subgroup">with a continuation of the heading</span>
</h1>

<div class="heading-1-group">
    <h1>Heading One</h1>
    <span class="heading-subgroup">A subgroup of the heading.</span>
</div>
    

Underwriter Logo

TID's underwriters logo

    
      <!-- Callouts and sections used for display purposes -->
<span class="Underwriter Underwriter--axa-black" title="Underwritten by XL Insurance Company"></span>

<div class="Callout Callout--dark">

    <span class="Underwriter Underwriter--axa-white" title="Underwritten by XL Insurance Company"></span>

</div>

<span class="Underwriter-logo" title="Lloyd's logo"></span>

Design

Brand Logo

Callouts

Split Callouts

Callout with header section

Callout with header section

Split callout

Or combine them all

Split callout

Colours

Emoji

Inline emoji's

Capicola leberkas burgdoggen meatloaf

Emoji sizes

Graphic icons

Icons

Icon Sizes

Circular icons

Brand icon colours

Review Rating

Tags

Typography

Heading One

Heading Two

Heading Three

Heading Four

Heading Five

Apply heading styles via classes

Heading groups

Heading One with a continuation of the heading

Heading One

Underwriter Logo