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

.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

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

.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

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

.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

.a-eyebrow--with-icon

Example

Article

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

.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

.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

Article

Ways to Save Using a Tax Refund or Bonus
Insider Tip

All this clutter used to be money.
Insider Tip

How much is my sanity really worth?
Event

Repaying Student Loans Webinar
Insider Tip

How do you file your taxes?
Article

Financial Preparation Before a Natural Disaster

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

.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

.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

.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

.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

.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

.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

.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

.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

.a-icon--tree

Description

Used on Decision Tree components.

Example

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

Links

.a-link

Overview

Description

Work in progress. Links will be removed as a separate component. Links connect the user to different web pages within a site and to external websites.

Best Practices

Link as often as possible. If there is content within a page that references content elsewhere on the site, link to it.

Schema

Name	Description	Type	Default Value	Option(s)
link.modifier_classes	Specifies modifier classes. All class names should follow the ABEM methodology.	`string`	-	`any`
link.text		`string`	-	`any`
link.url		`string`	-	`any`

Example

This is the link content text

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

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

Description

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

Example

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

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

.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

.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

Media Image with Caption

.a-media--with-caption

Description

Alignment is set in the editor for embedded media.

Example

Media Image Aligned Left

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

Description

Alignment is set in the editor for embedded media.

Example

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 Aligned Center

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

Description

Alignment is set in the editor for embedded media.

Example

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 Aligned Right

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

Description

Alignment is set in the editor for embedded media.

Example

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

.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

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.

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 H₂O.

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.

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.

  	
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 { | } ~

Buttons

Overview

Description

Best Practices

Schema

Primary Button

Description

Colors Used

Example

Secondary Button

Description

Colors Used

Example

Eyebrows

Overview

Description

Best Practices

Schema

Example

Eyebrow with Icon

Example

Grids

Overview

Description

Best Practices

Schema

Two-up Block Grid

Schema

Example

Car Loans

Mortgages

Checking

Virginia CU Realty

Three-up Block Grid

Schema

Example

Four-up Block Grid

Schema

Example

Free debit card

Nationwide ATMs

No-fee withdrawals

Online access

Digital wallets

Mobile banking

Paper checks

Phone banking

Two Column Grids

Schema

Example

50-50

Car Loans

Car Loans

75-25

Car Loans

Car Loans

25-75

Car Loans

Car Loans

66-33

Car Loans

Car Loans

33-66

Car Loans

Car Loans

Three Column Grids

Schema

Example

33-33-33

Car Loans

Car Loans

Car Loans

50-25-25

Car Loans

Car Loans

Car Loans

25-50-25

Car Loans

Car Loans

Car Loans

All your needs
under one roof