AOL

Materials

> 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

10 popular tourism destinations

10 popular tourism destinations

10 popular tourism destinations

10 popular tourism destinations

10 popular tourism destinations

10 popular tourism destinations

10 popular tourism destinations

10 popular tourism destinations

10 popular tourism destinations

10 popular tourism destinations 10 popular tourism destinations that are cheaper for US travellers in 2017
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

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!
Need to insert image here
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
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
Tabs
  • US
  • GLOBALS
  • CURRENCIES

Pick a type of loans:

  • MORTAGE
  • PERSONAL
  • AUTO
  • MORTAGE LOANS
  • PERSONAL LOANS
  • AUTO LOANS

DO NOT Stack the tabs



  • MORTAGE LOANS
  • PERSONAL LOANS
  • AUTO LOANS

DO NOT Resize the font to make it fit