Getting Started

Components

Simplified Grid

This shows grid layout used by Nova

Two Items In Grid

This shows how you can responsively place two items in grid.

Item One
Item Two
Copy
<div class="layout grid--gap grid--two-cols"> <section class="grid__item item-1">Item One</section> <section class="grid__item item-2">Item Two</section> </div>

Three Items In Grid

This shows how you can responsively place three items in grid.

Item One
Item Two
Item Three
Copy
<div class="layout grid--gap grid--three-cols"> <section class="grid__item item-1">Item One</section> <section class="grid__item item-2">Item Two</section> <section class="grid__item item-3">Item Three</section> </div>

Layout items using Autofill

This is will layout as many item that it can fill inside the container. This is also responsive.

Item One
Item Two
Item Three
Item Four
Item Five
Item Six
Item Seven
Item Eight
Copy
<div class="layout grid--gap grid-auto-fill"> <section class="grid__item item-1">Item One</section> <section class="grid__item item-2">Item Two</section> <section class="grid__item item-3">Item Three</section> <section class="grid__item item-3">Item Four</section> <section class="grid__item item-3">Item Five</section> <section class="grid__item item-3">Item Six</section> <section class="grid__item item-3">Item Seven</section> <section class="grid__item item-3">Item Eight</section> </div>

Span items in columns and rows

You can use our built in css variables to span items.

Item One
Item Two
Item Three
Copy
<div class="layout grid--gap"> <section class="grid__item item-1 grid-span-2">Item One</section> <section class="grid__item item-2 grid-span-4">Item Two</section> <section class="grid__item item-3 grid-span-6">Item Three</section> </div>