Accordion

The accordion is used for FAQ sections.

Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund mumblecore 90's cred wayfarers.

Migas VHS schlitz lumbersexual ramps. Tousled hoodie cold-pressed poke, cloud bread roof party kale chips la croix try-hard.

<div class="Accordion">
    <button class="Accordion-top">
        Ramps hammock selfies, trust fund vaporware dreamcatcher deep v austin poke disrupt?
        <div>
            <svg class="Icon spin" title="plus icon" role="img" accordion-plus="">
                <use xlink:href="#plus"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="minus icon" role="img" accordion-minus="">
                <use xlink:href="#minus"></use>
            </svg>
        </div>
    </button>
    <div class="Accordion-bottom is-slide-closed">
        <p class="Accordion-bottom-text">Sartorial post-ironic mumblecore single-origin coffee. Chicharrones godard dreamcatcher trust fund
        mumblecore 90's cred wayfarers.</p>
    </div>
</div>
<div class="Accordion">
    <button class="Accordion-top">
        Coloring book la croix iPhone forage hoodie. Kinfolk bitters migas snackwave vegan butcher?
        <div>
            <svg class="Icon spin" title="plus icon" role="img" accordion-plus>
                <use xlink:href="#plus"></use>
            </svg>
            <svg class="Icon is-hidden spin" title="minus icon" role="img" accordion-minus>
                <use xlink:href="#minus"></use>
            </svg>
        </div>
    </button>
    <div class="Accordion-bottom is-slide-closed">
        <p class="Accordion-bottom-text">Migas VHS schlitz lumbersexual ramps. Tousled hoodie cold-pressed poke, cloud bread roof party kale chips
            la croix try-hard.</p>
    </div>
</div>

Alerts

Alerts are used to call users attention to specific information via increased visual hierarchy.

Note:

  • Headings are optional
  • sections are used for Style Guide presentation purposes

Lorem ipsum dolor amet bitters tbh +1 mlkshk, single-origin coffee four loko hoodie ethical shaman.

Error

Trust fund quinoa +1 kombucha poke chicharrones twee tumeric man bun. Intelligentsia tattooed artisan, typewriter tote bag gochujang roof party YOLO.

Health goth schlitz knausgaard tousled fashion axe lomo poke keffiyeh. Banh mi tumeric deep v letterpress butcher raw denim beard, pinterest tilde waistcoat messenger bag ennui iceland snackwave.

Success

Mumblecore kickstarter kale chips vaporware literally lo-fi tousled irony.

Info

Lyft thundercats viral, knausgaard street art venmo vegan migas tumeric hella food truck bushwick.

<div class="section">

    <div class="Alert">
        <p>Lorem ipsum dolor amet bitters tbh +1 mlkshk, single-origin coffee four loko <a href="">hoodie ethical shaman</a>.</p>
    </div>

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

    <div class="Alert Alert--error">
        <span class="Alert-title">Error</span>
        <p>Trust fund quinoa +1 <a href="">kombucha poke chicharrones</a> twee tumeric man bun. Intelligentsia tattooed artisan, typewriter tote bag gochujang roof party YOLO.</p>
        <p>Health goth schlitz knausgaard tousled fashion axe lomo poke keffiyeh. Banh mi tumeric deep v letterpress butcher raw denim beard, pinterest tilde waistcoat messenger bag ennui iceland snackwave.</p>
    </div>

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

    <div class="Alert Alert--success">
        <span class="Alert-title">Success</span>
        <p>Mumblecore kickstarter <a href="">kale chips</a> vaporware literally lo-fi tousled irony.</p>
    </div>

</div>

<div class="Alert Alert--info">
    <span class="Alert-title">Info</span>
    <p>Lyft thundercats viral, knausgaard street art venmo vegan migas tumeric <a href="">hella food truck</a> bushwick.</p>
</div>

Banner

Banners are used at the top of a page for promotional purposes. These are distinctly different from Notifications which are not used in promotional or marketing context.

The Banner module must be placed immediately after the sites primary header and before the pageContainer.

<!-- Default Banner -->
<header class="Navbar">  <!-- Site Primary Header -->
    <nav class="Navbar-nav" role="navigation" aria-label="main navigation" data-navbar>
        <div class="Navbar-brand">
            <a class="Navbar-item BrandLogo BrandLogo--responsive" href="/" title="Travel Insurance Direct">
            </a>
            <button class="Navbar-toggle" aria-label="menu" aria-expanded="false" data-navbar-toggle>
                <div class="Navbar-icon"></div>
            </button>
        </div>
    </nav>
</header>
<aside class="Banner">
    <div class="container">
        <strong>Promotion or announcement:</strong> all of January
    </div>
</aside>
<main class="pageContainer"> <!-- pageContainer element -->
</main>

<!-- Script to demonstrate the Countdown Banner (not for PRODUCTION!) -->
<script type="text/javascript">
  var yesterday = new Date(new Date(new Date().setDate(new Date().getDate() - 1)).setHours(0,0,0,0));
  var tomorrow = new Date(new Date(new Date().setDate(new Date().getDate() + 1)).setHours(0,0,0,0));
  var tid = { flashsale: { start: yesterday, end: tomorrow, discount: 12, code: "FLASH0419" } };
  window.tid = tid;
</script>

<!-- Attention Banner -->
<header class="Navbar">  <!-- Site Primary Header -->
    <nav class="Navbar-nav" role="navigation" aria-label="main navigation" data-navbar>
        <div class="Navbar-brand">
            <a class="Navbar-item BrandLogo BrandLogo--responsive" href="/" title="Travel Insurance Direct">
            </a>
            <button class="Navbar-toggle" aria-label="menu" aria-expanded="false" data-navbar-toggle>
                <div class="Navbar-icon"></div>
            </button>
        </div>
    </nav>
</header>
<aside class="Banner Banner--attention" data-banner>
    <div class="container" data-banner-statement>
        <strong><span data-discount></span>% off*</strong> Offer ends in:
        <span class="Banner-countdown">
            <span data-hours></span>:<span data-minutes></span>:<span data-seconds></span>
        </span>
    </div>
</aside>
<main class="pageContainer"> <!-- pageContainer element -->
</main>

Bread Crumbs

<ul itemtype="http://schema.org/BreadcrumbList" class="Breadcrumb">
    <li class="Breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/">
            <span itemprop="name">TID</span>
        </a>
    </li>
    <li class="Breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/">
            <span itemprop="name">Get a quote</span>
        </a>
    </li>
</ul>

<div class="section">
    <div class="Callout Callout--dark Callout--reverse">
        <ul itemtype="http://schema.org/BreadcrumbList" class="Breadcrumb--reverse">
            <li class="Breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                <a itemprop="item" href="/">
                    <span itemprop="name">TID</span>
                </a>
            </li>
            <li class="Breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
                <a itemprop="item" href="/">
                    <span itemprop="name">Get a quote</span>
                </a>
            </li>
        </ul>
    </div>
</div>

<ul itemtype="http://schema.org/BreadcrumbList" class="Breadcrumb Breadcrumb--center">
    <li class="Breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/">
            <span itemprop="name">TID</span>
        </a>
    </li>
    <li class="Breadcrumb-item" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem">
        <a itemprop="item" href="/">
            <span itemprop="name">Get a quote</span>
        </a>
    </li>
</ul>

Caption Cards

Caption Cards are a fantastic way to structure multiple elements on a page. The cards adhere to a five column grid and come in 4 different sizes that stack vertically on smaller screens.

Caption

Lo-fi heirloom thundercats forage AF swag

Letterpress woke twee cornhole salvia fingerstache succulents prism occupy.

Beer me

Caption

Lo-fi heirloom thundercats forage AF swag

Letterpress woke twee cornhole salvia fingerstache succulents prism occupy.

Beer me

Caption

Lo-fi heirloom thundercats forage AF swag

Letterpress woke twee cornhole salvia fingerstache succulents prism occupy.

Beer me

Caption

Lo-fi heirloom thundercats forage AF swag

Letterpress woke twee cornhole salvia fingerstache succulents prism occupy.

Beer me 
<div class="CaptionCard spacer-item">
    <picture class="CaptionCard-left">
        <img class="CaptionCard-photo" src="https://picsum.photos/600/300/?image=500">
    </picture>
    <div class="CaptionCard-right">
        <p class="CaptionCard-categoryLabel">Caption</p>
        <p class="CaptionCard-categoryHeading">Lo-fi heirloom thundercats forage AF swag</p>
        <p>Letterpress woke twee cornhole salvia fingerstache succulents prism occupy.</p>
        <a class="Btn Btn--primary Btn--sm">Beer me</a>
    </div>
</div>

<div class="CaptionCard CaptionCard--half spacer-item">
    <picture class="CaptionCard-left">
        <img class="CaptionCard-photo" src="https://picsum.photos/600/300/?image=490">
    </picture>
    <div class="CaptionCard-right">
        <p class="CaptionCard-categoryLabel">Caption</p>
        <p class="CaptionCard-categoryHeading">Lo-fi heirloom thundercats forage AF swag</p>
        <p>Letterpress woke twee cornhole salvia fingerstache succulents prism occupy.</p>
        <a class="Btn Btn--primary Btn--sm">Beer me</a>
    </div>
</div>

<div class="CaptionCard spacer-item">
    <picture class="CaptionCard-left">
        <img class="CaptionCard-photo" src="https://picsum.photos/700/300/?image=501">
    </picture>
    <div class="CaptionCard-right">
        <p class="CaptionCard-categoryLabel">Caption</p>
        <p class="CaptionCard-categoryHeading">Lo-fi heirloom thundercats forage AF swag</p>
        <p>Letterpress woke twee cornhole salvia fingerstache succulents prism occupy.</p>
        <a class="Btn Btn--primary Btn--sm">Beer me</a>
    </div>
</div>

<div class="CaptionCard CaptionCard--invert spacer-item">
    <picture class="CaptionCard-left">
        <img class="CaptionCard-photo" src="https://picsum.photos/600/300/?image=510">
    </picture>
    <div class="CaptionCard-right">
        <p class="CaptionCard-categoryLabel">Caption</p>
        <p class="CaptionCard-categoryHeading">Lo-fi heirloom thundercats forage AF swag</p>
        <p>Letterpress woke twee cornhole salvia fingerstache succulents prism occupy.</p>
        <a class="Btn Btn--primary Btn--sm">Beer me</a>
    </div>
</div>

Cards

Cards are interactive and are used to visually section products and services features. The cards may contain a combination of icon, text and call to action.

Pick a plan.

Biltong shank jowl pastrami shankle bacon swine hamburger salami.

Learn more 
<div class="Card">
    <span class="Graphic Graphic--burger spacer-media" title="Burger icon"></span>
    <h3>Pick a plan.</h3>
    <p>Biltong shank jowl pastrami shankle bacon swine hamburger salami.</p>
    <a href="" class="TypeBtn TypeBtn--anchor TypeBtn--inline" alt="Click here to choose your plan">Learn more</a>
</div>

Feature Cards with Tick

Get extra cover.

Spare ribs kevin strip steak burgdoggen pork pancetta sausage tenderloin short loin

Learn more 
<div class="Card Card--tick">
    <span class="Graphic Graphic--rocket spacer-media" title="Rocket icon"></span>
    <h3>Get extra cover.</h3>
    <p>Spare ribs kevin strip steak burgdoggen pork pancetta sausage tenderloin short loin</p>
    <a href="" class="TypeBtn TypeBtn--anchor TypeBtn--inline" alt="Learn more about our Extra Cover">Learn more</a>
</div>

Feature Cards Left Aligned

Am I covered if...?

View All 
<div class="Card Card--left Card--tick">
<h4>Am I covered if...?</h4>
        <ul class="List List--none">
            <li><a href class="fine">Biltong shank jowl pastrami</a></li>
            <li><a href class="fine">Shankle bacon swine</a></li>
            <li><a href class="fine">Hamburger salam</a></li>
            <li><a href class="fine">Spare ribs</a></li>
            <li><a href class="fine">Sausage tenderloin</a></li>
        </ul>
    <a href class="TypeBtn TypeBtn--anchor TypeBtn--inline" alt="Click here to view more articles">View All</a>
</div>

Interactive State

Mouse over the card

Emergency Assitance.

Filet mignon drumstick prosciutto biltong. Corned beef leberkas pork tri-tip.

 
<a href="#" class="Card Card--tick Card--touch" alt="Learn more about our Emergency Assistance">
    <span class="Graphic Graphic--deskbell spacer-media" title="Desk bell icon"></span>
    <h3>Emergency Assitance.</h3>
    <p>Filet mignon drumstick prosciutto biltong. Corned beef leberkas pork tri-tip.</p>
</a>

Footer Bar

see details $86.00 
<div class="FooterBar">
  <div class="FooterBar-content">
    <a class="TypeBtn TypeBtn--reverse">see details</a>
    <span class="FooterBar-text">$86.00</span>
  </div>
</div>

Lists

No explanation necessary.

  • Umami lo-fi kickstarter green juice adaptogen.
  • Post-ironic jean shorts mlkshk crucifix pug cardigan cold-pressed.
  • Pour-over intelligentsia venmo, blog iceland fanny pack fam mixtape mumblecore vaporware you probably haven't heard of them.
  1. Pinterest marfa hoodie, pour-over williamsburg polaroid palo santo chia small batch.
  2. Pabst locavore bushwick mustache enamel pin kogi irony microdosing affogato.
  3. Ramps photo booth four dollar toast vaporware skateboard.
  • Umami lo-fi kickstarter green juice adaptogen.
  • Post-ironic jean shorts mlkshk crucifix pug cardigan cold-pressed.
  • Pour-over intelligentsia venmo, blog iceland fanny pack fam mixtape mumblecore vaporware you probably haven't heard of them.
<ul class="List">
    <li>Umami lo-fi kickstarter green juice adaptogen.</li>
    <li>Post-ironic jean shorts mlkshk crucifix pug cardigan cold-pressed.</li>
    <li>Pour-over intelligentsia venmo, blog iceland fanny pack fam mixtape mumblecore vaporware you probably haven't heard of them.</li>
</ul>

<ol class="List">
    <li>Pinterest marfa hoodie, pour-over williamsburg polaroid palo santo chia small batch.</li>
    <li>Pabst locavore bushwick mustache enamel pin kogi irony microdosing affogato.</li>
    <li>Ramps photo booth four dollar toast vaporware skateboard.</li>
</ol>

<ul class="List List--none">
    <li>Umami lo-fi kickstarter green juice adaptogen.</li>
    <li>Post-ironic jean shorts mlkshk crucifix pug cardigan cold-pressed.</li>
    <li>Pour-over intelligentsia venmo, blog iceland fanny pack fam mixtape mumblecore vaporware you probably haven't heard of them.</li>
</ul>

Description List

Learn about dl's: HTML dl

Travellers name
Raoul Duke
Travellers email
[email protected]
Travellers name
Raoul Duke
Travellers email
[email protected]
Travellers name
Raoul Duke
Travellers email
[email protected]
<dl class="DList">
    <div class="DList-row">
        <dt>Travellers name</dt>
        <dd>Raoul Duke</dd>
    </div>
    <div class="DList-row">
        <dt>Travellers email</dt>
        <dd>[email protected]</dd>
    </div>
</dl>

<dl class="DList DList--alt">
    <div class="DList-row">
        <dt>Travellers name</dt>
        <dd>Raoul Duke</dd>
    </div>
    <div class="DList-row">
        <dt>Travellers email</dt>
        <dd>[email protected]</dd>
    </div>
</dl>

<dl class="DList DList--stacked">
    <div class="DList-row">
        <dt>Travellers name</dt>
        <dd>Raoul Duke</dd>
    </div>
    <div class="DList-row">
        <dt>Travellers email</dt>
        <dd>[email protected]</dd>
    </div>
</dl>

Loader

There is some text here

There was some text here

There is some text here

There was some text here

<h1>There is some text here</h1>
<h1 class="Loader">There was some text here</h1>
<p>There is some text here</p>
<p class="Loader">There was some text here</p>
<div>
    <button class="Btn">There is some text here</button>
    <button class="Btn Loader">There was some text here</button>
    <svg class="Loader" title="logo" role="img">
        <use xlink:href="#logo"></use>
    </svg>
</div>
<div>
    <button class="Btn Btn--secondary">There is some text here</button>
    <button class="Btn Btn--secondary Loader">There was some text here</button>
</div>

Notifications

Notifications are used to communicate announcements with greater visual impact than an inline alert. These should be used sparingly.

Notes:

  • Individual notifications should be injected within a shared parent that has the NotificationWrapper class.
  • This implementation is for demonstrations purposes only.
<button class="Btn Btn--spaced" id="notification-info">Show info</button>
<button class="Btn Btn--spaced" id="notification-success">Show success</button>
<button class="Btn Btn--spaced" id="notification-error">Show error</button>
<button class="Btn Btn--spaced" id="notification-attention">Show attention</button>

<!-- Inject Notifications here -->
<div class="NotificationWrapper"></div>

<script type="text/javascript">
    $('#notification-info').click(function(){
        var notificationInfo = `
            <div class="Notification Notification--info" data-notification>
                <button class="Notification-close IconBtn">
                    <svg class="Icon Icon--circle Icon--xlg" title="close icon" role="img">
                        <use xlink:href="#close"></use>
                    </svg>
                </button>
                Yr kale chips PBR&B, 90\'s jean shorts put a bird on it chillwave locavore hell of unicorn selfies.
            </div>
        `
        $('.NotificationWrapper').append(notificationInfo);
    });

    $('#notification-success').click(function(){
        var notificationSuccess = `
            <div class="Notification Notification--success" data-notification>
                <button class="Notification-close IconBtn">
                    <svg class="Icon Icon--circle Icon--xlg" title="close icon" role="img">
                        <use xlink:href="#close"></use>
                    </svg>
                </button>
                8-bit readymade cloud bread biodiesel direct trade synth waistcoat street art cornhole chambray messenger bag. Retro coloring book pork belly, lyft semiotics leggings ennui photo booth wolf pour-over salvia intelligentsia.
            </div>
        `
        $('.NotificationWrapper').append(notificationSuccess);
    });

    $('#notification-error').click(function(){
        var notificationError = `
            <div class="Notification Notification--error" data-notification>
                <button class="Notification-close IconBtn">
                    <svg class="Icon Icon--circle Icon--xlg" title="close icon" role="img">
                        <use xlink:href="#close"></use>
                    </svg>
                </button>
                Ugh kombucha lomo, copper.
            </div>
        `
        $('.NotificationWrapper').append(notificationError);
    });

    $('#notification-attention').click(function(){
        var notificationError = `
            <div class="Notification Notification--attention" data-notification>
                <button class="Notification-close IconBtn">
                    <svg class="Icon Icon--circle Icon--xlg" title="close icon" role="img">
                        <use xlink:href="#close"></use>
                    </svg>
                </button>
                Ugh kombucha lomo, copper mug palo santo leggings 3 wolf moon keytar sustainable post-ironic umami vexillologist semiotics.
            </div>
        `
        $('.NotificationWrapper').append(notificationError);
    });

</script>

Page Progress

The Page Progress module is used to denote the progress of a user across multiple views, typically for multi-page forms.

  1. Choose plan
  2. Customise
  3. Travellers
  4. Payment
<ol class="PgProgress">
    <li class="PgProgress-is-active">Choose plan</li>
    <li class="PgProgress-is-active">Customise</li>
    <li>Travellers</li>
    <li>Payment</li>
</ol>

Pill

The Pill module. Typically used in the country selector.

New Zealand Niger Nicaragua 
<span class="Pill">
    New Zealand
</span>
<span class="Pill Pill--primary">
    Niger
</span>
<span class="Pill Pill--secondary">
    Nicaragua
</span>

button pill elements will have a hover shadow:

<button class="Pill Pill--primary">
    <span class="Pill-label">Sweden</span>
    <span class="Pill-close"></span>
</button>
<button class="Pill Pill--secondary">
    <span class="Pill-label">Croatia</span>
    <span class="Pill-close"></span>
</button>

Price Total

Price Total is used for all instances where the total price or a change to price needs to be displayed.

Total price $164.00
Sub-total $16.00
Discounted total $164.00 10% Discount
$24.00 Limited offer
$24.00 
<div class="PriceTotal">
    <span class="PriceTotal-label">Total price</span>
    <span class="PriceTotal-amount">$164.00</span>
</div>

<div class="PriceTotal PriceTotal--sm">
    <span class="PriceTotal-label">Sub-total</span>
    <span class="PriceTotal-amount">$16.00</span>
</div>

<div class="PriceTotal">
    <span class="PriceTotal-label">Discounted total</span>
    <span class="PriceTotal-amount">$164.00</span>
    <span class="PriceTotal-tag Tag Tag--alt Tag--attention">10% Discount</span>
</div>

<div class="PriceTotal PriceTotal--sm">
    <span class="PriceTotal-amount">$24.00</span>
    <span class="PriceTotal-tag Tag Tag--alt">Limited offer</span>
</div>

<div class="PriceTotal PriceTotal--sm">
    <svg class="Icon Icon--lg" title="plus icon" role="img">
        <use xlink:href="#plus"></use>
    </svg>
    <span class="PriceTotal-amount">$24.00</span>
</div>

Table

Tables are used to display data.

The Comparison Table is used to convey a relationship between 2 or more items represented by row and column headings. In mobile, there would be a previous and next button to navigate through the columns.

Col-1 Col-2 Col-3
Row-1 col-1 row-1 col-2 row-1 col-3 row-1
Row-2 col-1 row-2 col-2 row-2 col-3 row-2
Row-3 col-1 row-3 col-2 row-3 col-3 row-3
Comprehensive Overseas Insurance (The Works) Budget Overseas Insurance (The Basics) Domestic Annual Multi-trip
Medical Expenses Overseas^ Unlimited $5,000,000 Not applicable Unlimited
Additional Expenses / Medical Evacuation Unlimited $500,000 Not applicable Unlimited
Cancellation Costs Unlimited $3,000 Not applicable Unlimited
Get a quote Get a quote Get a quote Get a quote
^Up to one year.
‡The Works, The Basics and Domestic plans only cover single trips. The Annual plan covers multi-trips if you travel as often as you like within a 12 month period, as long as each trip is no longer than 38 days. Sub-limits apply. This is a brief summary of cover only and does not include the full terms, conditions, limitations and exclusions. Please read our policy wording. 
<table class="Table">
  <thead>
    <tr>
      <th></th>
      <th>Col-1</th>
      <th>Col-2</th>
      <th>Col-3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Row-1</th>
      <td>col-1 row-1</td>
      <td>col-2 row-1</td>
      <td>col-3 row-1</td>
    </tr>
    <tr>
      <th>Row-2</th>
      <td>col-1 row-2</td>
      <td>col-2 row-2</td>
      <td>col-3 row-2</td>
    </tr>
    <tr>
      <th>Row-3</th>
      <td>col-1 row-3</td>
      <td>col-2 row-3</td>
      <td>col-3 row-3</td>
    </tr>
  </tbody>
</table>

<table class="Table Table--comparison" data-comparison-table>
  <thead>
    <tr class="Table-nav">
      <td data-is-shown data-table-nav>
        <button class="IconBtn IconBtn-prev Icon--text" data-prev-btn>
          <svg class="Icon Icon--circle Icon--lg Icon--text" title="close icon" role="img">
            <use xlink:href="#arrowLeft"></use>
          </svg>
          <div>PREV</div>
        </button>
      </td>
    </tr>
    <tr>
      <td>
      </td>
      <th>Comprehensive Overseas Insurance (The Works)</th>
      <th>Budget Overseas Insurance (The Basics)</th>
      <th>Domestic</th>
      <th class="Table-is-highlighted">Annual Multi-trip</th>
    </tr>
    <tr class="Table-nav">
      <td data-is-shown data-table-nav>
        <button class="IconBtn IconBtn-next Icon--text" data-next-btn>
          <svg class="Icon Icon--circle Icon--lg" title="close icon" role="img">
            <use xlink:href="#arrowRight"></use>
          </svg>
          <div>NEXT</div>
        </button>
      </td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>Medical Expenses Overseas^</th>
      <td><svg class="Icon Icon--circle Icon--success spacer-media-right" title="check icon" role="img"><use xlink:href="#check"></use></svg>Unlimited</td>
      <td><svg class="Icon Icon--circle Icon--light spacer-media-right" title="close icon" role="img"> <use xlink:href="#close"></use> </svg>$5,000,000</td>
      <td><svg class="Icon Icon--circle Icon--success spacer-media-right" title="check icon" role="img"><use xlink:href="#check"></use></svg>Not applicable</td>
      <td><svg class="Icon Icon--circle Icon--success spacer-media-right" title="check icon" role="img"><use xlink:href="#check"></use></svg>Unlimited</td>
    </tr>
    <tr>
      <th>Additional Expenses / Medical Evacuation</th>
      <td><svg class="Icon Icon--circle Icon--success spacer-media-right" title="check icon" role="img"><use xlink:href="#check"></use></svg>Unlimited</td>
      <td><svg class="Icon Icon--circle Icon--success spacer-media-right" title="check icon" role="img"><use xlink:href="#check"></use></svg>$500,000</td>
      <td><svg class="Icon Icon--circle Icon--success spacer-media-right" title="check icon" role="img"><use xlink:href="#check"></use></svg>Not applicable</td>
      <td><svg class="Icon Icon--circle Icon--light spacer-media-right" title="close icon" role="img"> <use xlink:href="#close"></use> </svg>Unlimited</td>
    </tr>
    <tr>
      <th>Cancellation Costs</th>
      <td><svg class="Icon Icon--circle Icon--light spacer-media-right" title="close icon" role="img"> <use xlink:href="#close"></use> </svg>Unlimited</td>
      <td><svg class="Icon Icon--circle Icon--light spacer-media-right" title="close icon" role="img"> <use xlink:href="#close"></use> </svg>$3,000</td>
      <td><svg class="Icon Icon--circle Icon--light spacer-media-right" title="close icon" role="img"> <use xlink:href="#close"></use> </svg>Not applicable</td>
      <td><svg class="Icon Icon--circle Icon--light spacer-media-right" title="close icon" role="img"> <use xlink:href="#close"></use> </svg>Unlimited</td>
    </tr>
    <tfoot>
      <tr>
        <th></th>
        <td><a href="" class="Btn Btn--secondary Btn--sm">Get a quote</a></td>
        <td><a href="" class="Btn Btn--secondary Btn--sm">Get a quote</a></td>
        <td><a href="" class="Btn Btn--secondary Btn--sm">Get a quote</a></td>
        <td><a href="" class="Btn Btn--secondary Btn--sm">Get a quote</a></td>
      </tr>
      <tr>
        <td colspan="5" data-is-shown>
          <small class="fineprint">^Up to one year.<br>
          ‡The Works, The Basics and Domestic plans only cover single trips. The Annual plan
          covers multi-trips if you travel as often as you like within a 12 month period, as
          long as each trip is no longer than 38 days. Sub-limits apply. This is a brief summary
          of cover only and does not include the full terms, conditions, limitations and exclusions.
          Please read our policy wording.</small>
        </td>
      </tr>
    </tfoot>
  </tbody>
</table>

Warning

Warning are used to call users attention to specific information via increased visual hierarchy.

Note:

--message is the message section --title is the title for the message

It looks like you have already bought a policy for this trip.

Please check your inbox. You can view your policy in My Account. 
<div class="Warning">
    <svg class="Icon"
        title="attention icon" role="img">
            <use xlink:href="#attention"></use>
    </svg>

    <div class="Warning-message">
        <h3>It looks like you have already bought a policy for this trip.</h3>
        <div>
            Please check your inbox.
            <span *ngIf="isLoggedIn">You can view your policy in My Account.</span>
        </div>
    </div>
    <div class="Warning-footer">
            <button class="Btn Btn--primary Btn--sm"
                data-e2e="payment-back-to-homepage">Back to homepage</button>

            <button class="Btn Btn--secondary Btn--sm"
                data-e2e="payment-continue-purchase">Continue purchase</button>
    </div>
</div>