LayoutRow component

Examples of various layout configurations using the LayoutRow component.

Commonly used variants

Full width LayoutRow

--full-max-width: 1fr;

<LayoutRow tag="div" variant="full-width"></LayoutRow>

Full LayoutRow

--full-max-width: 1fr;

<LayoutRow tag="div" variant="full"></LayoutRow>

Full content LayoutRow

--full-max-width: 1fr;

<LayoutRow tag="div" variant="full-content"></LayoutRow>

Popout LayoutRow

--popout-max-width: 1400px

<LayoutRow tag="div" variant="popout"></LayoutRow>

Content LayoutRow

--content-max-width: 1060px;

<LayoutRow tag="div" variant="content"></LayoutRow>

Inset Content LayoutRow

--inset-content-max-width: 840px;

<LayoutRow tag="div" variant="inset-content"></LayoutRow>

Less commonly used variants

Full start LayoutRow

Example full-track

<LayoutRow tag="div" variant="full-start"></LayoutRow>

Full end LayoutRow

Example full-track

<LayoutRow tag="div" variant="full-end"></LayoutRow>

Full content-nopad LayoutRow

Example full-track

<LayoutRow tag="div" variant="full-content-nopad"></LayoutRow>

Popout Start LayoutRow

Example popout start

<LayoutRow tag="div" variant="popout-start"></LayoutRow>

Popout End LayoutRow

Example popout end

<LayoutRow tag="div" variant="popout-end"></LayoutRow>

Content Start LayoutRow

Example content start

<LayoutRow tag="div" variant="content-start"></LayoutRow>

Content End LayoutRow

Example content end

<LayoutRow tag="div" variant="content-end"></LayoutRow>

Inset Content Start LayoutRow

Example inset content start

<LayoutRow tag="div" variant="inset-content-start"></LayoutRow>

Inset Content End LayoutRow

Example inset content end

<LayoutRow tag="div" variant="inset-content-end"></LayoutRow>