Components

Alerts

Loading spinner

Loading...
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.

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

Select 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

<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

(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

<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

Young woman reading a map in Europe.

10 Safety Tips for Solo Female Travel

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

Read more »
<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

<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

<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

<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

$10.00
$10.00
$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

<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? More Information
<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

MOST POPULAR
<div class="h6 text-white text-center bg-info py-2">MOST POPULAR</div>

Form section

PRIMARY TRAVELER
<div class="h5 text-primary">PRIMARY TRAVELER</div>