Business Loans Accounts Style 02 Car Loans Checking Credit Cards Digital Banking Accounts Style 01 Home Equity Loans Insurance Investing Membership Mortgage Personal Loans RV, Boat, Motorcycle Loans Savings

Heroes

Heroes

.o-hero

Overview

Description

Use at the top of the page to introduce page content. Hero sections should communicate the main purpose of the page they live on.

Best Practices

  • Homepage Hero Headlines should be about 40 characters.
  • Landing Page Hero Headlines should be about 30 characters.
  • Body copy for all heroes should be about 160 characters.
  • Select photos that make text easy to read.
  • Headlines and subheaders should be 2 lines at most.
  • Hero sections often contain CTA buttons, but are not always necessary.

Schema

Name Description Type Default Value Option(s)
attributes
 A Drupal-style attributes object with extra attributes to append to this component. object - any
hero.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string o-hero--landing o-hero--landing any
hero.ribbon
 Determines the color of the banner svg. Use green, blue or mango for Landing Page Heroes. Use green-sm for Top Heroes, white-sm for In-page Hereos. string green green blue mango green-sm white-sm
hero.content_align
 Determines the alignment of all content in the hero. string center left center right
hero.width
 Specifies the width constraints of the hero content. string md sm md
hero.bkgimage
 Specifies the image media used as a background. object - any
hero.content
 Specifies the content for the hero. object - any

Landing Page Hero Blue

Landing Page Heroes

Colors Used

Swatch Name Hex Variable Usage
White #fefefe $color--white Text color with background image
Blue #007dba $color--blue Default headline color
Gray #666666 $color--gray Default text color
Blue Lighter #edf1f7 $color--blue--lighter Optional background color
Gray Lighter #f5f5f5 $color--gray--lighter Optional background color

  • Ready to own your space?

    Take $500 off closing costs.

    Get started
  • A happy couple painting a room.

Landing Page Hero Green

  • You're Pre-Approved!

    1.99% APR for 12 months1 on purchases and balance transfers made within 60 days of card opening. After that, variable 10.49% - 25.49% APR.

    See Your Offer
  • This is the alt text

Landing Page Hero Mango

  • Go Rams!

    Ready to take control of your finances?

    Join now
  • Virginia Commonwealth University

Landing Page Hero Text 50%

  • Headline that aligns with ad messaging

    Intro content that restates primary message and provides more detail. Curabitur est gravida et libero vitae dictum. Inmensae subtilitatis, obscuris et malesuada fames.

    Apply Online
This is the alt text

Landing Page Hero Background Color

  • Headline that aligns with ad messaging

    Intro content that restates primary message and provides more detail. Curabitur est gravida et libero vitae dictum. Inmensae subtilitatis, obscuris et malesuada fames.

    Apply Online
  • Fall Back in Love With Your Home

Landing Page Hero Text Centered

Headline that aligns with ad messaging

Intro content that restates primary message and provides more detail. Curabitur est gravida et libero vitae dictum. Inmensae subtilitatis, obscuris et malesuada fames.

Join now
This is the alt text

Top Hero

Top Hero

Description

Used for page titles and main hero areas.

Best Practices

  • Should be the first element after the main navigation.
  • Select photos that make text easy to read.
  • Headlines and subheaders should be 2 lines at most.

Schema

Name Description Type Value
hero.ribbon Determines the color of the banner svg. string green-sm

Colors Used

Swatch Name Hex Variable Usage
White #fefefe $color--white Text color.

Example

Fuel your adventure with a low rate.

Our affordable car loans offer you the same low rate whether your car is new or used. Rates as low as 2.59% APR.

Learn more
This is the alt text

In-page Hero

In-page Hero

Description

Used for hero areas within page content as a call-to-action area. Typically used as pre-footer CTA.

Best Practices

  • Ideally use only 1 per page.
  • Select photos that make text easy to read.
  • Headlines and subheaders should be 2 lines at most.

Schema

Name Description Type Value
hero.ribbon Determines the color of the banner svg. string white-sm

Colors Used

Swatch Name Hex Variable Usage
White #fefefe $color--white Text color.

Example

Why VACU

Welcome to Virginia Credit Union. We're here to help you take control of your finances with affordable services, knowledge and opportunities for you to take your money further and reach your goals sooner.

Wall with colorful mural