@bnnvara/grids

Grids for the BNNVARA design system

Usage no npm install needed!

<script type="module">
  import bnnvaraGrids from 'https://cdn.skypack.dev/@bnnvara/grids';
</script>

README

Grids

The grid consists of 12 columns and includes breakpoints to adapt to different screen sizes.

Design & API Documentation

DEMO Grids

Patterns library

Installation

npm install @bnnvara/grids --save

Basic Usage

import { ContentGrid } from '@bnnvara/grids';

HTML Structure

<ContentGrid> elements </ContentGrid>

Variants

ContentGrid

A responsive 12-column grid layout.

ArticleTitle

Specific layout for an article title.

ImageGrid

Layout for an image in the grid.

ParagraphGrid

Layout for a paragraph in the grid.

GridTitle

Layout for a grid title.

GridCard

Layout for a Card in the grid.

LargeGridCard

Layout for a Large Card in the grid.

GridSpacer

Spacing in the grid.

ArticleSpacer

Spacing specifically used in an article.