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

in-content-banners

In-content Banners

In-content Banners

.m-in-content-banner

Overview

Description

Used for in-page calls to action.

Best Practices

  • Banners should use primary CTAs.
  • Ideally use only one per page.

Schema

Name Description Type Default Value Option(s)
attributes
 A Drupal-style attributes object with extra attributes to append to this component. object - any
banner.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - m-in-content-banner--style--blue m-in-content-banner--style--white any
banner.content_align
 Determines the alignment of all content in the banner string center left center right
banner.text_top
 Specifies optional, styled text that appears at the top of the banner. string - any
banner.text_middle
 Specifies optional, styled text that appears in the middle of the banner. string - any
banner.text_bottom
 Specifies optional, styled text that appears at the bottom of the banner. string - any
banner.buttons
 Banner call to action, can be a maximum of three buttons. object - any
banner.post_cta
 Specifies optional, styled text that appears after the banner calls to action. string - any

In-content Banner Blue

In-content Banner Blue

.m-in-content-banner--style--blue

Colors Used

Swatch Name Hex Variable Usage
Blue Light #e1f6f9 $color--blue--light Background color.
Deep Blue #003970 $color--deep-blue Text color.
Link Color #007dba $link__color Sub-CTA link color.

Example

Rates as low as 6.00% when you use your credit union savings as collateral.

Make your money go even further.

That's right: Simply secure your loan with a VACU savings account – Regular Savings, Premium or Premium Plus Money Market Savings and Savings Certificates all apply – and pay less interest.

Apply for a Share Secured Personal Loan

In-content Banner White

In-content Banner White

.m-in-content-banner--style--white

Colors Used

Swatch Name Hex Variable Usage
white #fefefe $color--white Background color.
Deep Blue #003970 $color--deep-blue Text color.
Text Color #2a2a2a $text__color Sub-CTA text color.
Link Color #007dba $link__color Sub-CTA link color.

Example

Receive a special credit card offer?

If so, you're one step closer to saving with us. Accept your special offer today!

Accept offer

Please read our Disclosures for Special Offers for important information related to your offer.