This is An H1 Special Headline
{
font-size: 42px;
color: #414042 OR #FFFFFF OR #0298CF
font-family: 'ivypresto-display', serif;
}
h1 used for sections or titles
h2 used for subheads, copy titles
h3 used for callouts
h1,
h2,
h3 {
font-family: 'Mulish', sans-serif;
text-transform: uppercase;
font-weight: 700;
}
h1 {
font-size: 36px;
}
h2 {
font-size: 26px;
}
h3 {
font-size 22px;
}
Color can be Charcoal (#414042), Blue (#0298CF), Black (#000000), or White (#FFFFFFF)
PARAGRAPH/BODY
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque erat sapien, ullamcorper et odio sed, ullamcorper pellentesque erat. Nam sit amet dolor viverra metus lacinia euismod at sed eros. Praesent in eros id enim rhoncus vulputate. Cras felis mauris, porttitor sit amet elementum at, sagittis nec lorem. Integer maximus consequat leo, ut ullamcorper dui volutpat ac. Aliquam ante diam, varius eu justo et, feugiat tincidunt quam. Sed non odio ut sapien finibus laoreet eu non eros. Quisque ac nulla porttitor metus aliquet cursus egestas eget ex. In non ligula commodo, auctor tellus molestie, cursus mauris. Proin elementum mi vitae orci condimentum, in venenatis metus consectetur. In hac habitasse platea dictumst. Nullam mollis dapibus turpis, non tincidunt ligula elementum pulvinar. Mauris finibus porttitor neque, finibus lacinia leo pretium in. Aliquam interdum nibh velit, tincidunt posuere tortor sodales vel. Phasellus nec dignissim augue.
body {
font-family: 'Mulish', sans-serif;
font-size: 14px;
line-height: 1.4;
font-weight: 400;
}
a {
color: #0298CF;
}
a.hover {
text-decoration: underline;
}
LISTS
There is currently no unique styling on lists, just default based on the p tag, this may change and will be updated here.
- Lorem Ipusm Delore Sit
- Mauris finibus porttitor neque
- Proin elementum mi vitae
- Lorem Ipusm Delore Sit
- Mauris finibus porttitor neque
- Proin elementum mi vitae
BUTTONS
Depending on the tools you’re using you may have a lot or very little control over buttons. If possible try to match these. If you need detailed css (hovers, icon animation) contact the Brand team.
btn {
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
padding: .3em;
line-height: 1.7em !important;
background-color: transparent;
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
border: 2px solid;
border-radius: 3px;
}
ICONS
We currently use 2 icon packs – Bootstrap & FontAwesome.
FontAwesome requires registration but has a free-tier offering that includes many useful icons. You can also download .svg versions.
https://www.fontawesome.com