Alerts

Loading spinner

Loading …

<div class="d-flex align-items-center bold muted">
      <div class="spinner-border spinner-border-sm text-warning mr-2" role="status"><span class="sr-only">Loading...</span> </div>
      Loading … </div>

Error

Oh no!

Error Log:

{{value}}

<div class="p-4 mb-2 muted">
  <h5 class="text-danger d-flex align-items-center">
    <svg class="mr-1" width="16" height="16" fill="currentColor">
      <use xlink:href="/ResourcePackages/Bootstrap4/assets/dist/sprites/solid.svg#exclamation-triangle"></use>
    </svg>
    Oh no!</h5>
  <span class="small-expanded-uppercase">Error Log:</span>
  <ul>
    <li sc-for-each="contentError.messages">{{value}}</li>
  </ul>
</div>

Bootstrap alerts

You can utilize any of the background colors to build alert messages. We have updated our colors, you can review alerts here on Bootstrap.

A simple success alert with an example link. Give it a click if you like.

A simple warning alert with an example link. Give it a click if you like.

A simple info alert with an example link. Give it a click if you like.

A simple light alert with an example link. Give it a click if you like.

Well done!

Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.

Whenever you need to, be sure to use margin utilities to keep things nice and tidy.

Success example

<div class="alert bg-success text-white" role="alert">
  <svg class="mr-1 align-text-top" width="16" height="16" fill="currentColor">
    <title>Thumbs Up</title>
    <use xlink:href="/ResourcePackages/Bootstrap4/assets/dist/sprites/solid.svg#thumbs-up"></use>
  </svg>
  A simple success alert with <a href="#" class="text-white uline">an example link</a>. Give it a click if you like. </div>

Buttons

Buttons communicate what action will occur on a page when the user interacts with them. Buttons use sentence-casing (only capitalize the first letter of the first word). Copy used within a button should be unambiguous and concise, making it clear to the user what action will occur once the button is clicked.

Primary Button — ORANGE #F5852B

<button class="btn btn-primary">Primary</button>
<button class="btn btn-pill btn-primary">Primary Pill</button>

Secondary Button — #6c757d

<button class="btn btn-outline-secondary">Secondary</button>
<button class="btn btn-pill btn-outline-secondary">Secondary Pill</button>

Info Button – #49A8E5

<button class="btn btn-info">Information</button>
<button class="btn btn-pill btn-info">Information Pill</button>

Button Size

<button class="btn btn-primary btn-sm">Small</button>
<button class="btn btn-primary">Regular</button>    
<button class="btn btn-primary btn-lg">Large</button>

<button class="btn btn-pill btn-primary btn-sm">Small Pill</button> 
<button class="btn btn-pill btn-primary">Regular Pill</button> 
<button class="btn btn-pill btn-primary btn-lg">Large Pill</button>

Button Group

<div class="btn-group" role="group" aria-label="Button group">
<button type="button" class="btn btn-outline-secondary">Left</button> 
<button type="button" class="btn btn-outline-secondary">Middle</button> 
<button type="button" class="btn btn-outline-secondary">Right</button>
</div>

Icon Button

View available icons »

<button class="btn mb-1 btn-pill btn-info">
 <svg class="text-white align-text-top" style="transform:rotate(320deg);" width="16" height="16" fill="currentColor">
 <use xlink:href="/ResourcePackages/Bootstrap4/assets/dist/sprites/solid.svg#phone-volume"></use></svg>
  Call</button>

Cards

Cards provide nearly unlimited options to group and present content. Follow Boostrap's guidelines for creating cards. Below are some custom examples we use on the website.

Plan compare card

RoundTrip Choice

Our highest level of coverage with popular options that allow you to customize your plan.

$799.00

Includes CFAR

Buy Now

Download Full Policy

<div class="card card-plan">
   <div class="card-body">
        <h1 class="font-weight-light card-title">RoundTrip Choice</h1>
        <p class="card-text">Our highest level of coverage with popular options that allow you to customize your plan.</p>
        <p class="card-price">$799.00</p>
        <p class="card-text font-weight-light">Includes CFAR</p>
        <a href="#" class="btn btn-pill btn-primary mb-4" data-sf-ec-immutable="">Buy Now</a>
        <p>
          <svg class="mr-1 text-blue" width="18" height="18" fill="currentColor">
            <title>Select</title>
            <use xlink:href="/ResourcePackages/Bootstrap4/assets/dist/sprites/regular.svg#file"></use>
          </svg>
          <a href="#" class="uline" data-sf-ec-immutable="">Download Full Policy</a></p>
   </div>
</div>

Benefit type card

Trip Interruption Included interruption reasons

<div class="card card-type card-body"> <span class="card-text-benefit d-flex"> Trip Interruption <a data-toggle="popover" data-trigger="hover" data-html="true" data-content="  <p> If you must cut your trip short, start your trip late, rejoin your trip, or return from your trip late due to a Trip Interruption Covered Reason, this reimburses you for:</p>  <ol> <li> Your unused, prepaid, non-refundable trip expenses; and </li> <li> Additional transportation costs. </li> </ol> <ul class='small list-unstyled'> <li> <sup> 2</sup>  If you provide $0 as your trip cost, the Trip Interruption benefit covers return air ticket cost included up to $1,000per person.</ul> " data-sf-ec-immutable=""> 
  <svg class="text-blue mt-1 align-top" width="18" height="18" fill="currentColor"> 
    <title> More Information</title> 
    <use xlink:href="ResourcePackages/Bootstrap4/assets/dist/sprites/solid.svg#info-circle"> </use> 
  </svg> 
  </a>  </span>  <a data-target=".tc-trigger-modal" href="/plans/trip-protection/round-trip#trigger2" data-toggle="modal" class="trigger-click uline" data-sf-ec-immutable=""> Included interruption reasons</a>  </div>

Benefit card with limit

$250 per day (up to $2,000)

<div class="card card-benefit card-body">
   <span class="card-text-benefit">$250 per day</span> 
   <span class="card-limit">(up to $2,000)</span> 
</div>

Optional benefit card

Add Event Ticket Registration Fee Protection

(Up to 35,000) Starting at $10.00 /traveler

 <div class="card card-optional card-body">
  <div class="form-group mb-0">
     <input id="event" type="checkbox">
     <label for="event">Add Event Ticket Registration Fee Protection </label>
   </div>
  <span class="card-limit">(Up to 35,000)</span> <span class="card-price"><small>Starting at</small> $10.00 <small>/traveler</small></span> </div>

Select benefit card

Maximum Medical Coverage

<div class="card card-select card-body">
   <div class="form-group"><label for="medMax">Maximum Medical Coverage</label>
  <select class="form-control" id="medMax">
     <option>$10,000</option>
     <option>$50,000</option>
     <option>$100,000</option>
     <option>$500,000</option>
     <option>$1,000,000</option>
     <option>$2,000,000</option>
     <option>$5,000,000</option>
   </select>
   </div>
</div>

Blog Card

10 Safety Tips for Solo Female Travel

How to stay safe during your adventure in the great, wide somewhere.

<div class="card"><img class="card-img-top" src="https://www.sevencorners.com/images/default-source/default-album/young-woman-reading-map-in-europe-small.jpg" alt="Young woman reading a map in Europe.">
   <div class="card-body">
      <h3 class="card-title tk-museo-slab">10 Safety Tips for Solo Female Travel</h3>
      <p class="card-text">How to stay safe during your adventure in the great, wide somewhere.</p>
      <a href="https://www.sevencorners.com/blog/travel-tips/10-safety-tips-for-solo-female-travel" class="card-link">Read more »</a></div>
</div>

Form Inputs

The following information outlines when and how to set up page headers. Visit the Bootstrap documenation for more form options.

Radio Button

Option A

Option B

<div class="form-group">
  <input id="option-a" type="radio" name="option">
  <label for="option-a">Option A</label>
</div>
<div class="form-group">
  <input id="option-b" type="radio" name="option">
  <label for="option-b">Option B</label>
</div>

Large Radio Buttons with background color

I'm going on vacation

I'm traveling for business

I’m a student, faculty or scholar studying abroad

<div class="form-large">
  <div class="form-group position-relative py-2 px-4">
    <input id="vacation" type="radio" name="where">
    <label for="vacation">I'm going on vacation</label>
    <div class="bg-form"></div>
  </div>
  <div class="form-group position-relative py-2 px-4">
    <input id="business" type="radio" name="where">
    <label for="business">I'm traveling for business</label>
    <div class="bg-form"></div>
  </div>
  <div class="form-group position-relative py-2 px-4">
    <input id="Scholar" type="radio" name="where">
    <label for="Scholar">I’m a student, faculty or scholar studying abroad</label>
    <div class="bg-form"></div>
  </div>
</div>

Checkmarks

Rental Car Damage Coverage in Bold

Golf Round Coverage

<div class="form-group">
  <input id="rental" type="checkbox">
  <label for="rental"><strong>Rental Car Damage Coverage in Bold</strong></label>
</div>
<div class="form-group">
  <input id="golf" type="checkbox">
  <label for="golf">Golf Round Coverage</label>
</div>

Check box with column and background color

John $10.00

Marcus $10.00

Kelly $10.00

<div class="form-group position-relative py-2 px-4">
  <input id="traveler-01" type="checkbox">
  <label for="traveler-01">John</label>
  <span class="text-blue bold float-right mr-3">$10.00</span>
  <div class="bg-form"></div>
</div>
<div class="form-group position-relative py-2 px-4">
  <input id="traveler-02" type="checkbox">
  <label for="traveler-02">Marcus</label>
  <span class="text-blue bold float-right mr-3">$10.00</span>
  <div class="bg-form"></div>
</div>
<div class="form-group position-relative py-2 px-4">
  <input id="traveler-03" type="checkbox">
  <label for="traveler-03">Kelly</label>
  <span class="text-blue bold float-right mr-3">$10.00</span>
  <div class="bg-form"></div>
</div>

Select

Maximum Medical Coverage

<div class="card card-select card-body">
   <div class="form-group"><label for="medMax">Maximum Medical Coverage <a data-toggle="popover" data-content="Descriptive information to help the customer" data-sf-ec-immutable="">
   <svg class="text-blue mt-1 align-top" width="18" height="18" fill="currentColor"><title>More Information</title>
   <use xlink:href="/ResourcePackages/Bootstrap4/assets/dist/sprites/solid.svg#info-circle"></use></svg>
  </a> </label>
  <select class="form-control" id="medMax">
     <option>$10,000</option>
     <option>$50,000</option>
     <option>$100,000</option>
     <option>$500,000</option>
     <option>$1,000,000</option>
     <option>$2,000,000</option>
     <option>$5,000,000</option>
   </select>
   </div>
</div>

Headers

The following information outlines when and how to set up page headers.

Purchase path step

Why are you traveling?

<div class="display-4">Why are you traveling?<a data-toggle="popover" data-trigger="hover" data-content="Descriptive information to help the customer">
  <svg class="text-blue mt-1 align-top" width="18" height="18" fill="currentColor">
    <title>More Information</title>
    <use xlink:href="/ResourcePackages/Bootstrap4/assets/dist/sprites/solid.svg#info-circle"></use>
  </svg>
  </a></div>

Benefit section

Trip Interruption/Delay

<div class="h4 bg-light font-weight-light p-2 pl-3">Trip Interruption/Delay</div>

Plan differentiator