Brand
The following information outlines how to use the colors, typography, and language on the website to maintain our brand.
There is no greater risk than never taking one. Travel smart. Make great memories. Protect yourself.
Take care and take coverage.
Explore more with medical coverage designed to travel with you.
Be the hero. Explore. We’ve got your back.
Providing great care across the globe. We hope you never have to make the call, but we’re there if you do.
The following information outlines when and how to use the colors on the website.
Background class | Text class | HEX |
---|---|---|
.bg-primary | .text-primary | #035B93 |
.bg-orange | .text-orange | #F5852B |
Background class | Text class | HEX |
---|---|---|
.bg-success | .text-success | #8DC52C |
.bg-danger | .text-danger | #B31F23 |
.bg-warning | .text-warning | #F0CA00 |
.bg-info | .text-info | #49A8E5 |
.bg-dark | .text-dark | #004674 |
Background class | Text class | HEX |
---|---|---|
.bg-white | .text-white | #ffffff |
.bg-secondary | .text-secondary | #d4d7d9 |
.bg-light | — | #e9ecef |
.bg-gray | .text-gray | #6c757d |
.bg-dark-gray | .text-dark-gray | #343a40 |
Example | Text class | HEX |
---|---|---|
Text with white screen | .text-white-50 | rgba(255, 255, 255, 0.5 |
Text with black screen | .text-black-50 | rgba(0, 0, 0, 0.5) |
Example | Code |
---|---|
| |
| |
| |
| |
| |
| |
|
Typography plays a major role in creating a consistent brand identity. Below are our primary fonts to be used on the Seven Corners website.
Header tags affect both SEO and accessibility. To use the style of a header without influencing SEO and accessibility, use the class. All headers use Myriad Pro.
<HTML> | Name | Class |
---|---|---|
<h1> | Myriad Pro — 2rem (32px) | .h1 |
<h2> | Myriad Pro — 1.875rem (30px) | .h2 |
<h3> | Myriad Pro — 1.75rem (28px) | .h3 |
<h4> | Myriad Pro — 1.5rem (24px) | .h4 |
<h5> | Myriad Pro — 1.25rem (20px) | .h5 |
<h6> | Myriad Pro — 1rem (16px) | .h6 |
Name | Class |
---|---|
Myriad Pro — 6rem (96px) | .display-1 |
Myriad Pro — 5.5rem (88px) | .display-2 |
Myriad Pro — 4.5rem (72px) | .display-3 |
Myriad Pro — 3.5rem (56px) | .display-4 |
Example | <HTML> | Class |
---|---|---|
Light | — | .font-weight-light |
Bold | <strong> or <b> | .font-weight-bold |
Regular | — | .font-weight-regular |
Highlight | <mark> | .mark |
<del> | — | |
Underline | <u> | .uline |
Tiny Print | <small> | .small |
Italic | <em> or <i> | .font-italic |
Name | Class |
---|---|
Slab font face | .tk-museo-slab |
Regular | .font-weight-regular |
Shadow | .text-shadow |
.small-expanded-uppercase | |
.expanded-uppercase |
Reveal text for the toggle.
Here are even more details about the details.
<details>
<summary>
Toggle Line</summary>
</details>