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

Colors

Colors

Description

VACU web colors. Please follow color usage guidelines closely to maintain consistency in visual display, interaction design, and information architecture.

Color Palette

Swatch Name Hex Variable Description
Blue #007dba $color--blue Primary action color. Use for buttons, links, and calls to action.
Periwinkle #3a5dae $color--periwinkle Hover state for primary buttons.
Deep Blue #003970 $color--deep-blue Action color. Use in links on colored backgrounds.
Blue Light #e1f6f9 $color--blue--light Secondary background color. Use in alert bars.
Blue Lighter #edf1f7 $color--blue--lighter Primary Background color. Use to highlight calls to action. Used in utility navigation.
Green #579904 $color--green Information color. Use in iconograph, images, and design elements to draw attention to key information.
Green Light #95c623 $color--green--light Highlight color. Used in image overlays and iconography. Use in conjunction with primary green.
Green Lighter #d5e9a7 $color--green--lighter Highlight color. Used in image overlays and iconography. Use in conjunction with primary green.

Grayscale

Swatch Name Hex Variable Description
Black #000 $color--black Black
Charcoal #2a2a2a $color--charcoal Text color.
Gray #666 $color--gray Alternate Text Color for subheadings, icons and deemphasized text.
Gray Light #e0e0e0 $color--gray--light UI color for Horizontal lines, table lines, etc.
Gray Lighter #f5f5f5 $color--gray--lighter Secondary Background color. Used in footnotes.
White #fff $color--white Primary background color, main site background.

Functional Colors

Swatch Name Hex Variable Description
Blue #007dba $link__color Link color.
Charcoal #2a2a2a $text__color Text color.

Fonts

Fonts

Font Family: Source Sans Pro

Example

Primary font light 300: "Source Sans Pro", sans-serif;

Primary font light italic 300i: "Source Sans Pro", sans-serif;

Primary font regular 400: "Source Sans Pro", sans-serif;

Primary font regular italic 400i: ""Source Sans Pro", sans-serif;

Primary font medium 500: "Source Sans Pro", sans-serif;

Primary font medium italic 500i: "Source Sans Pro", sans-serif;

Primary font bold 700: "Source Sans Pro", sans-serif;

Primary font bold italic 700i: "Source Sans Pro", sans-serif;

Buttons

Buttons

.a-button

Overview

Description

Buttons are links that have a greater visual weight. They are used to draw the users attention to important actions.

Best Practices

  • Try and limit buttons to no more than 2 within a content section.
  • When using multiple buttons together, one should be a primary button, one should be secondary.

Schema

Name Description Type Default Value Option(s)
button.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - a-button--primary a-button--secondary any
button.button_wrapper
 If true, wraps each button component with a span. true is passed by the Button Group component. boolean false true false
button.type
 Specifies the type of button for a button element. string button button submit reset
button.text
 Specifies the text of the button. string - any
button.url
 The href attribute for the button when the element is a link; specifies the URL of the page the link goes to. If no url is provided, the button element is a button. string - any
button.aria_label
 The aria-label attribute is used to define a string that labels the current button. string - any

Primary Button

Primary Button

.a-button--primary

Description

Used for primary actions, ideally one per content area. If there are multiple buttons, use one primary button and leave the rest secondary buttons.

Colors Used

Swatch Name Hex Variable Usage
White #fefefe $color--white; Text color
Blue #007dba $color--blue; Background color
Periwinkle #3a5dae $color--periwinkle; Hover background color

Example

Button Link

Secondary Button

Secondary Button

.a-button--secondary

Description

Used for secondary actions, use as many per content area as needed. If there are multiple buttons, use one primary button and the rest secondary buttons.

Colors Used

Swatch Name Hex Variable Usage
White #fefefe $color--white; Background color
Blue #007dba $color--blue; Border and text color
Periwinkle #3a5dae $color--periwinkle; Hover border and background color

Example

Button Link

Eyebrows

Eyebrows

.a-eyebrow

Overview

Description

Eyebrows are pieces of content that provide additional detail and context to panels. They can describe things like categories, tags, dates, etc.

Best Practices

  • Use only one eyebrow per panel.
  • If a panel falls under multiple content types, choose the primary content type to display.

Schema

Name Description Type Default Value Option(s)
eyebrow.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - a-eyebrow--with-icon any
eyebrow.text
 Specifies the text of the eyebrow string - any
eyebrow.icon
 Specifies an optional Font Awesome icon. object - any

Example

Article

Eyebrow with Icon

Eyebrow with Icon

.a-eyebrow--with-icon

Example

Article

Grids

Grids

.a-grid

Overview

Description

Grids allow you to display many pieces of related information closely together. Grids work well when displaying content housed within panels, or when placing related images next to text elements.

Best Practices

  • Avoid mixing unrelated content within a single grid layout, i.e. don’t place unrelated blog and product content together.
  • Content within a grid should be of the same organizational hierarchy. For example, placing individual credit cards within a grid works, but placing the parent checking account product page alongside individual checking products does not.

Schema

Name Description Type Default Value Option(s)
attributes
 A Drupal-style attributes object with extra attributes to append to this component. object - any
grid.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - any
grid.type
 There are two grid types, block and column. Block grids provide a way to evenly split grid items within the grid by a maximum number defined by grid.max_items. Column grids split two or three items into variable column widths defined by grid.col_widths. string block block column
grid.max_items
 Used only by the block grid.type. It determines the maximum number of grid items per row. string 3 2 3 4 5
grid.col_widths
 Used only by the column grid.type. It determines the column widths for each grid item per row. string - 50-50 75-25 25-75 66-33 33-33-33 50-25-25 25-50-25 25-25-50
grid.gutter
 Determines the space between grid items. Default values: sm: 10px, md: 20px, lg: 40px string md sm md lg
grid.items
 Grid items can consist of multiple types of content such as editor text, images, videos, etc.. For column grid types, the number of grid items must match the number of columns. object - any

Two-up Block Grid

Two-up Block Grid

.a-grid--block--2-up

Schema

Name Description Type Value
grid.type Block grids provide a way to evenly split grid items within the grid by a maximum number defined by grid.max_items. string block
grid.max_items Determines the maximum number of grid items per row. string 2
grid.gutter Determines the space between grid items. Default values: sm: 10px, md: 20px, lg: 40px string md

Example

  • Car Loans

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

  • Mortgages

    From finding the right home to closing on a mortgage with a great rate, we help you at every step of the process.

  • Checking

    From simple accounts with no minimums to those that reward you for a deeper banking relationship, we have a checking account to meet your needs.

  • Virginia CU Realty

    You could be eligible for rebates up to $2,500 when you use Virginia CU Realty, Virginia Statewide Title Insurance and VACU for your mortgage.

Three-up Block Grid

Three-up Block Grid

.a-grid--block--3-up

Schema

Name Description Type Value
grid.type Block grids provide a way to evenly split grid items within the grid by a maximum number defined by grid.max_items. string block
grid.max_items Determines the maximum number of grid items per row. string 3
grid.gutter Determines the space between grid items. Default values: sm: 10px, md: 20px, lg: 40px string md

Example

Four-up Block Grid

Four-up Block Grid

.a-grid--block--4-u

Schema

Name Description Type Value
grid.type Block grids provide a way to evenly split grid items within the grid by a maximum number defined by grid.max_items. string block
grid.max_items Determines the maximum number of grid items per row. string 4
grid.gutter Determines the space between grid items. Default values: sm: 10px, md: 20px, lg: 40px string md

Example

  • Free debit card

    Get a free debit card to make purchases and use at ATMs

  • Nationwide ATMs

    Find ATMs at VACU locations or shared branches with credit unions nationwide

  • No-fee withdrawals

    Get 4 no-fee withdrawals from non-VACU ATMs each month

  • Online access

    Enjoy free online banking with bill pay & eStatements

  • Digital wallets

    Store and manage information in digital wallets

  • Mobile banking

    Use our convenient mobile banking app with mobile deposit

  • Paper checks

    Easily order checks online or by phone (four colors, $16 for 100)

  • Phone banking

    Enjoy free 24-hour QuikLine phone banking

Two Column Grids

Two Column Grids

.a-grid--column--{grid.col_widths}

Schema

Name Description Type Value
grid.type Column grids split two or three items into variable column widths defined by grid.col_widths. string column
grid.col_widths Determines the column widths for each grid item per row. string any
grid.gutter Determines the space between grid items. Default values: sm: 10px, md: 20px, lg: 40px string md

Example

50-50

  • Car Loans

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

  • Car Loans

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

75-25

  • Car Loans

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

  • Car Loans

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

25-75

  • Car Loans

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

  • Car Loans

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

66-33

  • Car Loans

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

  • Car Loans

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

33-66

  • Car Loans

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

  • Car Loans

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

Three Column Grids

Three Column Grids

.a-grid--column--{grid.col_widths}

Schema

Name Description Type Value
grid.type Column grids split two or three items into variable column widths defined by grid.col_widths. string column
grid.col_widths Determines the column widths for each grid item per row. string any
grid.gutter Determines the space between grid items. Default values: sm: 10px, md: 20px, lg: 40px string md

Example

33-33-33

  • Car Loans

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

  • Car Loans

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

  • Car Loans

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

50-25-25

  • Car Loans

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

  • Car Loans

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

  • Car Loans

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

25-50-25

  • Car Loans

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

  • Car Loans

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

  • Car Loans

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

25-25-50

  • Car Loans

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

  • Car Loans

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

  • Car Loans

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

Odd Ball 40-35-25

  • Car Loans

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

  • Car Loans

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

  • Car Loans

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

Headings

Headings

.a-heading

Overview

Description

Headings are one to two lines of text that introduce a section of content. They help create a content hierarchy and aide in scannability—making it easier for users to quickly locate the information most important to them. They also help search engines determine what the page is about. They go from H1 at the largest to H5 at the smallest.

Best Practices

  • H1’s are typically reserved for page titles to improve SEO performance.
  • Headings should communicate only one idea at a time.
  • When used within standard body copy, they should be used in order. H2’s to introduce subsections within the page, h3s to introduce subsections within those, etc.

Schema

Name Description Type Default Value Option(s)
heading.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - any
heading.text
 The text of the heading string - any
heading.level
 The heading level string h2 h1 h2 h3 h4 h5
heading.url
 An optional heading link string - any

Example

h1. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

h2. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

h3. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

h4. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

h5. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

Heading with Bracket

Heading with Bracket

.a-heading--with-bracket

Colors Used

Swatch Name Hex Variable Usage
Green #579904 $color--green Bracket color

Example

All your needs
under one roof

Icons

Icons

.a-icon

Overview

Description

Icons help give visual markers to important content, helping users quickly scan and identify important information. They are also a great tool for communicating brand identity.

Best Practices

  • Avoid using icons on their own without accompanying text.
  • Use only one icon per element.

Schema

Name Description Type Default Value Option(s)
icon.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - a-icon--eyebrow a-icon--feature a-icon--product any
icon.type
 The name Font Awesome uses for the desired icon. string - any
icon.name
 The name of the icon, used as part of the title attribute. string - any
icon.style
 Font Awesome style prefix that determines the look and feel of the icon. Options are solid, fas; regular, far; light, fal; duotone, fad; and brands, fab. string fal fas far fal fad fab

Eyebrow Icons

Eyebrow Icons

.a-icon--eyebrow

Description

Used in the Eyebrow component which is used by the Article Card component.

Example

  • newspaper
  • calendar-alt
  • book-open
  • book
  • piggy-bank
  • calculator-alt
  • video

Feature Card Icons

Feature Card Icons

.a-icon--feature

Description

Used on Feature Card components.

Example

Regular

  • car
  • sign
  • home
  • credit-card-front
  • bicycle
  • rv
  • piggy-bank
  • hand-holding-seedling
  • user-friends
  • credit-card-blank
  • toolbox
  • book-open
  • book
  • calculator-alt
  • bars
  • redo-alt
  • sign-out
  • file-pdf
  • external-link-square-alt
  • times
  • question-circle
  • comment-lines
  • envelope
  • mail-bulk
  • user-circle
  • map-marker-alt
  • globe
  • users
  • calendar-alt
  • calendar-day
  • abacus
  • file-signature
  • file-alt
  • file-user
  • presentation
  • chalkboard
  • apple-alt
  • graduation-cap
  • headphones
  • child
  • chart-bar
  • tasks-alt
  • balance-scale
  • percentage
  • exchange-alt
  • repeat-alt
  • money-check-alt
  • money-check
  • money-bill-wave
  • coins
  • sack-dollar
  • id-card
  • user-secret
  • fingerprint
  • brain
  • lightbulb-exclamation
  • check-circle
  • lock-alt
  • shield-alt
  • desktop-alt
  • mobile-alt
  • phone
  • phone-plus
  • wallet
  • lock-alt
  • map-marker-alt
  • life-ring
  • search
  • file-pdf
  • lock
  • external-link-square-alt
  • long-arrow-alt-right
  • angle-up
  • video
  • rocket
  • hand-holding-usd
  • mobile
  • exclamation-triangle
  • info-circle
  • university

Light

  • car
  • sign
  • home
  • credit-card-front
  • bicycle
  • rv
  • piggy-bank
  • hand-holding-seedling
  • user-friends
  • credit-card-blank
  • toolbox
  • book-open
  • book
  • calculator-alt
  • bars
  • redo-alt
  • sign-out
  • file-pdf
  • external-link-square-alt
  • times
  • question-circle
  • comment-lines
  • envelope
  • mail-bulk
  • user-circle
  • map-marker-alt
  • globe
  • users
  • calendar-alt
  • calendar-day
  • abacus
  • file-signature
  • file-alt
  • file-user
  • presentation
  • chalkboard
  • apple-alt
  • graduation-cap
  • headphones
  • child
  • chart-bar
  • tasks-alt
  • balance-scale
  • percentage
  • exchange-alt
  • repeat-alt
  • money-check-alt
  • money-check
  • money-bill-wave
  • coins
  • sack-dollar
  • id-card
  • user-secret
  • fingerprint
  • brain
  • lightbulb-exclamation
  • check-circle
  • lock-alt
  • shield-alt
  • desktop-alt
  • mobile-alt
  • phone
  • phone-plus
  • wallet
  • lock-alt
  • map-marker-alt
  • life-ring
  • search
  • file-pdf
  • lock
  • external-link-square-alt
  • long-arrow-alt-right
  • angle-up
  • video
  • rocket
  • hand-holding-usd
  • mobile
  • exclamation-triangle
  • info-circle
  • university

Brand

  • linkedin
  • linkedin-in
  • facebook-square
  • facebook-f
  • twitter-square
  • twitter
  • youtube-square
  • youtube
  • pinterest-p
  • pinterest-square

Product Icons

Product Icons

.a-icon--product

Description

Use when accompanied by descriptive text about VACU products.

Best Practices

  • Size: 48x48px.

Example

  • business-loans
  • calculator-account
  • car-loans
  • checking
  • credit-card
  • digital-banking
  • dollar-account
  • home-equity-loans
  • insurance
  • investing
  • membership
  • mortgage
  • personal-loans
  • rv-boat-motorcycle-loans
  • savings

Decision Tree Icons

Decision Tree Icons

.a-icon--tree

Description

Used on Decision Tree components.

Example

  • badge-dollar
  • treasure-chest
  • hand-holding-seedling
  • check
  • times

Lists

Lists

.a-list

Overview

Description

Lists are groups of content that use bullets or numbers to organize content. They are easily scannable by users and can help SEO efforts, so use them regularly.

Best Practices

  • Use lists often.
  • Use lists to highlight the most important parts of a piece of content.
  • Use to provide a table of contents for larger sections of content.
  • Keep list items short to avoid line breaks.

Schema

Name Description Type Default Value Option(s)
list.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - a-list--checked a-list--3-columns

Unordered List

Unordered List

Description

The default list style, uses circles to denote list items. Use this style if you are unsure which to uses.

Example

  • Nulla vitae elit libero, a pharetra augue.
  • Curabitur blandit tempus porttitor.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.

Ordered List

Ordered List

Description

Shows list items in numerical order. Use to show steps in a process or a sequence of content.

Example

  1. Nulla vitae elit libero, a pharetra augue.
  2. Curabitur blandit tempus porttitor.
  3. Maecenas sed diam eget risus varius blandit sit amet non magna.

Checklist

Checklist

.a-list--checked

Description

An unordered list with check marks instead of circles to show list items. Useful for listing out benefits or a product or service.

Example

  • Nulla vitae elit libero, a pharetra augue.
  • Curabitur blandit tempus porttitor.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.

Checklist in Columns

Checklist in Columns

.a-list--checked.a-list--3-columns

Description

An unordered list with check marks. Use when there are a large number of items in a list.

Example

  • Nulla vitae elit libero, a pharetra augue.
  • Curabitur blandit tempus porttitor.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Vestibulum id ligula porta felis euismod semper.
  • Maecenas sed diam eget risus varius blandit sit amet non magna.
  • Nullam id dolor id nibh ultricies vehicula ut id elit.
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Media

Media

.a-media

Overview

Description

Typically Images but can include other non-text content.

Best Practices

  • When using media alongside text elements, choose content that aligns with the copy, or communicates a similar message or emotion.

Schema

Name Description Type Default Value Option(s)
attributes
 A Drupal-style attributes object with extra attributes to append to this component. string - any
media.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - a-media--with-caption any
media.alt
 Specifies the alternate text for an image. string - any
media.caption
 Optional media image caption. string - any

Example

This is the alt text

Media Image with Caption

Media Image with Caption

.a-media--with-caption

Description

Alignment is set in the editor for embedded media.

Example

This is the alt text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum.

Media Image Align Left

Media Image Aligned Left

.align-left .a-media--with-caption

Description

Alignment is set in the editor for embedded media.

Example

This is the alt text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum.

Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo.

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Media Image Align Center

Media Image Aligned Center

.align-center .a-media--with-caption

Description

Alignment is set in the editor for embedded media.

Example

This is the alt text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum.

Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo.

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Media Image Align Right

Media Image Aligned Right

.align-right .a-media--with-caption

Description

Alignment is set in the editor for embedded media.

Example

This is the alt text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere consectetur est at lobortis. Maecenas faucibus mollis interdum. Maecenas faucibus mollis interdum.

Donec ullamcorper nulla non metus auctor fringilla. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Nullam quis risus eget urna mollis ornare vel eu leo. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

Donec id elit non mi porta gravida at eget metus. Aenean lacinia bibendum nulla sed consectetur. Cras mattis consectetur purus sit amet fermentum. Maecenas faucibus mollis interdum. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Nullam quis risus eget urna mollis ornare vel eu leo.

Donec sed odio dui. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Nullam id dolor id nibh ultricies vehicula ut id elit. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.

Tables

Tables

.a-table

Overview

Description

Used to show content with similar types of details. Often used to compare similar products, services, rates, etc.

Best Practices

  • Do not use tables to establish page layouts. Use the grid for that purpose.
  • Keep table content short and avoid multiple line-breaks.

Colors

Swatch Name Hex Variable Usage
White #fefefe $color--white; Table odd row background color
Gray Lighter #f5f5f5 $color--gray--lighter; Table even row background color
Gray Light #e0e0e0 $color--gray--light; Table cell border colors
Text Color #2a2a2a $text__color; Text color.
Link Color #007dba $link__color; Link Color.

Example

Product Term APR(as low as)
Car or Light Truck Loan up to 48 months 2.59%
Car or Light Truck Loan up to 66 months 3.09%
Car or Light Truck Loan up to 72 months 3.34%
Car or Light Truck Loan up to 78 months 3.59%
Car or Light Truck Loan up to 84 months 4.84%

Footnotes

Vehicle value is based on MSRP or by a source approved by us. Your APR is based on our internal credit criteria. Listed APRs assume excellent credit, a 0.500000% discount for an automated payment method approved by us, a 0.500000% discount for a loan-to-value (LTV) that is 115% or less, and a 0.750000% discount for a loan amount of $20,000 or more. Regardless of available Discounts, 2.59% is the minimum APR offered. Minimum and maximum loan amounts apply. Ask us about other APR and longer term options. Please contact us for specific terms, rates, available discounts, and information about loans originated at dealerships that participate in Credit Union Direct Lending (CUDL).

Payment example based on a $20,000.00 loan: $439.07 at 2.59% APR with a 48 month term; $329.90 at 3.09% APR with a 66 month term; $306.93 at 3.34% APR with a 72 month term; $287.87 at 3.59% APR with a 78 month term; and $281.18 at 4.84% APR with an 84 month term. Your APR may differ based on your loan amount, loan-to-value (LTV), repayment method, and other factors.

text

Inline Elements

This is a text link.

Strong is used to indicate strong importance.

This text has added emphasis.

The b element is stylistically different text from normal text, without any special importance.

The i element is text that is set off from the normal text.

The u element is text with an unarticulated, though explicitly rendered, non-textual annotation.

This text is deleted and This text is inserted.

This text has a strikethrough.

Superscript®.

Subscript for things like H2O.

This small text is small for for fine print, etc..

Abbreviation: HTML.

Keyboard input: Cmd.

This text is a short inline quotation.

This is a citation

The dfn element indicates a definition.

The mark element indicates a highlight.

This is what inline code looks like.

This is sample output from a computer program.

The variable element, such as x = y.

Paragraph

A paragraph (from the Greek paragraphos, "to write beside" or "written beside") is a self-contained unit of a discourse in writing dealing with a particular point or idea. A paragraph consists of one or more sentences. Though not required by the syntax of any language, paragraphs are usually an expected part of formal writing, used to organize longer prose.

Preformatted Text 

  	
P R E F O R M A T T E D T E X T
! " # $ % & ' ( ) * + , - . /
0 1 2 3 4 5 6 7 8 9 : ; < = > ?
@ A B C D E F G H I J K L M N O
P Q R S T U V W X Y Z [ \ ] ^ _
` a b c d e f g h i j k l m n o
p q r s t u v w x y z { | } ~

Button Group

Button Group

.m-button-group

Overview

Description

A group of buttons.

Best Practices

  • Use for groups of related actions, such as in account interactions.
  • Avoid using for key calls-to-action.

Schema

Name Description Type Default Value Option(s)
modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - any
button_wrapper
 Wraps each button with a span tag for adding a margin between each button. boolean true true false
buttons
 Button object. The maximum number of buttons that can be added is three. object - any

Example

Button 1 Button 2 Button 3

Cards

Cards

.m-card

Overview

Description

Used to house content like articles or product previews. Useful in a grid layouts to show large amounts of content in an organized way.

Best Practices

  • Descriptions/Body copy should be about 130 characters.
  • Try to make Descriptions/Body copy no more than 3 lines.
  • When grouped with other panels, try and maintain consistent content structure—same amount of text, image styles, icon styles, etc.

Schema

Name Description Type Default Value Option(s)
attributes
 A Drupal-style attributes object with extra attributes to append to this component. object - any
card.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - any
card.heading
 The heading of the card string - any
card.heading.level
 The heading level of the card heading string h3 h1 h2 h3 h4 h5
card.heading.modifier_classes
 Specifies modifier classes for the heading. All class names should follow the ABEM methodology. string m-card__heading any
card.summary
 Summary text. string - any

Article Card

Article Card

.m-card--article

Description

Used to preview article or event content. Has space for an optional image.

Best Practices

  • When using multiple cards in a row, cards should be equal height.

Colors Used

Swatch Name Hex Variable Usage
Gray #666666 $color--gray Eyebrow text and icon color.
Link Color #007dba $link__color Heading color.

Example

Feature Card

Feature Card

.m-card--feature

Description

Use to describe product benefits.

Best Practices

  • Should use at least 4 at a time.
  • Headlines should be only one line and paragraph text should be approximately the same length.
  • Font Awesome Lite icons should be used for iconography.

Colors Used

Swatch Name Hex Variable Usage
Gray #666666 $color--gray Heading color.
Text Color #2a2a2a $text__color Text and icon color.

Example

Car Loans

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

Product Card

Product Card

.m-card--product

Description

Used to highlight product content.

Best Practices

  • Should include related color iconography.
  • When using multiple cards in a row, links in the card footer should align.
  • When using multiple cards in a row, cards should be equal height.

Colors Used

Swatch Name Hex Variable Usage
Gray #666666 $color--gray Heading color.
Text Color #2a2a2a $text__color Text and icon color.
Link Color #007dba $link__color Heading color.
Green #579904 $color--green Border top color.

Example

Car Loans

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

Resource Card

Resource Card

.m-card--resource

Best Practices

  • When using multiple cards in a row, arrow buttons in the card footer should align.

Colors Used

Swatch Name Hex Variable Usage
Text Color #2a2a2a $text__color Text and icon color.
Link Color #007dba $link__color Heading color.

Example

Car Loans

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

Card Testimonial

Editor

Editor Styles

.m-editor

Overview

Description

Catch all for general content styles.

Schema

Name Description Type Default Value Option(s)
attributes
 A Drupal-style attributes object with extra attributes to append to this component. object - any
editor.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - m-editor--section-header m-editor--resources-title m-editor--lg-section-header any

Large Section Header

Large Section Header

.m-editor--lg-section-header

Example

Live more confidently

We go beyond checking accounts or assisting with loans and mortgages. We are here to serve you with knowledge and financial education to help you grow more confident about your money and future.

Resources Title

Resources Title

.m-editor--resources-title

Example

Credit Card Resources

See More Resources

Section Header

Section Header

.m-editor--section-header

Example

These great features come with every checking account:

Footnotes

Footnotes

.m-footnote

Overview

Description

Used to link page content to additional content in the footer. Most often used for legal disclaimers.

Best Practices

  • Use a single footnote to convey a single idea. I.E. If there are multiple legal disclaimers that apply to the same page content, use multiple footnotes
  • Page footnotes should always start at 1
  • To remain ADA compliant, footnotes should have a link to return you to where you are on the page. For this reason, If the same footnote applies to multiple similar pieces of page content, only link the footnote in the first instance of that content.

Schema

Name Description Type Default Value Option(s)
attributes
 A Drupal-style attributes object with extra attributes to append to this component. object - any
footnote.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - any
footnote.heading
 Footnote heading used for ADA compliance; hidden by default. string Footnotes any
footnote.ref_label
 The label of the reference, typically a superscripted numerical link embedded in the content that links to the footnote reference. string - any
footnote.ref_link
 A superscript string that links the reference in the footnote to the label in the content string - any
footnote.reference
 The footnote reference text. string - any

Colors

Swatch Name Hex Variable Usage
Gray Lighter #f5f5f5 $color--gray--lighter Background color.
Gray #666666 $color--gray Text color.
Blue #007dba $color--blue Link color.

Example

Footnote Label

Car Loans

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

Footnote Reference

  • 1 Vehicle value is based on MSRP or by a source approved by us. Your APR is based on our internal credit criteria. Listed APRs assume excellent credit, a 0.500% discount for an automated payment method approved by us, a 0.500% discount for a loan-to-value (LTV) that is 115% or less, and a 0.750% discount for a loan amount of $20000 or more. Regardless of available Discounts, 2.09% is the minimum APR offered. Minimum and maximum loan amounts apply. Ask us about other APR and longer term options. Please contact us for specific terms, rates, available discounts, and information about loans originated at dealerships that participate in Credit Union Direct Lending (CUDL).

Form Calculator

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.

Product Highlight

Rates

Rate Callout

Banners

Deep Blue Banner with Cards

Light Blue Banner with Cards

X_banner Grid

Decision Tree

Decision Tree

.o-tree

Overview

Description

This is a work in progress.

Colors

Swatch Name Hex Variable Usage
Deep Blue #003970 $color--deep-blue; Text color
Blue Lighter #edf1f7 $color--blue--lighter; Background color
Blue #007dba $color--blue; Icon color
Blue Light #e1f6f9 $color--blue--light; Icon background color

Tree with Branch

Tree with Branch

Example

Find the checking account that's right for you

What's most important to you in a checking account?

  • No fees or account minimums

  • Earn Rewards and Dividens

  • Help Re-establishing finances

Tree with Terminal Leaf

Tree with Terminal Leaf

Example

  • Based on your answers we recommend:

    Extra Credit Checking

    • Members aged 13-221 can earn cash on money in the bank
    • $20 Minumum Required to Open
    • No monthly fees
    • Earn dividends on as little as $1 in your account

Branch

Branch

.o-tree__branch

Example

Is the account for someone between 13 and 22?

  • Yes

  • No

Leaf

Leaf

.o-tree__leaf

Example

No fees or account minimums

Leaf Terminal

Leaf Terminal

.o-tree__leaf--terminal

Example

  • Based on your answers we recommend:

    Extra Credit Checking

    • Members aged 13-221 can earn cash on money in the bank
    • $20 Minumum Required to Open
    • No monthly fees
    • Earn dividends on as little as $1 in your account

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

Product Highlight List

Sections

Section

.o-section

Overview

Description

Used to separate and segment page content. Related content should live within the same section.

Best Practices

  • Each section should be dedicated to one content type or message.

Schema

Name Description Type Default Value Option(s)
attributes
 A Drupal-style attributes object with extra attributes to append to this component. object - any
section.modifier_classes
 Specifies modifier classes. All class names should follow the ABEM methodology. string - any
section.width
 Specifies the width constraints of the section content. string md sm md
section.bkgcolor
 Specifies a hexidecimal background color for the section. string - any
section.bkgimage
 Specifies a background image for the section. string - any
section.padding_top
 Specifies top padding for the section. string md sm md lg
section.padding_bottom
 Specifies bottom padding for the section. string md sm md lg

Base

VACU Digital Style Guide

Overview

Design guidelines and tools to help web designers and developers create consistent and accessible user experiences for all VACU digital assets.*

Description

The purpose of this document is to outline the digital design system for Virginia Credit Union. Please reference this style guide when building digital assets for VACU to maintain consistent brand presentation, UX/UI best practices and ADA/WCAG compliance. To maintain a consistent brand and user experience across all digital properties it is important that all guidelines are followed.

The style guide is organized into the following sections:

  • Global - Style Guide outline and Descriptions, as well as global colors and font styles.
  • Atoms - Individual components such as paragraphs, blockquotes, and grid layouts.
  • Molecules - Individual elements made up of elements: buttons, cards, etc.
  • Organisms - Larger elements made up of molecules: banners, heroes, etc.
  • All - The complete list of all elements.

It is important that all VACU digital properties abide by ADA/WCAG standards so our content and designs are accessible to all users. For details on those guidelines please refer to VACU’s ADA Guidelines. When designing for ADA compliance, please consider these general guidelines:

  • Information and user interface components must be presentable to users in ways they can perceive. For example, Alt-text for images allows users using a screen reader to understand what is on the screen.
  • User interface components and navigation must be operable. This includes building keyboard controls for web applications.
  • Information and the operation of user interface must be understandable. This means making content legible through appropriate text size and color contrast.
  • Content must be robust enough that it can be interpreted reliably by a wide variety of user agents, including assistive technologies.

If you feel there are elements missing, your use-case isn’t addressed in this document, or you have any questions, please reach out to VACU’s Web Marketing Team.

*Content within this document is for illustrative purposes only. Any references to Virginia Credit Union products, services, rates or other related content are not necessarily correct or up-to-date. For information about Virginia Credit Union’s products and services please visit vacu.org.