Seven Corners Style Guide


Color Palettes

Each site has three main colors. The primary color is a variation of blue, the accent color a variation of orange, and a darker version of the main blue
The naming convention is primary-sitename for a background color and primary-text-sitename for the text color.
For the accent color use accent-sitename for a background color and accent-text-sitename for the text color.
It is fairly common to want white text, just use white-text as your class.

Consumer Site

class="primary-consumer" or class="blue"
class="dark-consumer" or class="blue darken-2"
class="accent-consumer" or class="orange"
class="accent-text-consumer" or class="orange-text"
class="primary-text-consumer" or class="blue-text"

Corporate Site

class="primary-corp"
class=" dark-corp"
class="accent-corp"
class="accent-text-corp"
class="primary-text-corp"

Business Site

class="primary-business"
class=" dark-business"
class="accent-business"
class="accent-text-business"
class="primary-text-business"

Government Site

class="primary-gov"
class=" dark-gov"
class="accent-gov"
class="accent-text-gov"
class="primary-text-gov"

Agent Site

class="primary-agent"
class="dark-agent"
class="accent-agent"
class="accent-text-agent"
class="primary-text-agent"

Grey: Good to use on all sites

class="grey"
class="grey darken-2"
class="grey lighten-3"
class="accent-text-agent"
class="grey-text darken-3"

We have an extensive color palette, if you want to see all of the color options, visit this site


Product Color Guide

Inbound Plans

class="orange" and class="orange-text"

Liaison and Wander

class="deep-purple" and class="deep-purple-text"

RoundTrip Plans

class="cyan darken-3" and class="cyan-text text-darken-3"

Student Plans

class="purple lighten-2" and class="purple-text text-lighten-2"

Reside Plans

class="blue-grey" and class="blue-grey-text"

SecureAbroad Plans

class="being determinded" and class="not yet"

Specialty Plans Armor, Captum, Crisis Management, Pet

class="grey" and class="grey-text"

Typography

h1 heading Secondary text

<h1>h1 heading <small>Secondary text</small></h1>

h2 heading Secondary text wrapped with small

<h2>h2 heading <small>Secondary text</small></h2>

h3 heading Secondary text

<h3>h3 heading <small>Secondary text</small></h3>

h4 heading Secondary text

<h4>h4 heading <small>Secondary text</small></h4>
h5 heading Secondary text
<h5>h5 heading <small>Secondary text</small></h5>
h6 heading Secondary text
<h6>h6 heading <small>Secondary text</small></h6>

Header with light style and orange color

<h3 class="orange-text light">Header with light style and orange color</h3>

Using a header in orange with a light style is part of our style guidelines. We can use it in blog posts and other items we want to call out.


This is a paragraph. Use it to create your paragraph text. Lorem ipsum dolor sit amet, falli adipisci pri cu, ut exerci evertitur cum. Ad erat ridens scripserit has. Ne mei verear diceret sapientem, doctus legendos usu te, dicant definitionem id pri. No justo inani intellegebat usu. Magna gloriatur necessitatibus ius te. Ei alia mundi simul sea.

<p>Paragraph text.</p>

This is a paragraph with bold text.

<p>This is a paragraph with <strong>bold text</strong>.</p>

This is a paragraph with a class of "lead". It would work well towards the top of a page to highlight important info. Lorem ipsum dolor sit amet, falli adipisci pri cu, ut exerci evertitur cum. Ad erat ridens scripserit has. Ne mei verear diceret sapientem, doctus legendos usu te, dicant definitionem id pri. No justo inani intellegebat usu. Magna gloriatur necessitatibus ius te. Ei alia mundi simul sea.

<p class="lead">Text wrapped in a class of "lead".</p>

This line of text is meant to be treated as fine print.

<small>This line of text is meant to be treated as fine print.</small>

Buttons

As you can see from this page we use a black header to signify important sections.

Blue Button

<a class="btn blue white-text">Blue Button</a>

All it takes to make the button shape is a class of btn. You then declare the background and text colors.

Pink Button

<a class="btn pink white-text">Pink Button</a>

All it takes to make the button shape is a class of btn. You then declare the background and text colors.

COLOR DIRECTIONS: Use a class of blue to create a blue background. Use blue-text to make text blue. Our accent color is orange. It follows the same plan. Use a class of orange for background, orange-text for text.


Images

Add a class of "img-responsive" to make a large image responsive to screen size.

<img src="..." class="img-responsive" alt="Responsive image">

Add classes to an <img> element to easily style images.

image shapes
<img
src="..." alt="..." class="img-rounded"> <img src="..." alt="..." class="img-circle"> <img src="..." alt="..." class="img-thumbnail">

Creating sections

Create a simple outline and padding around some text by putting it in a well. The default background is a light grey.

Look, I'm in a well!
<div class="well">Look, I'm in a well!</div>

Change the background color:

Look, I'm in a well with a white background!
<div class="well white">Look, I'm in a well with a white background!</div>

Use headers and images:

This is important

sanfranSeven Corners offers the industry’s most comprehensive trip cancellation insurance and travel insurance policies. For more than 20 years, we have served U.S. citizens traveling abroad and foreign nationals visiting the United States with both short, and long, stay travel insurance. In addition to individuals and groups, we also provide travel protection and world health insurance programs, benefit management and health care administration to government agencies and business travel insurance for corporate employers.
<div class="well blue white-text"><h1>This is important </h1> All the text …</div>

Documents

Privacy Information
Terms of Use
Security Statement

Connect with Seven Corners

About Us
Newsroom
Careers

         

Contact Us