Font Face
Teva Sans Latin

Drafts & Templates
PBS Templates

Primitives & components context

Primitives & components: Teva SCS

Content Examples

v0.0.0

The examples below show possible content for the answer column of the Contact Decision Tree component.

It is placed in the same typographic scoping as it would in the answer column for testing.


Address #

In Amsterdam, the European
Headquartes of Teva is located:

Teva Europe B.V. Offices
Piet Heinkade 107
1019 GM Amsterdam

Directions (Google Maps)

+31 (0)20-2193000 info@tevaeurope.com

<p>In Amsterdam, the European<br>
   Headquartes of Teva is located:</p>
<p>Teva Europe B.V. Offices<br>
  Piet Heinkade 107<br>
  1019 GM Amsterdam</p>
<p>
  <a href="#sample">Directions (Google Maps)</a>
</p>
<p>
  +31 (0)20-2193000
  <a href="#sample">info@tevaeurope.com</a>
</p>

Call To Action #

Fixie whatever church-key

Chartreuse salvia tacos asymmetrical tilde 90's celiac umami vice synth.

Brunch seitan irony polaroid artisan farm-to-table street carry forage cray.

View All Articles

<h5>Fixie whatever church-key</h5>
<p>
  Chartreuse salvia tacos asymmetrical tilde 90's celiac umami vice synth.
</p>
<p>
  Brunch seitan irony polaroid artisan farm-to-table street carry forage cray.
</p>
<p>
  <!-- Button type: solid  -->
  <a href="#" class="vi-btn-solid vi-btn">View All Articles</a>
</p>

Form #

Beard hoodie heirloom
<h5>Beard hoodie heirloom</h5>
<!-- Form  -->
<form action="#form-102ab9" autocomplete="off" class="vi-form vi-typesystem" data-validate="true" novalidate>
  <div class="form-group">
    <label for="control-ac6c54">Your Name</label>
    <input aria-required="true" class="form-control" id="control-ac6c54" name="name-9539d3" placeholder="Your Name" required type="text">
  </div>
  <div class="form-group">
    <label for="control-ad16a8">Your Email Address</label>
    <input aria-required="true" class="form-control" id="control-ad16a8" name="name-bdb545" pattern="[^@\s]+@[^@\s]+\.[^@\s]+" placeholder="Your Email Address" required type="email">
  </div>
  <div class="form-group">
    <label for="control-97d30c">Your Message</label>
    <textarea aria-required="true" class="form-control" id="control-97d30c" name="name-435ae6" placeholder="Your Message" required></textarea>
  </div>
  <div class="form-group">
    <div class="custom-file">
      <input class="custom-file-input" id="control-247513" name="name-52921e" type="file">
      <label class="custom-file-label" data-browse="Find files" for="control-247513">
        Pick file
      </label>
    </div>
  </div>
  <div class="form-group">
    <div class="custom-checkbox custom-control">
      <input aria-required="true" class="custom-control-input" id="control-8a701b" name="name-a06877" required type="checkbox">
      <label class="custom-control-label" for="control-8a701b">
        I agree with the
        <a href="#sample">terms</a>
      </label>
    </div>
  </div>
  <div class="mt-n10 mb-20 vi-form__feedback vi-form__feedback--hint">All fields required</div>
  <!-- Button type: solid  -->
  <button type="submit" class="vi-btn-solid vi-btn">Send Message</button>
</form>

Map #

Shoreditch ennui poutine

Driving instructions

<h5>Shoreditch ennui poutine</h5>
<div class="embed-responsive embed-responsive-16by9 mb-3">
  <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2388.328123206228!2d6.540950951444106!3d53.22989419103006!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c9cd3c2fbd6503%3A0x3049bc9631c0defb!2sShopping+Centre+Paddepoel!5e0!3m2!1sen!2snl!4v1531988944136" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
</div>
<p>
  <a href="#sample">Driving instructions</a>
</p>

Changelog #

Changelog

Fix

  • 29 Aug 2024 - Fix file input issue.
  • 23 Nov 2022 - signature field / contact decision tree integration
  • Empty container focus.
  • Prevent focus scroll conflicting with positioning
  • Incorrect position loading indicator when direction RTL.

Added

  • Accessibility: Keyboard accessible.
  • RTL support
  • Initial draft