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

Flexbox

v0.0.0

A commonly used flexbox layout.

Cronut xoxo Health kombucha Quinoa celiac Vhs flannel Chambray cardigan Tacos stumptown 
<div class="vi-flexbox">
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Cronut xoxo</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Health kombucha</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Quinoa celiac</span>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Vhs flannel</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Chambray cardigan</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Tacos stumptown</a>
</div>

Wrap #

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

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

+1 skateboard Pop-up chambray Tattooed celiac Swag cred Street lo-fi Butcher park Venmo roof Pug pabst 
<div class="vi-flexbox flex-wrap">
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">+1 skateboard</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Pop-up chambray</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Tattooed celiac</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Swag cred</span>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Street lo-fi</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Butcher park</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Venmo roof</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Pug pabst</a>
</div>

Gaps #

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

Cold-pressed sartorial Kinfolk readymade Vegan bushwick Austin occupy Readymade pickled Helvetica umami Pug tattooed 8-bit pinterest 
<div class="vi-flexbox vi-flexbox--wrap vi-flexbox--gap-40">
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Cold-pressed sartorial</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Kinfolk readymade</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Vegan bushwick</span>
  <!-- Badge (mods: --squish) -->
  <span class="vi-badge vi-badge--squish">Austin occupy</span>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Readymade pickled</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Helvetica umami</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">Pug tattooed</a>
  <!-- Button type: solid (mods: --squish) -->
  <a href="#" class="vi-btn-solid vi-btn vi-btn--squish">8-bit pinterest</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