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

Strip

v0.0.0

Strips are used to represent a highlighted post or act as a hero for introductory copy, displayed at full container width. It can contain a picture, taxonomy, a headline and a link to the full content, depending the purpose.

The following strips are defined:

epic, classic, neutral, moment, intro, profile, mood, tagline, timeline, contributor, hero, hero navigation, neutral, visual, site split, circle, feature

Epic
docs
alt text

Actually skateboard farm-to-table irony butcher freegan

Sustainable twee tilde swag plaid. Salvia yuccie vice readymade.

Meh meggings
Classic
docs
alt text

Goth everyday pug twee tousled

Whatever paleo normcore. Disrupt williamsburg iphone tilde plaid microdosing.

Tofu letterpress
Neutral
docs
alt text

Irony selfies seitan kinfolk bespoke yolo

Viral selfies bespoke shabby chic godard. Tilde 8-bit aesthetic lomo occupy drinking you probably haven't heard of them retro.

Letterpress thundercats
Moment
docs
alt text

Banjo leggings pinterest meggings ramps

Leggings thundercats meh tumblr small batch echo try-hard keffiyeh. Neutra roof waistcoat salvia pitchfork actually semiotics. Hella biodiesel kogi fixie knausgaard scenester cold-pressed.

Roof swag
Intro
docs
alt text

Biodiesel kickstarter lumbersexual mustache chia

Thundercats fashion axe tilde pug phlogiston. Health trust fund irony poutine tilde aesthetic. Single-origin coffee direct trade stumptown mlkshk meh. Master disrupt iphone wes anderson. Ramps crucifix art party biodiesel cornhole neutra chia celiac. Franzen cold-pressed xoxo retro listicle try-hard.

Visual
docs
alt text

Franzen post-ironic waistcoat squid cold-pressed

Salvia farm-to-table
Profile
docs
Coy Ratke

Syreeta Hermiston

Global Community-Services Strategist

Lomo meditation mumblecore hammock flexitarian. Squid ugh retro. Bushwick occupy meh scenester kickstarter narwhal ramps. Hoodie normcore sustainable gastropub 90's xoxo organic.

Letterpress quinoa
Mood
docs
alt text

Lumbersexual squid pbr&b leggings tattooed bitters meh

Tagline
docs

Committed to improving the lives of patients

Keffiyeh heirloom pbr&b sartorial. Ramps bushwick chartreuse wayfarers gluten-free intelligentsia fashion axe.

Cold-pressed organic
Timeline
docs

Authentic microdosing fixie fingerstache church-key

Whatever cold-pressed authentic bushwick meggings tousled bespoke portland. Whatever polaroid normcore kitsch. Mustache cold-pressed vice fashion axe mixtape. Occupy chicharrones gastropub cardigan. Franzen retro pabst. Everyday five dollar toast forage flannel gluten-free cronut knausgaard.

Contributor
docs
Sid Ullrich

Brice Farrell

Patient Contributor

Brice Farrell is Phlogiston art party hashtag wes anderson godard. Plaid trust fund biodiesel hoodie blog actually.

  • Living with condition: 10 years
  • Location: Winnipeg, Manitoba, Canada
  • 4
  • 14
  • 5
Hero
docs
alt text

Skateboard kombucha gentrify literally godard

Xoxo slow-carb ethical messenger bag. 90's cred goth. Brooklyn raw denim five dollar toast organic.

8-bit hashtag
Hero Navigation
docs
alt text

Tousled selvage bitters sartorial etsy.

Feature
docs
alt text

Keffiyeh listicle chillwave pickled.

Tofu chartreuse 8-bit iphone crucifix ennui poutine hella.

See product
alt text

Keffiyeh listicle chillwave pickled.

Tofu chartreuse 8-bit iphone crucifix ennui poutine hella.

See product
Site Split
docs
alt text alt text

Ennui literally.

Drinking kickstarter ugh. Beard raw denim venmo wolf vice +1 seitan. Paleo tote bag quinoa offal. Mlkshk seitan street craft beer distillery butcher marfa next level. Biodiesel small batch heirloom yolo.

Artisan cliche

Chia salvia.

Cronut pug literally iphone lomo. Flexitarian skateboard cred yolo irony. Food truck leggings austin.

Bushwick 8-bit
Circle
docs
alt text
Image courtesy of the Library of Congress

Ennui cardigan helvetica forage heirloom synth

Yuccie tote bag raw denim 3 wolf moon +1 squid. Fingerstache pinterest taxidermy health franzen church-key.

Humblebrag cardigan

Stylesheets #

The following stylesheets are required to display this component.

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

JavaScript #

The following javascripts are required to display this component.

Usage documentation #

Usage documentation can be found here.

Changelog #

Changelog

Changed

  • 17 Jan 2023 - Changed subtitle element to p.
  • 6 Dec 2022 - Structure change to support subtitles to Strip Visual
  • 22 Aug 2022 - Make the blur optional.
  • PBS: timeline strip.
  • PBS: accent-2 button-colors can now be overridden from strip perspective.
  • Accessibility: Video, add role and aria-label to triggers with video button (classic, epic, hero)
  • Art direction Teva Sans

Fix

  • 03 Dec 2024 - fix(strip) - Art direction accesibility text overlay on image. Strip Visual
  • 6 Dec 2022 - Make content of neutral strip pointer accessible.
  • 5 Oct 2022 - container width collapses when short content on Strip Visual
  • Incorrect modifier for Rectangular Image used for Strip Visual with background video.
  • RTL Support for Strip Visual.
  • Click area of button on strip visual and neutral
  • Double focus ring on trigger
  • Positioning Controls Slider with video buttons.
  • Fix Epic alignment regression.
  • To restrict the content length of the Intro Strip, the copy is placed inside the Content Layout component.
  • Intro strip safari issue.

Added