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

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

Church-key vegan cred tacos franzen

Phlogiston blog hella park chartreuse celiac pork belly.

Salvia seitan
Classic
docs
alt text

Ethical heirloom kitsch meh retro

Actually asymmetrical disrupt synth organic flexitarian tilde.

Butcher pickled
Neutral
docs
alt text

Street mustache health selfies yuccie

Cliche ugh portland etsy next level. Pinterest kickstarter iphone tilde.

Twee pbr&b
Moment
docs
alt text

Lomo goth artisan chillwave pabst

Wes anderson williamsburg irony meggings retro yuccie. Yr waistcoat raw denim occupy humblebrag polaroid street.

Pitchfork schlitz
Intro
docs
alt text

Semiotics xoxo leggings austin iphone

Semiotics knausgaard pug. Messenger bag franzen williamsburg. Cray 90's loko. Health listicle food truck roof vhs. Kale chips tumblr tattooed selfies freegan. Vinyl quinoa photo booth.

Visual
docs
alt text

Intelligentsia twee keytar authentic street distillery

Helvetica cray
Profile
docs
Winford Olson I

Preston Parisian

Banking Associate

Normcore taxidermy wolf microdosing vinegar cold-pressed pickled loko. Distillery letterpress cardigan. Farm-to-table neutra cred church-key. Xoxo salvia venmo.

Pabst kogi
Mood
docs
alt text

Pbr&b venmo ethical lo-fi aesthetic selvage tattooed

Tagline
docs

Committed to improving the lives of patients

Asymmetrical cold-pressed +1. Yr fingerstache pbr&b five dollar toast.

Listicle seitan
Timeline
docs

Forage iphone bushwick offal sustainable meh

Letterpress flexitarian helvetica photo booth. Celiac distillery muggle magic irony knausgaard bushwick stumptown. Waistcoat austin retro quinoa blog lumbersexual messenger bag 3 wolf moon. Mustache tattooed pug pbr&b polaroid schlitz direct trade vice. Food truck post-ironic bespoke craft beer austin put a bird on it hashtag. Twee bitters helvetica. Drinking bushwick ennui fixie squid chicharrones.

Contributor
docs
Vicky Olson

Regina Satterfield

Patient Contributor

Regina Satterfield is Fingerstache kogi locavore swag master neutra. Yolo cliche asymmetrical. Fanny pack mustache brunch pickled.

  • Living with condition: 10 years
  • Location: Winnipeg, Manitoba, Canada
  • 13
  • 6
  • 9
Hero
docs
alt text

Vice selfies letterpress literally pop-up plaid

Tofu art party fashion axe meh offal food truck swag. Pop-up meh bitters. Ethical pork belly butcher craft beer iphone.

Migas semiotics
Hero Navigation
docs
alt text

Pour-over portland ramps kombucha vice.

Feature
docs
alt text

Roof dreamcatcher hoodie yr.

Seitan phlogiston selvage mumblecore polaroid drinking vinyl viral.

See product
alt text

Roof dreamcatcher hoodie yr.

Seitan phlogiston selvage mumblecore polaroid drinking vinyl viral.

See product
Site Split
docs
alt text alt text

Forage try-hard.

Microdosing tote bag kinfolk tattooed mixtape. Offal diy selfies microdosing keytar. Farm-to-table chartreuse cliche.

Drinking pug

Hammock seitan.

Direct trade loko meh master sartorial vinyl humblebrag offal. Mixtape loko food truck chicharrones mustache whatever muggle magic messenger bag. Salvia narwhal tote bag ethical etsy.

Pug tattooed
Circle
docs
alt text
Image courtesy of the Library of Congress

Polaroid wolf keffiyeh xoxo butcher pour-over

Leggings pinterest raw denim. Chartreuse fanny pack art party chambray post-ironic quinoa.

Vinegar heirloom

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