Open Close
Teva VIsion
Font Face
Teva Sans Latin
Drafts & Templates
PBS Templates
Primitives & components context
Teva Global
Primitives & components: Teva Global

Grid

v0.0.0

Augments BS grid system. Columns work as described in BS grid system.

Rows are augmented with .vi-grid and .vi-grid__row to have beter control over gaps. By default there are nog gaps.

1
2
3
4
5 
<div class="vi-grid">
  <div class="vi-grid__row">
    <div class="col-12">
      ...
    </div>
    <div class="col-12 col-lg-6 col-xl-3">
      ...
    </div>
    <div class="col-12 col-lg-6 col-xl-3">
      ...
    </div>
    <div class="col-12 col-lg-6 col-xl-3">
      ...
    </div>
    <div class="col-12 col-lg-6 col-xl-3">
      ...
    </div>
  </div>
</div>

Horizontal Gaps #

Use:

  • .vi-grid__row--hgap-{gap}
  • .vi-grid__row--hgap-{breakpoint}-{gap}

for gaps between columns. Where:

  • breakpoint can be any of the values sm, md, lg xl or xxl
  • gap can be any fo the values 15, 30, 40, 50, 60 or 100
1
2
3
4
5 
<div class="vi-grid">
  <div class="vi-grid__row vi-grid__row--hgap-15">
    <div class="col-12">...</div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
  </div>
</div>

Vertical Gaps #

Use:

  • .vi-grid__row--vgap-{gap}
  • .vi-grid__row--vgap-{breakpoint}-{gap}

for gaps between rows. Where:

  • breakpoint can be any of the values sm, md, lg xl or xxl
  • gap can be any fo the values 15, 30, 40, 50, 60 or 100
1
2
3
4
5 
<div class="vi-grid">
  <div class="vi-grid__row vi-grid__row--vgap-15">
    <div class="col-12">...</div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
  </div>
</div>

Gaps #

Use:

  • .vi-grid__row--grid-{gap}
  • .vi-grid__row--grid-{breakpoint}-{gap}

for equal gaps between columns and rows. Where:

  • breakpoint can be any of the values sm, md, lg xl or xxl
  • gap can be any fo the values 15, 30, 40, 50, 60 or 100
1
2
3
4
5 
<div class="vi-grid">
  <div class="vi-grid__row vi-grid__row--grid-15">
    <div class="col-12 sg-strip-dots">
      ...
    </div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
  </div>
</div>

Modern #

Use modifier .vi-grid--modern to use the modern grid system. This is the default grid system is not using css grid but flexbox because a long standing requirements.

1
2
3
4
5 
<div class="vi-grid vi-grid--modern">
  <div class="vi-grid__row vi-grid__row--grid-15">
    <div class="col-12 sg-strip-dots">
      ...
    </div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
    <div class="col-12 col-lg-6 col-xl-3">...</div>
  </div>
</div>

Stylesheets #

The following stylesheet is required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Added

  • 02 Apr 2025 - feat(grid): add --modern modifier to have more modern grid.
  • Add gap value 100
  • Add gap value 50
  • Add gap value 60
  • Initial draft