AOL.com Style Guide

> Card element that are used in special pages, majority on Masonry/Grid experiences

> Example: Trump Promises Experience, Timeline Experience, Quote Page

AOL

#3399FF

.brand-aol

News

#3399FF

.brand-news

Entertainment

#F22D2D

.brand-entertainment

Finance

#16CEF6

.brand-finance

Lifestyle

#FA8484

.brand-lifestyle

Shop

#FF9D2A

.brand-shop

Component Colors

Background color for Modules (.component-shape .first)

#F7F7F7

Border 1px solid for Modules (.component-shape .second)

#E0E0E0

<hr> separators should be 1px solid (.component-shape .first)

#E0E0E0

> AOL.com uses Larsseit Bold and Regular

> Make sure to use the bold family, not the forced bold.

Larsseit Bold Larsseit Regular

10 popular tourism destinations

10 popular tourism destinations 10 popular tourism destinations that are cheaper for US travellers in 2017

Color

#333333

.text-grey-dark

10 popular tourism destinations

#666666

.text-grey-medium

10 popular tourism destinations

#999999

.text-grey-light

10 popular tourism destinations

Highlighted Strikethrough Heading

A style to add a yellow tilted highlight to text, used in the mocks.

              <div class="highlight-heading">

                   <span class="highlight-text text-size-9">

                        IN CASE YOU MISSED IT

                   </span>  

              </div>

IN CASE YOU MISSED IT

Buttons

Regular Button

The regular button is the most used

              <span class="btn-cta"> 

                    Watch Now 

              <span>

Watch Now

The color of the button takes the color of the channel/experience it will live in. See Example Below:

.btn-news

Watch Now

.btn-entertainment

Watch Now

.btn-finance

Watch Now

.btn-lifestyle

Watch Now

.btn-shop

Watch Now

No Background Button

The No Background button will be mostly use for secondary action

              <span class="no-bg-cta"> 

                    Watch Now 

              <span>

Watch Now

The color of the button takes the color of the channel/experience it will live in. See Example Below:

.no-bg-cta-news

Watch Now

.no-bg-cta-entertainment

Watch Now

.no-bg-cta-finance

Watch Now

.no-bg-cta-lifestyle

Watch Now

.no-bg-cta-shop

Watch Now

Simple Link

The link takes the style of the text and color of the channel

                <span class="text-entertainment"> 

                      See photo of the two together 

                <span>

The famous brunette may look incredbily familarSee photo of the two together >

The link takes the color of the channel/experience it will live in. See Example Below:

.text-news

Watch Now

.text-entertainment

Watch Now

.text-finance

Watch Now

.text-lifestyle

Watch Now

.text-shop

Watch Now

Card element that are used in special pages, majority on Masonry/Grid experiences

Example: Trump Promises Experience, Timeline Experience, Quote Page

Cards

Cards used for what?

              <span class="text-entertainment"> 

                    See photo of the two together 

              <span>

Travel

16 of the most delightfully odd Airbnbs you can rent spend a night in a seashell-shaped home in Mexico? The options are endless with these unique homes!

Radio Buttons

          <input type="radio" name="number" checked> <span class="radio-label text-size-5">Those are TBD</span> 

       

Those are TBD
But lets add the current design anyway

Signups

Simple Fields

          <input class="sg-input" type="text" placeholder="Input" /> 

          <button class="btn">Search</button>

Multiple Fields

          <input class="sg-input" type="text" placeholder="Input" /> 

          <input class="sg-input" type="text" placeholder="Input" /> 

          <button class="btn">Search</button>

Lists

          
          &:before { 

               border-color: transparent transparent transparent #999; 

                 border-style: solid; 

                 border-width: 4.5px 0 4.5px 9px; 

                 margin-bottom: 3px; 

          }

Tom Cruise gets heartbreaking news
Adele makes huge reveal in subtle way
Prince William makes awkward joke at

Tabs


            Add a '.tab' to an element

US
GLOBALS
CURRENCIES