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

Flexbox

v0.0.0

A commonly used flexbox layout.

Vice scenester Keytar hammock Vegan selfies Flannel chia Ugh viral Artisan cleanse 
<div class="vi-flexbox">
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Vice scenester</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Keytar hammock</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Vegan selfies</span>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Flannel chia</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Ugh viral</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Artisan cleanse</a>
</div>

Wrap #

Use modifier --wrap to wrap the flexbox items. (deprecated)

Please use Bootstraps flex-wrap instead for more finegraned control.

Yr goth Pabst chicharrones Organic fingerstache Cleanse shoreditch Occupy iphone Brunch celiac Celiac aesthetic Yuccie pop-up 
<div class="vi-flexbox flex-wrap">
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Yr goth</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Pabst chicharrones</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Organic fingerstache</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Cleanse shoreditch</span>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Occupy iphone</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Brunch celiac</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Celiac aesthetic</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Yuccie pop-up</a>
</div>

Gaps #

Use modifier --gap-{value} control the gap widths where value can be 0, 2, 20, 30, 40, 50 or 60

Narwhal mumblecore Loko literally Skateboard aesthetic Selvage seitan Lomo squid Shoreditch hella Chicharrones wolf Forage stumptown 
<div class="vi-flexbox vi-flexbox--wrap vi-flexbox--gap-40">
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Narwhal mumblecore</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Loko literally</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Skateboard aesthetic</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Selvage seitan</span>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Lomo squid</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Shoreditch hella</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Chicharrones wolf</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Forage stumptown</a>
</div>

Promo #

Example usage of promo badges, gap is 2px.

Flex direction controlled by Bootstrap utility classes:

  • flex-row (default)
  • flex-row-reverse
  • flex-column
  • flex-column-reverse

Also note the usage of the Bootstrap utility class align-items-start when the direction is column.

--promo-1 --promo-2 --promo-3 --promo-4 --promo-5 --promo-6 --promo-7
--promo-1 --promo-2 --promo-3 --promo-4 --promo-5 --promo-6 --promo-7
--promo-1 --promo-2 --promo-3 --promo-4 --promo-5 --promo-6 --promo-7
--promo-1 --promo-2 --promo-3 --promo-4 --promo-5 --promo-6 --promo-7 
<div class="vi-flexbox flex-row vi-flexbox--gap-2">
  <!-- Badge (mods: --promo, --promo-1) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-1">--promo-1</span>
  <!-- Badge (mods: --promo, --promo-2) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-2">--promo-2</span>
  <!-- Badge (mods: --promo, --promo-3) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-3">--promo-3</span>
  <!-- Badge (mods: --promo, --promo-4) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-4">--promo-4</span>
  <!-- Badge (mods: --promo, --promo-5) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-5">--promo-5</span>
  <!-- Badge (mods: --promo, --promo-6) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-6">--promo-6</span>
  <!-- Badge (mods: --promo, --promo-7) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-7">--promo-7</span>
</div>
<hr>
<div class="vi-flexbox flex-row-reverse vi-flexbox--gap-2">
  <!-- Badge (mods: --promo, --promo-1) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-1">--promo-1</span>
  <!-- Badge (mods: --promo, --promo-2) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-2">--promo-2</span>
  <!-- Badge (mods: --promo, --promo-3) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-3">--promo-3</span>
  <!-- Badge (mods: --promo, --promo-4) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-4">--promo-4</span>
  <!-- Badge (mods: --promo, --promo-5) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-5">--promo-5</span>
  <!-- Badge (mods: --promo, --promo-6) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-6">--promo-6</span>
  <!-- Badge (mods: --promo, --promo-7) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-7">--promo-7</span>
</div>
<hr>
<div class="vi-flexbox flex-column align-items-start vi-flexbox--gap-2">
  <!-- Badge (mods: --promo, --promo-1) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-1">--promo-1</span>
  <!-- Badge (mods: --promo, --promo-2) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-2">--promo-2</span>
  <!-- Badge (mods: --promo, --promo-3) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-3">--promo-3</span>
  <!-- Badge (mods: --promo, --promo-4) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-4">--promo-4</span>
  <!-- Badge (mods: --promo, --promo-5) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-5">--promo-5</span>
  <!-- Badge (mods: --promo, --promo-6) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-6">--promo-6</span>
  <!-- Badge (mods: --promo, --promo-7) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-7">--promo-7</span>
</div>
<hr>
<div class="vi-flexbox flex-column-reverse align-items-start vi-flexbox--gap-2">
  <!-- Badge (mods: --promo, --promo-1) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-1">--promo-1</span>
  <!-- Badge (mods: --promo, --promo-2) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-2">--promo-2</span>
  <!-- Badge (mods: --promo, --promo-3) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-3">--promo-3</span>
  <!-- Badge (mods: --promo, --promo-4) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-4">--promo-4</span>
  <!-- Badge (mods: --promo, --promo-5) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-5">--promo-5</span>
  <!-- Badge (mods: --promo, --promo-6) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-6">--promo-6</span>
  <!-- Badge (mods: --promo, --promo-7) -->
  <span class="vi-badge vi-badge--promo vi-badge--promo-7">--promo-7</span>
</div>

Stylesheets #

The following stylesheet is required to display this component.

The following additional stylesheets are used to display the example(s).

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Changed

  • 11 Apr 2023 - Deprecated –wrap modifier.

Added

  • 22 May 2023 - Added 0 gap modifier
  • 11 Apr 2023 - Added 2px gap modifier
  • 03 Apr 2023 - Added gap modifiers
  • 29 Aug 2022 - Initial draft