Layout/Grid
Layout/Grid
heroes
Hero units are designed for full-screen landing pages. They're meant to highlight or market something. They may be incorporated into regular content pages also, but they will only be as wide as the content. They follow the basic format of:
Section Classes:
- hero
- defines a full-screen marketing section
- photo
- entire section will have a background photo (sizes are p30,p40,p50)
photo is applied as background image either inline or via css - headline
- used for adding
<h1>
along bottom of photo - quote
- used for adding marketing quote
Article Classes:
- contained
- maximum width of 75rem, centered on screen
- pad
- adds 1rem of padding for easier readability
Virtual Tour
Binghamton is located in the Southern Tier of upstate New York, situated on 930 acres of land, and just 3 hours from New York City and Philadelphia; 5 hours from Boston and Washington, DC.
“One of the nation’s best for academics, affordability and career prospects, affordability and career prospects.”
The Princeton Review, 2016Columns Snippet
Two Columns
Using 'Columns' snippet adds 2 equal columns.
Up is of the most common directions. It's also a fantastic Pixar film.
Down is the y-axis relative vertical direction opposed to up. It's also what you feel when you play the blues.
Three Columns
Code below adds another column to the default 2 columns
Up is of the most common directions. It's also a fantastic Pixar film.
Down is the y-axis relative vertical direction opposed to up. It's also what you feel when you play the blues.
Down is the y-axis relative vertical direction opposed to up. It's also what you feel when you play the blues.
Custom Grid (Columns and Rows)
Basic Grids
Start by adding an element with a class of .row. This will create a horizontal block to contain vertical columns. Then add elements with a .column class within that row. Specify the widths of each column with the .small-#, .medium-#, and .large-# classes.
Small Grids
Small grids expand to large screens easier than large grids cram into small screens. Medium and Large sized screens will inherit styles from small grid.
Medium Grids
Medium sized screens will inherit styles from small, unless you specify a different layout using the medium grid classes.
Advanced Grid
Advanced grid options include Gutters between 2 columns in a row, collapse/uncollapse rows, Centered Columns, Block grid (shorthand way to create equally-sized columns). Please refer to Foundation Docs for more information on the grid system and advanced grid options