Vivid API

Layout

Easily arrange elements in a grid using CSS grid layout and predefined sizes and spaces.

Usage

import { registerLayout } from '@vonage/vivid-api';


registerLayout('your-prefix');

CSS Variables

Grid-template-columns

Use custom grid-template-columns by setting --layout-grid-template-columns.

This will override the auto-sizing and column-basis attributes. The default value is repeat(<auto-sizing>, minmax(<column-basis>, 1fr)).

Grid-template-rows

Control the grid-template-rows of the layout by setting --layout-grid-template-rows. The default value is min-content.

Grid-gap

Layout-column-gap

Use a custom column-gap by setting --layout-column-gap.

This will override the column-spacing attribute.

Layout-row-gap

Use a custom row-gap by setting --layout-row-gap.

This will override the row-spacing attribute.

API Reference

Properties

PropertyTypeDefaultDescription
autoSizing'fill' | 'fit'Controls how the grid's behaves with empty column tracks
columnBasis'small' | 'medium' | 'large' | 'block'Controls the `min-width` of columns
columnSpacing'small' | 'medium' | 'large'Controls the size of the spacing between columns
gutters'small' | 'medium' | 'large'Controls the amount of margin around the component
rowSpacing'small' | 'medium' | 'large'sets the initial preferred spacing of a row from predefined available options
PropertyTypeDefaultDescription
auto-sizing'fill' | 'fit'Controls how the grid's behaves with empty column tracks
column-basis'small' | 'medium' | 'large' | 'block'Controls the `min-width` of columns
column-spacing'small' | 'medium' | 'large'Controls the size of the spacing between columns
gutters'small' | 'medium' | 'large'Controls the amount of margin around the component
row-spacing'small' | 'medium' | 'large'sets the initial preferred spacing of a row from predefined available options

Slots

NameDescription
defaultDefault slot.
NameDescription
defaultDefault slot.