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

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.