Font Face
Teva Sans Latin

Drafts & Templates
PBS Templates

Primitives & components context

Primitives & components: Teva Global

Voucher Bar

v0.0.0

A voucher bar is a container for a list of vouchers details. It is used to display a list of vouchers in a horizontal layout.

On smaller screens the voucher bar will scroll horizontally.

Voucher balance

Last updated: 16:02 UTC

Medicinal products

€ 14.500,00

Non-medicinal products

€ 14.500,00

Food supplements

€ 14.500,00

<!-- Voucher Bar  -->
<div class="vi-voucher-bar">
  <div class="vi-voucher-bar__cell">
    <div class="vi-flexbox align-items-center vi-flexbox--gap-20">
      <div class="vi-flexbox flex-column vi-flexbox--gap-0">
        <p class="mb-0 text-dominant font-weight-bold vi-type vi-type--text-small">
          Voucher balance
        </p>
        <p class="mb-0 text-neutral-50 vi-type vi-type--text-small">
          Last updated: 16:02 UTC
        </p>
      </div>
      <button aria-label="Your label here" class="vi-cell-button vi-btn-outline-icon vi-btn-outline-icon--sm vi-btn" type="button">
        <!-- Icon reload  -->
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="reload"><path d="M3 14 3.00010368 11.3179511C4.07503973 12.9345592 5.91309635 14 8 14 10.7421411 14 13.0546396 12.1604816 13.7708033 9.64813731L12.8089719 9.37355609C12.2121332 11.4671209 10.2850782 13 8 13 5.94967945 13 4.18759771 11.765903 3.41604198 10L7 10 7 9 2 9 2 14 3 14ZM13 2 12.9998963 4.68204894C11.9249603 3.06544082 10.0869037 2 8 2 5.25785892 2 2.94536037 3.83951835 2.22919672 6.35186269L3.19102815 6.62644391C3.78786679 4.53287908 5.71492185 3 8 3 10.0503206 3 11.8124023 4.23409704 12.583958 6L9 6 9 7 14 7 14 2 13 2Z"></path></svg>
      </button>
    </div>
  </div>
  <div class="vi-voucher-bar__cell">
    <p class="mb-0 text-accent-2 vi-type vi-type--text-small">
      Medicinal products
    </p>
    <p class="mb-0 text-accent-2 vi-type vi-type--text-small">
      € 14.500,00
    </p>
  </div>
  <div class="vi-voucher-bar__cell">
    <p class="mb-0 text-accent-2 vi-type vi-type--text-small">
      Non-medicinal products
    </p>
    <p class="mb-0 text-accent-2 vi-type vi-type--text-small">
      € 14.500,00
    </p>
  </div>
  <div class="vi-voucher-bar__cell">
    <p class="mb-0 text-accent-2 vi-type vi-type--text-small">
      Food supplements
    </p>
    <p class="mb-0 text-accent-2 vi-type vi-type--text-small">
      € 14.500,00
    </p>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.


Usage documentation #

Usage documentation can be found here.


Changelog #

Changelog

Fix

  • 06 Jun 2023 - Show correct icon.

Added

  • Initial draft