Skip to main content

Developers - CSS Layout System

Templates Grid

Grid with 1 Large, 2 Small​

Grid with 3 items. The first item is 2/3 of the width and the other two items are 1/3 of the width.

Classes:

sc-lt-grid sc-tp-1l_2sq

Custom tag:

<inner-section template="1l_2sq"></inner-section>

Key for theme.json:

"grid_1l_2sq";

grid_1l_2sq

Grid with 2 Small, 1 Large​

Grid with 3 items. The first and third items are 1/3 of the width and the second 2/3 of the width.

Classes:

sc-lt-grid sc-tp-2s_1l

Custom tag:

<inner-section template="2s_1l"></inner-section>

Key for theme.json:

"grid_2s_1l";

grid_2s_1l

Grid with 3 Small, 1 Large​

Grid with 4 items. The first item is 2/3 of the width and half of the height, the second 1/3 of the width and full height, the last items are 1/3 of the width and half of the height.

Classes:

sc-lt-grid sc-tp-3s_1l

Custom tag:

<inner-section template="3s_1l"></inner-section>

Key for theme.json:

"grid_3s_1l";

grid_3s_1l

Grid with 1 Large, 3 Small​

Grid with 4 items. The first item is 1/3 of the width and full height, the second 2/3 of the width and half of the height, the last items are 1/3 of the width and half of the height.

Classes:

sc-lt-grid sc-tp-1l_3sm

Custom tag:

<inner-section template="1l_3sm"></inner-section>

Key for theme.json:

"grid_1l_3sm";

grid_1l_3sm

Grid with 1 Large, 2 Small, 1 Large​

Grid with 4 items. The first and third items are full height, the second and fourth items are half of the height

Classes:

sc-lt-grid sc-tp-1l_2s_1l

Custom tag:

<inner-section template="1l_2s_1l"></inner-section>

Key for theme.json:

"grid_1l_2s_1l";

grid_1l_2s_1l

Grid with 1 Large, 3 Small​

Grid with 4 items. The first item is 2/3 of the width and full height, the other items are all 1/3 of the width and 1/3 of the height.

Classes:

sc-lt-grid sc-tp-1l_3s

Custom tag:

<inner-section template="1l_3s"></inner-section>

Key for theme.json:

"grid_1l_3s";

grid_1l_3s

Grid with 3 Small, 1 Large​

Grid with 4 items. The first, third and fourth items are 1/3 of the width and 1/3 of the height, the second item is 2/3 of the width and full height.

Classes:

sc-lt-grid sc-tp-3sq_1l

Custom tag:

<inner-section template="3sq_1l"></inner-section>

Key for theme.json:

"grid_3sq_1l";

grid_3sq_1l

Grid with 4 Small, 1 Large​

This is a five-column layout where the first item is 1/3 of the width and full height, the other items are 1/3 of the width and half of the height.

Classes:

sc-lt-grid sc-tp-4s_1l

Custom tag:

<inner-section template="4s_1l"></inner-section>

Key for theme.json:

"grid_4s_1l";

grid_4s_1l

Grid with 1 Large, 4 Small​

This is a five-column layout where the first item is 1/3 of the width and full height, the other items are 1/3 of the width and half of the height.

Classes:

sc-lt-grid sc-tp-1l_4s

Custom tag:

<inner-section template="1l_4s"></inner-section>

Key for theme.json:

"grid_1l_4s";

grid_1l_4s

Grid with 3 Small, 2 Large​

This is a five-column layout where the first item is 1/3 of the width and full height, the other items are 1/3 of the width and half of the height.

Classes:

sc-lt-grid sc-tp-3s_2l

Custom tag:

<inner-section template="3s_2l"></inner-section>

Key for theme.json:

"grid_3s_2l";

grid_3s_2l

Grid with 4 Small, 1 Large​

This is a five-column layout where the first item is 1/3 of the width and full height, the other items are 1/3 of the width and half of the height.

Classes:

sc-lt-grid sc-tp-h4s_4l

Custom tag:

<inner-section template="h4s_4l"></inner-section>

Key for theme.json:

"grid_4s_1l";

hgrid_4s_1l

Grid with 4 Small, 2 Large​

This is a six-column layout where the first item is 1/3 of the width and full height, the other items are 1/3 of the width and half of the height.

Classes:

sc-lt-grid sc-tp-4s_2l

Custom tag:

<inner-section template="4s_2l"></inner-section>

Key for theme.json:

"vgrid_4s_2l";

vgrid_4s_2l