Font Face
Teva Sans Latin

Drafts & Templates
PBS Templates

Primitives & components context

Primitives & components: Teva SCS

Typesystem - modifiers

v0.0.2-alpha.0

On top of the default typesystem styling we create multiple modifiers for use within different contexts throughout this project.


Back to typesystem.

Stand alone

Do not mix with size or color modifiers. Can be mixed with Collapse Last modifier.


Article #

Scope content with class .vi-typesystem and modifier --article to get font size, color and spacing for content area's where there is little to no control on the outputed markup. Like output from a rich text editor.

  • h2-h6 have different sizes than outside this scope*
  • h3-h6 differ in color and weight from ouside this scope*
  • h3-h6 have the same size inside this scope*
  • hr recieves specific styling
  • ul has larger dot

* also apply to their class equivalents

Pabst cray poutine taxidermy pop-up carry post-ironic

Irony selvage salvia. Polaroid phlogiston muggle magic cronut try-hard intelligentsia. Pop-up xoxo asymmetrical polaroid single-origin coffee. Tacos franzen hella vinyl mlkshk pitchfork. Literally church-key wes anderson fashion axe five dollar toast fixie slow-carb. Lomo tousled church-key. Raw denim shabby chic xoxo neutra readymade schlitz ugh retro. Neutra raw denim iphone flannel direct trade. Pbr&b wayfarers stumptown. Trust fund jean shorts cray you probably haven't heard of them.

Dreamcatcher distillery shoreditch keytar taxidermy disrupt asymmetrical biodiesel. Skateboard pabst gastropub selfies. Hammock yolo quinoa vinegar. Yuccie occupy wayfarers messenger bag. Austin bushwick taxidermy yuccie. Irony before they sold out lo-fi typewriter salvia drinking austin bespoke. Skateboard fanny pack poutine intelligentsia twee venmo.

Vinegar distillery pinterest organic flexitarian gentrify viral

Church key master health meditation portland Semiotics tacos waistcoat wayfarers Farm to table health venmo banjo Mumblecore hella tacos quinoa chicharrones fashion axe typewriter Freegan ethical tattooed sartorial polaroid Migas stumptown shoreditch lo fi Meggings mumblecore flexitarian neutra slow carb Shabby chic chicharrones crucifix single origin coffee actually vhs farm to table Dreamcatcher asymmetrical jean shorts pug post ironic poutine Mustache sartorial messenger bag vinyl intelligentsia fingerstache waistcoat Fingerstache distillery flannel lomo Lomo mlkshk artisan raw denim literally. Food truck cray craft beer venmo. Mumblecore pop-up blue bottle. Chartreuse umami authentic schlitz cold-pressed truffaut post-ironic fanny pack. Intelligentsia poutine vhs plaid cornhole kickstarter.

Normcore etsy iphone vinyl disrupt heirloom chambray pabst

Blog kitsch forage. Shabby chic quinoa disrupt roof everyday. Kale chips 3 wolf moon ramps blog. Ugh scenester kale chips cronut fanny pack chicharrones mustache. Pop-up craft beer muggle magic meh green juice. Pork belly banjo park leggings lumbersexual semiotics. Raw denim shabby chic health.

Microdosing cornhole salvia cleanse pitchfork wayfarers bespoke cronut ramps

Vegan artisan swag cred kogi twee farm-to-table intelligentsia

Ramps listicle roof cardigan hoodie schlitz. Ramps pug echo master plaid portland small batch. Wolf sustainable selvage marfa banh mi echo williamsburg. Brunch bitters keffiyeh keytar typewriter. Trust fund pop-up master polaroid asymmetrical biodiesel artisan hella. 90's chartreuse cronut jean shorts.

Meh thundercats brooklyn kitsch chillwave pbr&b loko

Truffaut roof tattooed yuccie pitchfork whatever butcher. Bushwick shabby chic iphone mixtape everyday. Asymmetrical street single-origin coffee slow-carb five dollar toast tote bag listicle heirloom. Marfa farm-to-table keffiyeh. Forage cardigan chillwave. Fashion axe muggle magic deep v farm-to-table whatever tote bag. Tousled tofu loko mixtape swag cliche bicycle rights. Mixtape typewriter wolf. Keffiyeh park shoreditch.

Brooklyn semiotics jean shorts pug waistcoat pour-over messenger bag butcher. Carry craft beer street listicle microdosing. Literally venmo mumblecore knausgaard. Put a bird on it bicycle rights asymmetrical tousled franzen. Raw denim ugh pork belly microdosing. Disrupt wes anderson vegan blog biodiesel 3 wolf moon park tacos. Flannel wolf skateboard direct trade tousled pour-over. Vhs wayfarers chambray vinyl chillwave health salvia. Meh phlogiston flannel hoodie bespoke bitters.

Vinyl portland schlitz keytar shoreditch locavore kogi bushwick knausgaard

Locavore brunch marfa hashtag flannel tacos whatever

Pug small batch skateboard synth jean shorts banjo. Fanny pack schlitz truffaut. Pop-up actually migas ennui. Occupy yolo distillery. Chambray diy chicharrones venmo etsy drinking xoxo blog. Marfa listicle semiotics gentrify sriracha. Cray tilde poutine ramps knausgaard. Celiac pickled fanny pack ramps stumptown 8-bit wes anderson hashtag.

Listicle post-ironic yolo diy brooklyn five dollar toast goth. Sriracha iphone umami plaid. Literally farm-to-table neutra. Vhs biodiesel hoodie before they sold out bitters etsy. Pitchfork meditation disrupt truffaut swag cardigan raw denim craft beer. Whatever slow-carb hashtag chartreuse biodiesel paleo food truck. Dreamcatcher migas pinterest park. Goth try-hard mixtape.

  • Ethical phlogiston tofu gentrify jean shorts tumblr roof pickled. Polaroid intelligentsia shoreditch migas viral fanny pack trust fund chicharrones. Kombucha brooklyn normcore readymade trust fund direct trade. Mixtape readymade bicycle rights polaroid pork belly tattooed kitsch. Truffaut heirloom cleanse forage bushwick.
  • Keffiyeh hella fingerstache. Muggle magic celiac tacos beard tilde kinfolk tofu cardigan. Cold-pressed tousled blue bottle umami tote bag gluten-free crucifix.
  • Organic vinyl wes anderson lo-fi. Cleanse cray typewriter ethical portland umami pug sustainable. Chillwave tousled actually you probably haven't heard of them taxidermy before they sold out hammock.
  • Poutine hammock actually. Dreamcatcher tumblr ugh authentic umami. Plaid mlkshk ramps. Gentrify church-key wayfarers tilde cornhole.

Franzen

Park readymade quinoa 1 listicle organic sustainable blog Pork belly portland hoodie try hard fixie schlitz skateboard Normcore stumptown synth Fingerstache selfies fashion axe everyday iphone meggings direct trade waistcoat Swag stumptown craft beer Raw denim williamsburg shoreditch plaid chicharrones 90 s ugh Tacos microdosing cray banh mi taxidermy Vhs cliche narwhal Pickled raw denim blue bottle salvia quinoa williamsburg meggings Waistcoat sustainable hammock pinterest yolo umami Before they sold out thundercats vice semiotics direct trade meditation drinking


Truffaut aesthetic vhs 8-bit selfies keffiyeh chicharrones normcore offal

  • Cred art party fixie pitchfork. Shoreditch artisan shabby chic seitan. Helvetica ugh cray. Ethical butcher small batch truffaut distillery.
  • Neutra occupy literally muggle magic thundercats. Thundercats phlogiston meh meditation cliche. Vice gentrify swag authentic.

  1. Neutra food truck swag. Pinterest vinyl mustache leggings. Meh 90's lo-fi mumblecore slow-carb drinking 3 wolf moon. Pinterest dreamcatcher portland gastropub tote bag sriracha.
  2. Kale chips humblebrag hashtag iphone banjo. Direct trade trust fund ennui +1 park cred vice. Semiotics heirloom banjo twee. Squid salvia direct trade street meditation bitters.
  3. Photo booth xoxo marfa listicle kogi pickled ugh ramps. Microdosing food truck cred messenger bag. Banh mi narwhal microdosing tumblr vinegar keffiyeh. Blog vhs farm-to-table.
  1. Chambray deep v muggle magic dreamcatcher. Keytar heirloom wayfarers health jean shorts wolf schlitz. Vegan goth austin portland freegan chicharrones chambray whatever. Celiac beard diy gastropub.
    1. Crucifix celiac mumblecore. Craft beer freegan wes anderson wayfarers. Readymade gluten-free migas craft beer.
    2. Microdosing yolo diy kickstarter humblebrag. Ugh pinterest artisan leggings health muggle magic. Vinyl lo-fi truffaut pork belly disrupt.
  2. Wolf keffiyeh butcher muggle magic pabst. Knausgaard celiac tofu lomo church-key scenester farm-to-table. Park blue bottle tumblr kinfolk you probably haven't heard of them narwhal chartreuse chicharrones. Normcore deep v carry bicycle rights kogi taxidermy 8-bit. Occupy flannel humblebrag.
    1. Disrupt chicharrones normcore authentic letterpress poutine vinyl pork belly. Celiac brunch semiotics helvetica bespoke tattooed before they sold out disrupt. Meditation cardigan williamsburg sartorial lumbersexual.
    2. Kickstarter yolo 8-bit tattooed listicle. Farm-to-table drinking cred sartorial tilde polaroid raw denim marfa. Vinyl umami marfa whatever gentrify organic.
  3. Kitsch gluten-free messenger bag knausgaard waistcoat. Forage etsy +1. Truffaut asymmetrical kinfolk drinking five dollar toast. 90's umami keffiyeh carry austin meggings. Leggings deep v next level 3 wolf moon park swag dreamcatcher.
    1. Tacos offal pug blue bottle muggle magic. You probably haven't heard of them thundercats cliche. Wes anderson sriracha godard plaid beard. Ethical locavore intelligentsia post-ironic fanny pack gentrify. Poutine shoreditch franzen cornhole marfa ugh selfies.
    2. Mixtape organic 8-bit phlogiston poutine cardigan green juice asymmetrical. Pabst blog mustache franzen forage seitan. Hella loko wes anderson knausgaard irony blog paleo hammock. Pbr&b put a bird on it twee organic kale chips raw denim. Skateboard pork belly ethical art party organic yr.
  4. Tacos bitters etsy banh mi xoxo gentrify bicycle rights swag. Wes anderson carry loko occupy. Selfies small batch actually gentrify. Sustainable leggings 3 wolf moon butcher. Pop-up organic hella 3 wolf moon tote bag lo-fi phlogiston williamsburg.
    1. Viral art party pour-over bushwick swag yuccie mustache pinterest. Next level tofu poutine typewriter fingerstache yolo selvage goth. Selvage literally waistcoat wayfarers venmo banh mi xoxo try-hard. Organic stumptown gentrify bushwick deep v.
    2. Next level everyday put a bird on it echo chartreuse cray. Cred goth marfa cronut direct trade. Cray heirloom stumptown. Sustainable listicle chartreuse gluten-free organic.
  • Waistcoat yr carry chambray franzen post-ironic. Beard +1 asymmetrical vhs pug waistcoat. Craft beer portland cleanse. Sartorial whatever etsy brooklyn photo booth asymmetrical hashtag sriracha. Vinyl photo booth yolo jean shorts next level.
  • Mlkshk portland hella next level gentrify art party pug. Franzen fixie kitsch bespoke tattooed raw denim wes anderson. Tacos +1 vice cliche.
  • Gluten-free food truck kitsch chillwave kale chips whatever chia. Pug semiotics brunch aesthetic helvetica. Venmo sustainable photo booth lomo. Yolo portland scenester.
  • Austin humblebrag lo-fi mlkshk meh pop-up umami yuccie. Portland tacos diy synth pabst meggings. Pbr&b migas artisan. Yuccie retro wes anderson offal williamsburg cliche small batch 3 wolf moon. Muggle magic ramps green juice kombucha blue bottle squid vegan godard.
  • Lo-fi waistcoat phlogiston. Carry pbr&b celiac neutra fixie 8-bit vinyl. 90's neutra cardigan letterpress brunch.
    • Schlitz ennui celiac 3 wolf moon gentrify. Tofu chambray messenger bag viral pinterest vegan loko distillery. Seitan lomo try-hard muggle magic synth scenester. Normcore diy ugh cornhole yr leggings wolf direct trade. Godard tofu pbr&b flexitarian farm-to-table master.
    • Ugh master lumbersexual. Blue bottle direct trade drinking ramps xoxo sriracha. Truffaut swag cardigan direct trade gluten-free leggings. Chambray brooklyn ugh 3 wolf moon.
  • Bushwick meggings williamsburg loko. Biodiesel hammock cred. Food truck art party chillwave pbr&b squid 8-bit.
    • Venmo poutine blog franzen ramps cold-pressed. Pabst freegan kogi bespoke muggle magic sriracha 90's. Gentrify cold-pressed put a bird on it asymmetrical celiac sustainable selvage biodiesel. Master pitchfork synth. Irony kitsch echo schlitz.
    • Hashtag humblebrag master five dollar toast blog vhs flexitarian trust fund. Food truck bespoke pork belly chia. Loko wolf gastropub yr.

Button as link

<div class="vi-typesystem vi-typesystem--article">
  <h1>Pabst cray poutine taxidermy pop-up carry post-ironic</h1>
  <p class="lead">
    Irony selvage salvia. Polaroid phlogiston muggle magic cronut try-hard intelligentsia. Pop-up xoxo asymmetrical polaroid single-origin coffee. Tacos franzen hella vinyl mlkshk pitchfork. Literally church-key wes anderson fashion axe five dollar toast fixie slow-carb.
    Lomo tousled church-key. Raw denim shabby chic xoxo neutra readymade schlitz ugh retro. Neutra raw denim iphone flannel direct trade. Pbr&amp;b wayfarers stumptown. Trust fund jean shorts cray you probably haven't heard of them.
  </p>
  <p>
    Dreamcatcher distillery shoreditch keytar taxidermy disrupt asymmetrical biodiesel. Skateboard pabst gastropub selfies. Hammock yolo quinoa vinegar.
    Yuccie occupy wayfarers messenger bag. Austin bushwick taxidermy yuccie. Irony before they sold out lo-fi typewriter salvia drinking austin bespoke. Skateboard fanny pack poutine intelligentsia twee venmo.
  </p>
  <h2>Vinegar distillery pinterest organic flexitarian gentrify viral</h2>
  <p>
    <a href="#sample">Church key master</a> <a href="#sample">health meditation portland</a> <a href="#sample">Semiotics tacos waistcoat</a> <a href="#sample">wayfarers Farm to</a> <a href="#sample">table health venmo</a> <a href="#sample">banjo Mumblecore hella</a> <a href="#sample">tacos quinoa chicharrones</a> <a href="#sample">fashion axe typewriter</a> <a href="#sample">Freegan ethical tattooed</a> <a href="#sample">sartorial polaroid Migas</a> <a href="#sample">stumptown shoreditch lo</a> <a href="#sample">fi Meggings mumblecore</a> <a href="#sample">flexitarian neutra slow</a> <a href="#sample">carb Shabby chic</a> <a href="#sample">chicharrones crucifix single</a> <a href="#sample">origin coffee actually</a> <a href="#sample">vhs farm to</a> <a href="#sample">table Dreamcatcher asymmetrical</a> <a href="#sample">jean shorts pug</a> <a href="#sample">post ironic poutine</a> <a href="#sample">Mustache sartorial messenger</a> <a href="#sample">bag vinyl intelligentsia</a> <a href="#sample">fingerstache waistcoat Fingerstache</a> <a href="#sample">distillery flannel lomo</a>
    Lomo mlkshk artisan raw denim literally. Food truck cray craft beer venmo. Mumblecore pop-up blue bottle. Chartreuse umami authentic schlitz cold-pressed truffaut post-ironic fanny pack. Intelligentsia poutine vhs plaid cornhole kickstarter.
  </p>
  <h3>Normcore etsy iphone vinyl disrupt heirloom chambray pabst</h3>
  <p>
    Blog kitsch forage. Shabby chic quinoa disrupt roof everyday. Kale chips 3 wolf moon ramps blog. Ugh scenester kale chips cronut fanny pack chicharrones mustache.
    Pop-up craft beer muggle magic meh green juice. Pork belly banjo park leggings lumbersexual semiotics. Raw denim shabby chic health.
  </p>
  <h2>Microdosing cornhole salvia cleanse pitchfork wayfarers bespoke cronut ramps</h2>
  <h3>Vegan artisan swag cred kogi twee farm-to-table intelligentsia</h3>
  <p>
    Ramps listicle roof cardigan hoodie schlitz. Ramps pug echo master plaid portland small batch. Wolf sustainable selvage marfa banh mi echo williamsburg.
    Brunch bitters keffiyeh keytar typewriter. Trust fund pop-up master polaroid asymmetrical biodiesel artisan hella. 90's chartreuse cronut jean shorts.
  </p>
  <h4>Meh thundercats brooklyn kitsch chillwave pbr&amp;b loko</h4>
  <p>
    Truffaut roof tattooed yuccie pitchfork whatever butcher. Bushwick shabby chic iphone mixtape everyday. Asymmetrical street single-origin coffee slow-carb five dollar toast tote bag listicle heirloom. Marfa farm-to-table keffiyeh. Forage cardigan chillwave.
    Fashion axe muggle magic deep v farm-to-table whatever tote bag. Tousled tofu loko mixtape swag cliche bicycle rights. Mixtape typewriter wolf. Keffiyeh park shoreditch.
  </p>
  <p>
    Brooklyn semiotics jean shorts pug waistcoat pour-over messenger bag butcher. Carry craft beer street listicle microdosing. Literally venmo mumblecore knausgaard. Put a bird on it bicycle rights asymmetrical tousled franzen. Raw denim ugh pork belly microdosing.
    Disrupt wes anderson vegan blog biodiesel 3 wolf moon park tacos. Flannel wolf skateboard direct trade tousled pour-over. Vhs wayfarers chambray vinyl chillwave health salvia. Meh phlogiston flannel hoodie bespoke bitters.
  </p>
  <h2>Vinyl portland schlitz keytar shoreditch locavore kogi bushwick knausgaard</h2>
  <h5>Locavore brunch marfa hashtag flannel tacos whatever</h5>
  <p>
    Pug small batch skateboard synth jean shorts banjo. Fanny pack schlitz truffaut. Pop-up actually migas ennui. Occupy yolo distillery.
    Chambray diy chicharrones venmo etsy drinking xoxo blog. Marfa listicle semiotics gentrify sriracha. Cray tilde poutine ramps knausgaard. Celiac pickled fanny pack ramps stumptown 8-bit wes anderson hashtag.
  </p>
  <p>
    Listicle post-ironic yolo diy brooklyn five dollar toast goth. Sriracha iphone umami plaid. Literally farm-to-table neutra. Vhs biodiesel hoodie before they sold out bitters etsy. Pitchfork meditation disrupt truffaut swag cardigan raw denim craft beer.
    Whatever slow-carb hashtag chartreuse biodiesel paleo food truck. Dreamcatcher migas pinterest park. Goth try-hard mixtape.
  </p>
  <ul>
    <li>Ethical phlogiston tofu gentrify jean shorts tumblr roof pickled. Polaroid intelligentsia shoreditch migas viral fanny pack trust fund chicharrones. Kombucha brooklyn normcore readymade trust fund direct trade. Mixtape readymade bicycle rights polaroid pork belly tattooed kitsch. Truffaut heirloom cleanse forage bushwick.</li>
    <li>Keffiyeh hella fingerstache. Muggle magic celiac tacos beard tilde kinfolk tofu cardigan. Cold-pressed tousled blue bottle umami tote bag gluten-free crucifix.</li>
    <li>Organic vinyl wes anderson lo-fi. Cleanse cray typewriter ethical portland umami pug sustainable. Chillwave tousled actually you probably haven't heard of them taxidermy before they sold out hammock.</li>
    <li>Poutine hammock actually. Dreamcatcher tumblr ugh authentic umami. Plaid mlkshk ramps. Gentrify church-key wayfarers tilde cornhole.</li>
  </ul>
  <p>
    <a href="#sample">Franzen</a>
  </p>
  <p>
    Park readymade quinoa 1 listicle organic sustainable blog Pork belly portland hoodie try hard fixie schlitz skateboard Normcore stumptown synth Fingerstache selfies fashion axe everyday iphone meggings direct trade waistcoat Swag stumptown craft beer Raw denim <a href="#sample">williamsburg shoreditch plaid</a> chicharrones 90 s ugh Tacos microdosing cray banh mi taxidermy Vhs cliche narwhal Pickled raw denim blue bottle salvia quinoa williamsburg meggings Waistcoat sustainable hammock pinterest yolo umami Before they sold out thundercats <a href="#sample">vice semiotics direct</a> trade meditation drinking
  </p>
  <hr>
  <h2>Truffaut aesthetic vhs 8-bit selfies keffiyeh chicharrones normcore offal</h2>
  <ul>
    <li>Cred art party fixie pitchfork. Shoreditch artisan shabby chic seitan. Helvetica ugh cray. Ethical butcher small batch truffaut distillery.</li>
    <li>Neutra occupy literally muggle magic thundercats. Thundercats phlogiston meh meditation cliche. Vice gentrify swag authentic.</li>
  </ul>
  <hr>
  <ol>
    <li>Neutra food truck swag. Pinterest vinyl mustache leggings. Meh 90's lo-fi mumblecore slow-carb drinking 3 wolf moon. Pinterest dreamcatcher portland gastropub tote bag sriracha.</li>
    <li>Kale chips humblebrag hashtag iphone banjo. Direct trade trust fund ennui +1 park cred vice. Semiotics heirloom banjo twee. Squid salvia direct trade street meditation bitters.</li>
    <li>Photo booth xoxo marfa listicle kogi pickled ugh ramps. Microdosing food truck cred messenger bag. Banh mi narwhal microdosing tumblr vinegar keffiyeh. Blog vhs farm-to-table.</li>
  </ol>
  <ol start="20">
    <li>
      Chambray deep v muggle magic dreamcatcher. Keytar heirloom wayfarers health jean shorts wolf schlitz. Vegan goth austin portland freegan chicharrones chambray whatever. Celiac beard diy gastropub.
      <ol>
        <li>Crucifix celiac mumblecore. Craft beer freegan wes anderson wayfarers. Readymade gluten-free migas craft beer.</li>
        <li>Microdosing yolo diy kickstarter humblebrag. Ugh pinterest artisan leggings health muggle magic. Vinyl lo-fi truffaut pork belly disrupt.</li>
      </ol>
    </li>
    <li>
      Wolf keffiyeh butcher muggle magic pabst. Knausgaard celiac tofu lomo church-key scenester farm-to-table. Park blue bottle tumblr kinfolk you probably haven't heard of them narwhal chartreuse chicharrones. Normcore deep v carry bicycle rights kogi taxidermy 8-bit. Occupy flannel humblebrag.
      <ol>
        <li>Disrupt chicharrones normcore authentic letterpress poutine vinyl pork belly. Celiac brunch semiotics helvetica bespoke tattooed before they sold out disrupt. Meditation cardigan williamsburg sartorial lumbersexual.</li>
        <li>Kickstarter yolo 8-bit tattooed listicle. Farm-to-table drinking cred sartorial tilde polaroid raw denim marfa. Vinyl umami marfa whatever gentrify organic.</li>
      </ol>
    </li>
    <li>
      Kitsch gluten-free messenger bag knausgaard waistcoat. Forage etsy +1. Truffaut asymmetrical kinfolk drinking five dollar toast. 90's umami keffiyeh carry austin meggings. Leggings deep v next level 3 wolf moon park swag dreamcatcher.
      <ol>
        <li>Tacos offal pug blue bottle muggle magic. You probably haven't heard of them thundercats cliche. Wes anderson sriracha godard plaid beard. Ethical locavore intelligentsia post-ironic fanny pack gentrify. Poutine shoreditch franzen cornhole marfa ugh selfies.</li>
        <li>Mixtape organic 8-bit phlogiston poutine cardigan green juice asymmetrical. Pabst blog mustache franzen forage seitan. Hella loko wes anderson knausgaard irony blog paleo hammock. Pbr&amp;b put a bird on it twee organic kale chips raw denim. Skateboard pork belly ethical art party organic yr.</li>
      </ol>
    </li>
    <li>
      Tacos bitters etsy banh mi xoxo gentrify bicycle rights swag. Wes anderson carry loko occupy. Selfies small batch actually gentrify. Sustainable leggings 3 wolf moon butcher. Pop-up organic hella 3 wolf moon tote bag lo-fi phlogiston williamsburg.
      <ol>
        <li>Viral art party pour-over bushwick swag yuccie mustache pinterest. Next level tofu poutine typewriter fingerstache yolo selvage goth. Selvage literally waistcoat wayfarers venmo banh mi xoxo try-hard. Organic stumptown gentrify bushwick deep v.</li>
        <li>Next level everyday put a bird on it echo chartreuse cray. Cred goth marfa cronut direct trade. Cray heirloom stumptown. Sustainable listicle chartreuse gluten-free organic.</li>
      </ol>
    </li>
  </ol>
  <ul>
    <li>Waistcoat yr carry chambray franzen post-ironic. Beard +1 asymmetrical vhs pug waistcoat. Craft beer portland cleanse. Sartorial whatever etsy brooklyn photo booth asymmetrical hashtag sriracha. Vinyl photo booth yolo jean shorts next level.</li>
    <li>Mlkshk portland hella next level gentrify art party pug. Franzen fixie kitsch bespoke tattooed raw denim wes anderson. Tacos +1 vice cliche.</li>
    <li>Gluten-free food truck kitsch chillwave kale chips whatever chia. Pug semiotics brunch aesthetic helvetica. Venmo sustainable photo booth lomo. Yolo portland scenester.</li>
    <li>Austin humblebrag lo-fi mlkshk meh pop-up umami yuccie. Portland tacos diy synth pabst meggings. Pbr&amp;b migas artisan. Yuccie retro wes anderson offal williamsburg cliche small batch 3 wolf moon. Muggle magic ramps green juice kombucha blue bottle squid vegan godard.</li>
  </ul>
  <ul>
    <li>
      Lo-fi waistcoat phlogiston. Carry pbr&amp;b celiac neutra fixie 8-bit vinyl. 90's neutra cardigan letterpress brunch.
      <ul>
        <li>Schlitz ennui celiac 3 wolf moon gentrify. Tofu chambray messenger bag viral pinterest vegan loko distillery. Seitan lomo try-hard muggle magic synth scenester. Normcore diy ugh cornhole yr leggings wolf direct trade. Godard tofu pbr&amp;b flexitarian farm-to-table master.</li>
        <li>Ugh master lumbersexual. Blue bottle direct trade drinking ramps xoxo sriracha. Truffaut swag cardigan direct trade gluten-free leggings. Chambray brooklyn ugh 3 wolf moon.</li>
      </ul>
    </li>
    <li>
      Bushwick meggings williamsburg loko. Biodiesel hammock cred. Food truck art party chillwave pbr&amp;b squid 8-bit.
      <ul>
        <li>Venmo poutine blog franzen ramps cold-pressed. Pabst freegan kogi bespoke muggle magic sriracha 90's. Gentrify cold-pressed put a bird on it asymmetrical celiac sustainable selvage biodiesel. Master pitchfork synth. Irony kitsch echo schlitz.</li>
        <li>Hashtag humblebrag master five dollar toast blog vhs flexitarian trust fund. Food truck bespoke pork belly chia. Loko wolf gastropub yr.</li>
      </ul>
    </li>
  </ul>
  <h2>Button as link</h2>
  <p>
    <!-- Button type: link  -->
    <button type="button" class="vi-btn-link vi-btn">Vinegar lo-fi pour-over hammock jean shorts try-hard chambray polaroid. Pabst kinfolk twee listicle jean shorts. Listicle aesthetic flannel.</button>
  </p>
  <p>
    <!-- Button type: link  -->
    <button type="button" class="vi-btn-link vi-btn">Single link</button>
  </p>
</div>

Color based

Can be mixed with size modifiers.


Inversed #

Scope content with class .vi-typesystem and modifier --inversed to color the text white for use on dark backgrounds.

Keytar taxidermy sustainable stumptown mixtape vice waistcoat cred

Ramps neutra portland food truck you probably haven't heard of them lo-fi selvage tousled. Tousled vinyl narwhal knausgaard banh mi. Messenger bag knausgaard forage meditation slow-carb pour-over vinegar five dollar toast. Artisan mlkshk helvetica pabst. Phlogiston heirloom lo-fi beard echo kitsch stumptown selvage. Pork belly pabst tote bag irony blue bottle wolf brunch truffaut. Swag literally umami.

Shabby chic marfa photo booth pbr&b sartorial. Quinoa pabst drinking. Drinking squid gentrify. Etsy slow-carb retro. Iphone wayfarers chicharrones. Fixie disrupt truffaut xoxo shoreditch. Blog loko cold-pressed roof trust fund.

Kitsch polaroid goth semiotics taxidermy shoreditch asymmetrical health pickled

Muggle magic wolf health scenester blog tofu green juice Drinking chartreuse chillwave forage Distillery biodiesel etsy irony authentic sustainable Phlogiston taxidermy letterpress neutra Mustache shabby chic migas vegan tilde ugh Meggings raw denim truffaut tilde Kitsch pour over heirloom offal 8 bit tattooed tumblr Wayfarers mustache food truck gentrify cornhole Biodiesel polaroid muggle magic helvetica trust fund tilde typewriter crucifix Retro typewriter meditation etsy salvia 3 wolf moon kitsch chambray artisan tote bag mixtape tofu Paleo selfies jean shorts tofu dreamcatcher Humblebrag asymmetrical deep v migas letterpress bicycle rights fanny pack aesthetic. Celiac banh mi slow-carb small batch ugh try-hard biodiesel marfa. Hella wolf bitters hammock helvetica.

Vinyl lo-fi yr slow-carb dreamcatcher franzen master diy gluten-free

Gentrify authentic diy food truck semiotics stumptown. Tofu goth disrupt migas echo sriracha chia. Cleanse locavore salvia vice disrupt. Tote bag cred humblebrag distillery helvetica five dollar toast. Leggings phlogiston flannel. Next level trust fund bitters tofu scenester aesthetic. Microdosing tattooed chia kitsch stumptown brooklyn typewriter freegan. Vegan chia cold-pressed umami. Blog park bespoke raw denim vegan. Salvia vinegar normcore truffaut schlitz tofu fashion axe goth.

Wolf dreamcatcher literally chartreuse everyday meggings ethical wolf bushwick

Normcore ramps gluten-free pickled pour-over keytar cronut

Offal single-origin coffee quinoa banjo occupy tofu mixtape beard. Venmo godard irony +1. Franzen tote bag trust fund tattooed. Cold-pressed cornhole vinyl lo-fi slow-carb retro. Wes anderson cleanse fashion axe trust fund fixie blue bottle cold-pressed. Hashtag carry pbr&b. Truffaut you probably haven't heard of them scenester. Readymade occupy roof post-ironic organic kinfolk pug.

Tilde readymade tumblr drinking gastropub park ugh beard diy

Migas disrupt everyday direct trade next level whatever. Bushwick craft beer tacos seitan selfies farm-to-table tilde readymade. Austin shabby chic cornhole semiotics flexitarian phlogiston muggle magic. Tote bag skateboard cold-pressed +1. Bitters paleo butcher chia kale chips. Ramps craft beer photo booth vegan organic kombucha celiac occupy. Yolo yuccie art party heirloom portland semiotics umami literally.

Pabst roof crucifix fanny pack diy tofu. Occupy authentic hoodie lo-fi taxidermy ramps shoreditch park. Try-hard cronut trust fund seitan twee vinegar hella. Knausgaard distillery health squid celiac fixie. Cornhole direct trade 90's poutine carry. Xoxo swag church-key scenester bespoke. Typewriter chartreuse cronut post-ironic kickstarter pbr&b. Next level kickstarter biodiesel. Pbr&b tacos pinterest.

Pug skateboard slow-carb lumbersexual cleanse heirloom organic

Flexitarian try-hard semiotics kombucha cornhole +1 street narwhal tumblr

Messenger bag migas hashtag ethical small batch green juice. Drinking yr authentic. Artisan mustache neutra hammock pour-over helvetica. Swag knausgaard chillwave cred blog diy viral hella. Authentic deep v drinking 90's xoxo cleanse. Roof cliche chia etsy farm-to-table dreamcatcher meh.

Button as link

<div class="vi-typesystem vi-typesystem--inversed">
  <h1>Keytar taxidermy sustainable stumptown mixtape vice waistcoat cred</h1>
  <p class="lead">
    Ramps neutra portland food truck you probably haven't heard of them lo-fi selvage tousled. Tousled vinyl narwhal knausgaard banh mi. Messenger bag knausgaard forage meditation slow-carb pour-over vinegar five dollar toast. Artisan mlkshk helvetica pabst.
    Phlogiston heirloom lo-fi beard echo kitsch stumptown selvage. Pork belly pabst tote bag irony blue bottle wolf brunch truffaut. Swag literally umami.
  </p>
  <p>
    Shabby chic marfa photo booth pbr&amp;b sartorial. Quinoa pabst drinking. Drinking squid gentrify.
    Etsy slow-carb retro. Iphone wayfarers chicharrones. Fixie disrupt truffaut xoxo shoreditch. Blog loko cold-pressed roof trust fund.
  </p>
  <h2>Kitsch polaroid goth semiotics taxidermy shoreditch asymmetrical health pickled</h2>
  <p>
    Muggle magic wolf health scenester blog tofu green juice <a href="#sample">Drinking chartreuse chillwave</a> forage Distillery biodiesel etsy irony authentic <a href="#sample">sustainable Phlogiston taxidermy</a> letterpress neutra Mustache <a href="#sample">shabby chic migas</a> vegan tilde ugh Meggings raw denim truffaut tilde Kitsch <a href="#sample">pour over heirloom</a> offal 8 bit tattooed tumblr Wayfarers <a href="#sample">mustache food truck</a> gentrify cornhole Biodiesel <a href="#sample">polaroid muggle magic</a> helvetica trust fund <a href="#sample">tilde typewriter crucifix</a> <a href="#sample">Retro typewriter meditation</a> etsy salvia 3 <a href="#sample">wolf moon kitsch</a> <a href="#sample">chambray artisan tote</a> <a href="#sample">bag mixtape tofu</a> Paleo selfies jean shorts tofu dreamcatcher
    Humblebrag asymmetrical deep v migas letterpress bicycle rights fanny pack aesthetic. Celiac banh mi slow-carb small batch ugh try-hard biodiesel marfa. Hella wolf bitters hammock helvetica.
  </p>
  <h3>Vinyl lo-fi yr slow-carb dreamcatcher franzen master diy gluten-free</h3>
  <p>
    Gentrify authentic diy food truck semiotics stumptown. Tofu goth disrupt migas echo sriracha chia. Cleanse locavore salvia vice disrupt. Tote bag cred humblebrag distillery helvetica five dollar toast. Leggings phlogiston flannel.
    Next level trust fund bitters tofu scenester aesthetic. Microdosing tattooed chia kitsch stumptown brooklyn typewriter freegan. Vegan chia cold-pressed umami. Blog park bespoke raw denim vegan. Salvia vinegar normcore truffaut schlitz tofu fashion axe goth.
  </p>
  <h2>Wolf dreamcatcher literally chartreuse everyday meggings ethical wolf bushwick</h2>
  <h3>Normcore ramps gluten-free pickled pour-over keytar cronut</h3>
  <p>
    Offal single-origin coffee quinoa banjo occupy tofu mixtape beard. Venmo godard irony +1. Franzen tote bag trust fund tattooed. Cold-pressed cornhole vinyl lo-fi slow-carb retro. Wes anderson cleanse fashion axe trust fund fixie blue bottle cold-pressed.
    Hashtag carry pbr&amp;b. Truffaut you probably haven't heard of them scenester. Readymade occupy roof post-ironic organic kinfolk pug.
  </p>
  <h4>Tilde readymade tumblr drinking gastropub park ugh beard diy</h4>
  <p>
    Migas disrupt everyday direct trade next level whatever. Bushwick craft beer tacos seitan selfies farm-to-table tilde readymade. Austin shabby chic cornhole semiotics flexitarian phlogiston muggle magic.
    Tote bag skateboard cold-pressed +1. Bitters paleo butcher chia kale chips. Ramps craft beer photo booth vegan organic kombucha celiac occupy. Yolo yuccie art party heirloom portland semiotics umami literally.
  </p>
  <p>
    Pabst roof crucifix fanny pack diy tofu. Occupy authentic hoodie lo-fi taxidermy ramps shoreditch park. Try-hard cronut trust fund seitan twee vinegar hella. Knausgaard distillery health squid celiac fixie. Cornhole direct trade 90's poutine carry.
    Xoxo swag church-key scenester bespoke. Typewriter chartreuse cronut post-ironic kickstarter pbr&amp;b. Next level kickstarter biodiesel. Pbr&amp;b tacos pinterest.
  </p>
  <h2>Pug skateboard slow-carb lumbersexual cleanse heirloom organic</h2>
  <h5>Flexitarian try-hard semiotics kombucha cornhole +1 street narwhal tumblr</h5>
  <p>
    Messenger bag migas hashtag ethical small batch green juice. Drinking yr authentic. Artisan mustache neutra hammock pour-over helvetica.
    Swag knausgaard chillwave cred blog diy viral hella. Authentic deep v drinking 90's xoxo cleanse. Roof cliche chia etsy farm-to-table dreamcatcher meh.
  </p>
  <h2>Button as link</h2>
  <p>
    <!-- Button type: link  -->
    <button type="button" class="vi-btn-link vi-btn">Poutine cliche umami loko bicycle rights lomo health. Hammock narwhal gluten-free. Gluten-free pickled venmo. Stumptown deep v cornhole meggings schlitz chambray goth.</button>
  </p>
  <p>
    <!-- Button type: link  -->
    <button type="button" class="vi-btn-link vi-btn">Single link</button>
  </p>
</div>

Shadow #

Scope content with class .vi-typesystem and modifier --shadow to add a shadow to the text. This modifier should be used only in combination with --inversed.

Whatever neutra chillwave hoodie kickstarter schlitz pitchfork paleo echo

Marfa vinyl brooklyn you probably haven't heard of them jean shorts. Keytar cornhole cardigan before they sold out. Yr kombucha mlkshk plaid. Muggle magic craft beer carry pop-up godard tumblr umami austin. Fanny pack brunch selvage selfies irony. Trust fund bicycle rights muggle magic pitchfork. Health 8-bit photo booth portland brunch art party. Master vegan ramps park.

Readymade hashtag retro jean shorts meditation deep v. Letterpress humblebrag pork belly organic bespoke. Meggings franzen kogi green juice cornhole. Echo chia fixie +1 cronut chicharrones sustainable. Venmo quinoa selvage etsy fanny pack. Food truck you probably haven't heard of them tilde viral kickstarter. Gluten-free pinterest stumptown vegan paleo disrupt venmo wolf. Flexitarian kale chips pour-over small batch craft beer. Tousled loko xoxo diy seitan +1.

Stumptown lo-fi cronut migas chillwave ramps cold-pressed marfa poutine

Master wayfarers readymade cardigan forage truffaut Sustainable artisan bitters Neutra lo fi scenester typewriter flannel dreamcatcher Farm to table migas irony brooklyn Cornhole pickled ugh etsy pitchfork farm to table sustainable migas Single origin coffee kombucha tumblr gentrify whatever next level Narwhal art party readymade letterpress farm to table Whatever truffaut hoodie flannel Tousled chicharrones hoodie next level 1 Distillery kombucha green juice seitan Kinfolk williamsburg art party food truck slow-carb meditation. Fashion axe fanny pack twee tumblr cred. Lumbersexual helvetica pitchfork. Cornhole lo-fi disrupt slow-carb wolf. Cliche deep v venmo literally stumptown iphone.

Venmo cronut kitsch schlitz pickled irony kickstarter crucifix

Freegan ethical austin. Tote bag vinegar brooklyn neutra retro. Pork belly hammock yr master bicycle rights salvia tacos polaroid. Seitan leggings pork belly loko celiac. Kinfolk keytar marfa art party cray flannel meggings etsy. Food truck tattooed venmo hammock sustainable forage fanny pack. Slow-carb intelligentsia ramps yr. Irony yolo single-origin coffee keytar phlogiston tilde skateboard.

Flannel franzen 90's ramps tofu ennui knausgaard flexitarian

Flannel synth roof brooklyn yr freegan godard mustache

Hammock squid gentrify craft beer. Pinterest 3 wolf moon lo-fi waistcoat art party brunch thundercats franzen. Retro cardigan venmo pour-over 3 wolf moon ramps gentrify. Kogi taxidermy blog skateboard cold-pressed kale chips celiac. Freegan poutine locavore schlitz cronut. Post-ironic freegan authentic. Scenester kinfolk kitsch cronut five dollar toast semiotics aesthetic. Fixie carry raw denim phlogiston keytar tote bag.

Slow-carb chambray williamsburg letterpress stumptown cold-pressed polaroid hella selfies

Biodiesel 8-bit bicycle rights before they sold out art party chillwave actually. Cornhole vice cray asymmetrical seitan aesthetic. Phlogiston sustainable hella cray forage you probably haven't heard of them. Park fixie helvetica. Mustache artisan normcore lumbersexual sustainable letterpress. Park roof etsy austin tattooed cronut pickled. Lomo roof gentrify wolf. Chia disrupt distillery.

Kinfolk viral fanny pack. Hoodie pug normcore. Selvage tilde pbr&b neutra bicycle rights offal quinoa. Mustache cardigan fingerstache flexitarian bushwick kinfolk. Authentic marfa fingerstache drinking. Deep v letterpress blog waistcoat. Craft beer polaroid paleo roof. Diy organic thundercats.

Pop-up echo hammock flexitarian cliche poutine tilde aesthetic waistcoat

Slow-carb hashtag cleanse scenester chartreuse ugh venmo carry

Post-ironic poutine bespoke. Pug asymmetrical semiotics viral polaroid trust fund wayfarers sustainable. Franzen cred whatever five dollar toast yolo hammock. Twee carry raw denim cronut bushwick wayfarers pour-over vegan. Beard fixie gentrify mustache. 90's truffaut mlkshk biodiesel. +1 twee vegan distillery hashtag. Iphone raw denim master meh scenester. Lo-fi offal sriracha.

Button as link

<div class="vi-typesystem vi-typesystem--inversed vi-typesystem--shadow">
  <h1>Whatever neutra chillwave hoodie kickstarter schlitz pitchfork paleo echo</h1>
  <p class="lead">
    Marfa vinyl brooklyn you probably haven't heard of them jean shorts. Keytar cornhole cardigan before they sold out. Yr kombucha mlkshk plaid. Muggle magic craft beer carry pop-up godard tumblr umami austin.
    Fanny pack brunch selvage selfies irony. Trust fund bicycle rights muggle magic pitchfork. Health 8-bit photo booth portland brunch art party. Master vegan ramps park.
  </p>
  <p>
    Readymade hashtag retro jean shorts meditation deep v. Letterpress humblebrag pork belly organic bespoke. Meggings franzen kogi green juice cornhole. Echo chia fixie +1 cronut chicharrones sustainable. Venmo quinoa selvage etsy fanny pack.
    Food truck you probably haven't heard of them tilde viral kickstarter. Gluten-free pinterest stumptown vegan paleo disrupt venmo wolf. Flexitarian kale chips pour-over small batch craft beer. Tousled loko xoxo diy seitan +1.
  </p>
  <h2>Stumptown lo-fi cronut migas chillwave ramps cold-pressed marfa poutine</h2>
  <p>
    <a href="#sample">Master wayfarers</a> <a href="#sample">readymade cardigan</a> forage truffaut Sustainable artisan <a href="#sample">bitters Neutra</a> lo fi scenester typewriter flannel dreamcatcher Farm to <a href="#sample">table migas</a> <a href="#sample">irony brooklyn</a> Cornhole pickled ugh etsy pitchfork farm <a href="#sample">to table</a> sustainable migas <a href="#sample">Single origin</a> coffee kombucha tumblr gentrify whatever next level Narwhal art party <a href="#sample">readymade letterpress</a> <a href="#sample">farm to</a> <a href="#sample">table Whatever</a> truffaut hoodie <a href="#sample">flannel Tousled</a> chicharrones hoodie next level <a href="#sample">1 Distillery</a> kombucha green <a href="#sample">juice seitan</a>
    Kinfolk williamsburg art party food truck slow-carb meditation. Fashion axe fanny pack twee tumblr cred. Lumbersexual helvetica pitchfork. Cornhole lo-fi disrupt slow-carb wolf. Cliche deep v venmo literally stumptown iphone.
  </p>
  <h3>Venmo cronut kitsch schlitz pickled irony kickstarter crucifix</h3>
  <p>
    Freegan ethical austin. Tote bag vinegar brooklyn neutra retro. Pork belly hammock yr master bicycle rights salvia tacos polaroid.
    Seitan leggings pork belly loko celiac. Kinfolk keytar marfa art party cray flannel meggings etsy. Food truck tattooed venmo hammock sustainable forage fanny pack. Slow-carb intelligentsia ramps yr. Irony yolo single-origin coffee keytar phlogiston tilde skateboard.
  </p>
  <h2>Flannel franzen 90's ramps tofu ennui knausgaard flexitarian</h2>
  <h3>Flannel synth roof brooklyn yr freegan godard mustache</h3>
  <p>
    Hammock squid gentrify craft beer. Pinterest 3 wolf moon lo-fi waistcoat art party brunch thundercats franzen. Retro cardigan venmo pour-over 3 wolf moon ramps gentrify. Kogi taxidermy blog skateboard cold-pressed kale chips celiac. Freegan poutine locavore schlitz cronut.
    Post-ironic freegan authentic. Scenester kinfolk kitsch cronut five dollar toast semiotics aesthetic. Fixie carry raw denim phlogiston keytar tote bag.
  </p>
  <h4>Slow-carb chambray williamsburg letterpress stumptown cold-pressed polaroid hella selfies</h4>
  <p>
    Biodiesel 8-bit bicycle rights before they sold out art party chillwave actually. Cornhole vice cray asymmetrical seitan aesthetic. Phlogiston sustainable hella cray forage you probably haven't heard of them. Park fixie helvetica. Mustache artisan normcore lumbersexual sustainable letterpress.
    Park roof etsy austin tattooed cronut pickled. Lomo roof gentrify wolf. Chia disrupt distillery.
  </p>
  <p>
    Kinfolk viral fanny pack. Hoodie pug normcore. Selvage tilde pbr&amp;b neutra bicycle rights offal quinoa. Mustache cardigan fingerstache flexitarian bushwick kinfolk. Authentic marfa fingerstache drinking.
    Deep v letterpress blog waistcoat. Craft beer polaroid paleo roof. Diy organic thundercats.
  </p>
  <h2>Pop-up echo hammock flexitarian cliche poutine tilde aesthetic waistcoat</h2>
  <h5>Slow-carb hashtag cleanse scenester chartreuse ugh venmo carry</h5>
  <p>
    Post-ironic poutine bespoke. Pug asymmetrical semiotics viral polaroid trust fund wayfarers sustainable. Franzen cred whatever five dollar toast yolo hammock. Twee carry raw denim cronut bushwick wayfarers pour-over vegan. Beard fixie gentrify mustache.
    90's truffaut mlkshk biodiesel. +1 twee vegan distillery hashtag. Iphone raw denim master meh scenester. Lo-fi offal sriracha.
  </p>
  <h2>Button as link</h2>
  <p>
    <!-- Button type: link  -->
    <button type="button" class="vi-btn-link vi-btn">Microdosing stumptown blog. Fingerstache heirloom small batch. Locavore art party hoodie readymade asymmetrical forage migas humblebrag. Actually iphone pour-over pug microdosing godard pbr&amp;b.</button>
  </p>
  <p>
    <!-- Button type: link  -->
    <button type="button" class="vi-btn-link vi-btn">Single link</button>
  </p>
</div>

Component #

Scope content with class .vi-typesystem and modifier --component to inherit colors. This way, colors can be defined by containing element and changed depending breakpoint or other factors.

Please note that the used colors are to illustrate the example and are not part of the styleguide.

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Banjo chia organic tacos intelligentsia raw denim wes anderson. Five dollar toast wayfarers gluten-free. Sartorial wayfarers locavore. Migas scenester asymmetrical muggle magic kinfolk. Retro celiac fanny pack wolf try-hard green juice keffiyeh.

Tilde tacos forage scenester goth Meditation yolo intelligentsia shoreditch umami yuccie microdosing cronut Disrupt blue bottle pork belly chicharrones street polaroid flexitarian Beard chicharrones leggings helvetica Austin williamsburg mixtape cold pressed tofu flannel Sartorial before they sold out migas selvage thundercats bespoke Church key echo artisan next level sriracha chambray mumblecore Vhs 8 bit gluten free tumblr fanny pack cardigan neutra intelligentsia Actually street austin Yolo forage muggle magic sartorial 3 wolf moon crucifix austin leggings Vice thundercats chicharrones kinfolk bitters Drinking bicycle rights swag godard

Header 1

Header 2

Header 3

Header 4

Header 5
Header 6

Fingerstache art party muggle magic tilde freegan. Occupy venmo humblebrag single-origin coffee yolo schlitz. Wes anderson keytar meditation mumblecore franzen cardigan actually. Etsy salvia gastropub mumblecore deep v vinegar kogi lomo. Readymade intelligentsia humblebrag gluten-free viral raw denim cronut pour-over.

Before they sold out banh mi wayfarers photo booth Williamsburg 1 godard Iphone freegan meh 90 s raw denim Literally food truck ennui mumblecore Pinterest polaroid tumblr xoxo Skateboard yr quinoa five dollar toast church key Readymade tote bag viral Venmo skateboard shabby chic tumblr raw denim Everyday lumbersexual portland muggle magic brooklyn food truck Meggings shoreditch five dollar toast fashion axe food truck banh mi Art party kinfolk cray bushwick fanny pack

<div style="color: pink">
  <div class="vi-typesystem vi-typesystem--component">
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3>Header 3</h3>
    <h4>Header 4</h4>
    <h5>Header 5</h5>
    <h6>Header 6</h6>
    <p class="lead">
      Banjo chia organic tacos intelligentsia raw denim wes anderson. Five dollar toast wayfarers gluten-free. Sartorial wayfarers locavore. Migas scenester asymmetrical muggle magic kinfolk. Retro celiac fanny pack wolf try-hard green juice keffiyeh.
    </p>
    <p>
      Tilde tacos forage scenester goth Meditation yolo intelligentsia shoreditch <a href="#sample">umami yuccie microdosing</a> <a href="#sample">cronut Disrupt blue</a> bottle pork belly chicharrones street polaroid flexitarian Beard chicharrones leggings helvetica Austin williamsburg mixtape cold pressed tofu flannel <a href="#sample">Sartorial before they</a> sold out migas selvage thundercats bespoke Church key echo artisan next level sriracha chambray mumblecore Vhs 8 bit gluten free tumblr fanny pack cardigan neutra intelligentsia Actually street austin Yolo <a href="#sample">forage muggle magic</a> <a href="#sample">sartorial 3 wolf</a> moon crucifix austin leggings Vice thundercats chicharrones kinfolk bitters <a href="#sample">Drinking bicycle rights</a> swag godard
    </p>
    <p>
      <!-- Button type: link  -->
      <button type="button" class="vi-btn-link vi-btn">Button as link</button>
    </p>
  </div>
</div>
<div style="color: orange">
  <div class="vi-typesystem vi-typesystem--component">
    <h1>Header 1</h1>
    <h2>Header 2</h2>
    <h3>Header 3</h3>
    <h4>Header 4</h4>
    <h5>Header 5</h5>
    <h6>Header 6</h6>
    <p class="lead">
      Fingerstache art party muggle magic tilde freegan. Occupy venmo humblebrag single-origin coffee yolo schlitz. Wes anderson keytar meditation mumblecore franzen cardigan actually. Etsy salvia gastropub mumblecore deep v vinegar kogi lomo. Readymade intelligentsia humblebrag gluten-free viral raw denim cronut pour-over.
    </p>
    <p>
      Before they sold out banh mi <a href="#sample">wayfarers photo</a> booth Williamsburg 1 godard Iphone freegan <a href="#sample">meh 90</a> s raw denim Literally food truck ennui mumblecore Pinterest polaroid tumblr xoxo Skateboard yr quinoa five dollar toast church key Readymade tote bag viral Venmo skateboard shabby chic tumblr raw denim Everyday lumbersexual portland <a href="#sample">muggle magic</a> brooklyn food truck Meggings shoreditch five dollar toast <a href="#sample">fashion axe</a> food truck banh mi Art party kinfolk cray bushwick fanny pack
    </p>
    <p>
      <!-- Button type: link  -->
      <button type="button" class="vi-btn-link vi-btn">Button as link</button>
    </p>
  </div>
</div>

Size based

Can be mixed with color modifiers.


Small #

Scope content with class .vi-typesystem and modifier --small to drop body copy font-size to text-small. The .lead is dropped to text-regular. Headings stay are not modified.

Synth cred celiac marfa vhs tofu phlogiston

Venmo single-origin coffee paleo tattooed art party. Pinterest yuccie wes anderson microdosing chicharrones humblebrag street. Kinfolk sustainable beard flannel kitsch fixie lumbersexual. Vice mustache disrupt. Twee vegan freegan 90's drinking. Neutra fanny pack whatever cardigan asymmetrical kickstarter gluten-free. Distillery tote bag photo booth pinterest swag 8-bit pug. Chambray tofu meggings poutine biodiesel carry gluten-free squid.

Meggings selfies semiotics venmo keytar blog sustainable deep v. Tattooed messenger bag migas freegan. Tumblr kombucha diy photo booth normcore. Stumptown chia you probably haven't heard of them ethical locavore yolo pop-up carry. Sartorial brunch carry gluten-free food truck normcore synth. Kale chips sriracha pug chillwave. Cardigan ugh venmo messenger bag thundercats hashtag. Tousled craft beer tattooed.

Vinegar austin sustainable waistcoat plaid cardigan literally

Mixtape stumptown loko yr semiotics chillwave umami mumblecore Viral salvia raw denim literally Cold pressed irony lomo celiac squid marfa Crucifix bicycle rights before they sold out Bespoke tacos humblebrag Raw denim jean shorts pop up Occupy post ironic meditation mlkshk vinyl wes anderson Pop up readymade portland chia deep v Aesthetic umami tousled Kitsch paleo meh flannel Chartreuse microdosing park pitchfork echo shoreditch tofu Yr biodiesel blue bottle fingerstache intelligentsia tattooed brooklyn Offal bicycle rights marfa whatever kombucha vegan deep v. Beard typewriter cardigan health neutra. Shoreditch umami schlitz poutine gentrify.

Scenester skateboard mumblecore park meggings whatever salvia xoxo lumbersexual

Leggings gluten-free disrupt cronut. Gentrify pork belly poutine chambray fanny pack. Marfa distillery cronut synth vhs occupy art party kitsch. Hammock whatever shabby chic disrupt blog messenger bag. Iphone normcore direct trade. Cardigan poutine put a bird on it. Irony park craft beer sartorial cornhole. Biodiesel post-ironic neutra messenger bag. Wayfarers vhs polaroid.

Slow-carb freegan plaid cold-pressed quinoa keytar mumblecore bitters

Scenester poutine roof viral kombucha marfa kitsch cornhole

Cray polaroid meggings selvage pour-over food truck fashion axe. Quinoa tattooed tousled tilde. Locavore cleanse you probably haven't heard of them disrupt church-key yuccie polaroid. Yolo everyday retro. Kinfolk organic kombucha 8-bit. Photo booth aesthetic health umami wes anderson five dollar toast loko.

Butcher cornhole banjo iphone fixie lo-fi park mlkshk

Pitchfork meditation yr. Disrupt iphone bicycle rights pinterest chia echo thundercats organic. Distillery fanny pack banjo heirloom. Shabby chic intelligentsia knausgaard small batch everyday. Retro vice literally. Vhs distillery typewriter stumptown biodiesel roof yolo. Ramps cornhole meh polaroid lumbersexual. Iphone phlogiston flannel. Vinegar iphone banh mi hammock.

Selfies migas waistcoat. Hoodie cold-pressed hella truffaut street. Brunch offal keytar trust fund ugh tofu. Listicle banjo diy wes anderson wolf keytar goth brunch. Poutine organic swag selvage thundercats photo booth. Seitan iphone craft beer next level pbr&b cold-pressed.

Gluten-free offal leggings organic retro keffiyeh wayfarers

Chia yolo williamsburg yuccie authentic letterpress butcher disrupt

Chillwave fixie vegan squid. Crucifix tousled meditation. Roof ennui carry green juice flannel. Truffaut skateboard kale chips hashtag semiotics shoreditch tilde vegan. Post-ironic cornhole xoxo mlkshk flexitarian pug. 3 wolf moon hashtag retro. Photo booth narwhal kickstarter kitsch stumptown portland. Jean shorts organic kickstarter chillwave cardigan letterpress kombucha selvage. Pickled thundercats butcher helvetica street sartorial yuccie.

  • Fashion axe vegan seitan occupy viral craft beer chia. Forage listicle tote bag mlkshk synth cleanse craft beer. Disrupt deep v skateboard. Scenester photo booth narwhal artisan letterpress trust fund flannel meh. Diy flannel cred blue bottle.
  • Kombucha pbr&b organic 8-bit 3 wolf moon. Pabst scenester pug health stumptown. Vinyl shabby chic tousled health pop-up selvage. Bicycle rights next level helvetica pinterest craft beer fingerstache heirloom post-ironic.
  • Try-hard microdosing put a bird on it. You probably haven't heard of them marfa cornhole. Wes anderson jean shorts banjo typewriter ennui vegan. Truffaut shoreditch squid cray. Tacos butcher locavore helvetica lumbersexual yolo literally.
  1. Farm-to-table cardigan pinterest. 90's pitchfork banh mi fanny pack goth. Forage squid umami iphone. Craft beer pinterest hammock tattooed small batch squid celiac godard. You probably haven't heard of them sartorial health shabby chic pour-over.
  2. Humblebrag beard food truck. Cray bicycle rights chia. Celiac you probably haven't heard of them microdosing portland lumbersexual umami.
  3. Portland iphone hoodie dreamcatcher. Master pour-over seitan literally fashion axe goth pitchfork biodiesel. Flexitarian schlitz small batch. Vegan venmo mustache. Street tacos wayfarers tattooed seitan hoodie bespoke ramps.

Button as link

<div class="vi-typesystem vi-typesystem--small">
  <h1>Synth cred celiac marfa vhs tofu phlogiston</h1>
  <p class="lead">
    Venmo single-origin coffee paleo tattooed art party. Pinterest yuccie wes anderson microdosing chicharrones humblebrag street. Kinfolk sustainable beard flannel kitsch fixie lumbersexual. Vice mustache disrupt. Twee vegan freegan 90's drinking.
    Neutra fanny pack whatever cardigan asymmetrical kickstarter gluten-free. Distillery tote bag photo booth pinterest swag 8-bit pug. Chambray tofu meggings poutine biodiesel carry gluten-free squid.
  </p>
  <p>
    Meggings selfies semiotics venmo keytar blog sustainable deep v. Tattooed messenger bag migas freegan. Tumblr kombucha diy photo booth normcore.
    Stumptown chia you probably haven't heard of them ethical locavore yolo pop-up carry. Sartorial brunch carry gluten-free food truck normcore synth. Kale chips sriracha pug chillwave. Cardigan ugh venmo messenger bag thundercats hashtag. Tousled craft beer tattooed.
  </p>
  <h2>Vinegar austin sustainable waistcoat plaid cardigan literally</h2>
  <p>
    Mixtape stumptown loko yr semiotics chillwave umami mumblecore Viral salvia raw denim literally Cold pressed irony lomo celiac squid marfa Crucifix bicycle rights before they sold out Bespoke tacos humblebrag Raw denim jean shorts pop up Occupy post ironic meditation mlkshk vinyl wes anderson Pop up readymade portland chia deep v Aesthetic umami tousled Kitsch paleo meh flannel Chartreuse microdosing park pitchfork echo shoreditch tofu Yr <a href="#sample">biodiesel blue</a> bottle fingerstache <a href="#sample">intelligentsia tattooed</a> brooklyn
    Offal bicycle rights marfa whatever kombucha vegan deep v. Beard typewriter cardigan health neutra. Shoreditch umami schlitz poutine gentrify.
  </p>
  <h3>Scenester skateboard mumblecore park meggings whatever salvia xoxo lumbersexual</h3>
  <p>
    Leggings gluten-free disrupt cronut. Gentrify pork belly poutine chambray fanny pack. Marfa distillery cronut synth vhs occupy art party kitsch. Hammock whatever shabby chic disrupt blog messenger bag. Iphone normcore direct trade.
    Cardigan poutine put a bird on it. Irony park craft beer sartorial cornhole. Biodiesel post-ironic neutra messenger bag. Wayfarers vhs polaroid.
  </p>
  <h2>Slow-carb freegan plaid cold-pressed quinoa keytar mumblecore bitters</h2>
  <h3>Scenester poutine roof viral kombucha marfa kitsch cornhole</h3>
  <p>
    Cray polaroid meggings selvage pour-over food truck fashion axe. Quinoa tattooed tousled tilde. Locavore cleanse you probably haven't heard of them disrupt church-key yuccie polaroid.
    Yolo everyday retro. Kinfolk organic kombucha 8-bit. Photo booth aesthetic health umami wes anderson five dollar toast loko.
  </p>
  <h4>Butcher cornhole banjo iphone fixie lo-fi park mlkshk</h4>
  <p>
    Pitchfork meditation yr. Disrupt iphone bicycle rights pinterest chia echo thundercats organic. Distillery fanny pack banjo heirloom. Shabby chic intelligentsia knausgaard small batch everyday. Retro vice literally.
    Vhs distillery typewriter stumptown biodiesel roof yolo. Ramps cornhole meh polaroid lumbersexual. Iphone phlogiston flannel. Vinegar iphone banh mi hammock.
  </p>
  <p>
    Selfies migas waistcoat. Hoodie cold-pressed hella truffaut street. Brunch offal keytar trust fund ugh tofu.
    Listicle banjo diy wes anderson wolf keytar goth brunch. Poutine organic swag selvage thundercats photo booth. Seitan iphone craft beer next level pbr&amp;b cold-pressed.
  </p>
  <h2>Gluten-free offal leggings organic retro keffiyeh wayfarers</h2>
  <h5>Chia yolo williamsburg yuccie authentic letterpress butcher disrupt</h5>
  <p>
    Chillwave fixie vegan squid. Crucifix tousled meditation. Roof ennui carry green juice flannel. Truffaut skateboard kale chips hashtag semiotics shoreditch tilde vegan.
    Post-ironic cornhole xoxo mlkshk flexitarian pug. 3 wolf moon hashtag retro. Photo booth narwhal kickstarter kitsch stumptown portland. Jean shorts organic kickstarter chillwave cardigan letterpress kombucha selvage. Pickled thundercats butcher helvetica street sartorial yuccie.
  </p>
  <ul>
    <li>Fashion axe vegan seitan occupy viral craft beer chia. Forage listicle tote bag mlkshk synth cleanse craft beer. Disrupt deep v skateboard. Scenester photo booth narwhal artisan letterpress trust fund flannel meh. Diy flannel cred blue bottle.</li>
    <li>Kombucha pbr&amp;b organic 8-bit 3 wolf moon. Pabst scenester pug health stumptown. Vinyl shabby chic tousled health pop-up selvage. Bicycle rights next level helvetica pinterest craft beer fingerstache heirloom post-ironic.</li>
    <li>Try-hard microdosing put a bird on it. You probably haven't heard of them marfa cornhole. Wes anderson jean shorts banjo typewriter ennui vegan. Truffaut shoreditch squid cray. Tacos butcher locavore helvetica lumbersexual yolo literally.</li>
  </ul>
  <ol>
    <li>Farm-to-table cardigan pinterest. 90's pitchfork banh mi fanny pack goth. Forage squid umami iphone. Craft beer pinterest hammock tattooed small batch squid celiac godard. You probably haven't heard of them sartorial health shabby chic pour-over.</li>
    <li>Humblebrag beard food truck. Cray bicycle rights chia. Celiac you probably haven't heard of them microdosing portland lumbersexual umami.</li>
    <li>Portland iphone hoodie dreamcatcher. Master pour-over seitan literally fashion axe goth pitchfork biodiesel. Flexitarian schlitz small batch. Vegan venmo mustache. Street tacos wayfarers tattooed seitan hoodie bespoke ramps.</li>
  </ol>
  <h2>Button as link</h2>
  <p>
    <!-- Button type: link  -->
    <button type="button" class="vi-btn-link vi-btn">Listicle tattooed muggle magic flannel. Tumblr viral heirloom semiotics biodiesel taxidermy xoxo disrupt. Cardigan dreamcatcher occupy tumblr chartreuse bespoke bushwick cliche. Yolo chicharrones next level aesthetic sustainable seitan meggings literally.</button>
  </p>
  <p>
    <!-- Button type: link  -->
    <button type="button" class="vi-btn-link vi-btn">Single link</button>
  </p>
</div>

Other


Blockquote #

Scope content with class .vi-typesystem and modifier --blockquote will apply blockquote styling to <blockquote> elements if the element is the direct child of the .vi-typesystem--blockquote.

Can be mixed with ALL modifiers.

Locavore offal wayfarers leggings. Venmo quinoa bitters. Tilde food truck park leggings chicharrones vhs scenester. Whatever godard before they sold out paleo phlogiston.

kombucha narwhal pop-up

Wolf letterpress hella. Vinyl fingerstache drinking tumblr messenger bag hoodie. Flexitarian drinking stumptown.

Shabby chic neutra occupy next level authentic flannel. Bicycle rights blue bottle listicle kogi literally butcher. Pinterest squid five dollar toast lo-fi cardigan. Vegan lo-fi swag authentic direct trade bespoke drinking.

Jean shorts slow-carb fixie hoodie. Gentrify migas artisan quinoa sriracha ugh. Tofu selfies narwhal williamsburg ennui synth.

Blockquote with footer after paragraph

Cardigan cold-pressed bespoke meh diy ugh. Heirloom schlitz mumblecore bushwick. Blue bottle mumblecore 90's. Tumblr five dollar toast viral 90's banjo pork belly carry squid.

goth church-key authentic cray

Bicycle rights kogi cardigan. Tote bag slow-carb tousled mlkshk ugh offal meditation truffaut. Polaroid squid 90's 8-bit shabby chic art party lo-fi. Letterpress phlogiston pinterest heirloom brooklyn wayfarers keffiyeh sriracha. Aesthetic jean shorts vhs keffiyeh vegan.

Blockquote with footer after heading

cliche mlkshk scenester poutine
<div class="vi-typesystem vi-typesystem--blockquote">
  <p>Locavore offal wayfarers leggings. Venmo quinoa bitters. Tilde food truck park leggings chicharrones vhs scenester. Whatever godard before they sold out paleo phlogiston.</p>
  <blockquote>
    <h4>kombucha narwhal pop-up</h4>
    <p>Wolf letterpress hella. Vinyl fingerstache drinking tumblr messenger bag hoodie. Flexitarian drinking stumptown.</p>
    <p>Shabby chic neutra occupy next level authentic flannel. Bicycle rights blue bottle listicle kogi literally butcher. Pinterest squid five dollar toast lo-fi cardigan. Vegan lo-fi swag authentic direct trade bespoke drinking.</p>
  </blockquote>
  <p>Jean shorts slow-carb fixie hoodie. Gentrify migas artisan quinoa sriracha ugh. Tofu selfies narwhal williamsburg ennui synth.</p>
  <blockquote>
    <h4>Blockquote with footer after paragraph</h4>
    <p>Cardigan cold-pressed bespoke meh diy ugh. Heirloom schlitz mumblecore bushwick. Blue bottle mumblecore 90's. Tumblr five dollar toast viral 90's banjo pork belly carry squid.</p>
    <footer>
      goth church-key authentic
      <cite>cray</cite>
    </footer>
  </blockquote>
  <p>Bicycle rights kogi cardigan. Tote bag slow-carb tousled mlkshk ugh offal meditation truffaut. Polaroid squid 90's 8-bit shabby chic art party lo-fi. Letterpress phlogiston pinterest heirloom brooklyn wayfarers keffiyeh sriracha. Aesthetic jean shorts vhs keffiyeh vegan.</p>
  <blockquote>
    <h4>Blockquote with footer after heading</h4>
    <footer>
      cliche mlkshk scenester
      <cite>poutine</cite>
    </footer>
  </blockquote>
</div>

Collapse Last #

Scope content with class .vi-typesystem and modifier --collapse-last collapses margin on the h1-h6, .h1-.h6, .lead, <ol>, <ul>, <dl> and <p> elements if the element is the last and direct child of the .vi-typesystem--collapse-last.

Can be mixed with ALL modifiers.

Ethical pour-over farm-to-table freegan gluten-free hella gastropub brooklyn flexitarian

90's vice wolf echo tofu waistcoat sustainable goth

Scenester carry locavore tumblr godard normcore tacos fingerstache

Mixtape letterpress chicharrones church-key synth chillwave occupy

Salvia everyday crucifix retro pug austin ugh kinfolk chicharrones
Roof keytar schlitz drinking bespoke readymade chartreuse bespoke tilde

Yolo freegan sartorial selvage keffiyeh green juice meh. Vinyl scenester irony. 8-bit etsy locavore. Ramps iphone bespoke echo neutra goth humblebrag. Single-origin coffee lo-fi pour-over mumblecore.

Gastropub raw denim scenester helvetica chambray tilde stumptown. +1 lo-fi cornhole umami yolo actually bespoke shoreditch. Diy shabby chic blog flannel aesthetic readymade.

  • Church-key wes anderson kale chips schlitz helvetica. Cornhole gentrify photo booth 3 wolf moon gastropub. Vice loko leggings banjo helvetica.
  • Heirloom salvia listicle. Health 90's +1 salvia franzen loko pabst bespoke. Retro tumblr tousled. Lomo blue bottle vinegar squid. Fanny pack gastropub celiac ennui pickled.
  • Park celiac poutine austin raw denim yuccie kale chips 3 wolf moon. Tacos goth before they sold out 3 wolf moon. 90's muggle magic carry wayfarers.
  1. Venmo farm-to-table ethical. Heirloom typewriter tilde hammock marfa. Diy selvage microdosing. Roof chartreuse food truck microdosing polaroid.
  2. Jean shorts cray wolf pickled dreamcatcher vinegar. Kale chips pbr&b green juice seitan. Chia ethical hammock locavore cred pickled. Godard sartorial irony.
  3. Cray godard craft beer. Humblebrag disrupt whatever waistcoat. Forage cred sustainable irony tilde typewriter.
bushwick
Biodiesel tacos marfa. Kogi art party freegan keytar. Blue bottle ethical bushwick. Kickstarter umami sustainable butcher asymmetrical street phlogiston.
90's
Tousled bitters butcher. Pabst vinegar asymmetrical tilde kogi kickstarter next level migas. Freegan craft beer helvetica. Bicycle rights letterpress bushwick shabby chic.
marfa
Shoreditch direct trade 90's typewriter distillery. Heirloom organic yolo. Post-ironic narwhal ugh bushwick plaid. Meggings brooklyn pour-over.
<div class="vi-typesystem vi-typesystem--collapse-last">
  <h1>Ethical pour-over farm-to-table freegan gluten-free hella gastropub brooklyn flexitarian</h1>
</div>
<div class="vi-typesystem vi-typesystem--collapse-last">
  <h2>90's vice wolf echo tofu waistcoat sustainable goth</h2>
</div>
<div class="vi-typesystem vi-typesystem--collapse-last">
  <h3>Scenester carry locavore tumblr godard normcore tacos fingerstache</h3>
</div>
<div class="vi-typesystem vi-typesystem--collapse-last">
  <h4>Mixtape letterpress chicharrones church-key synth chillwave occupy</h4>
</div>
<div class="vi-typesystem vi-typesystem--collapse-last">
  <h5>Salvia everyday crucifix retro pug austin ugh kinfolk chicharrones</h5>
</div>
<div class="vi-typesystem vi-typesystem--collapse-last">
  <h6>Roof keytar schlitz drinking bespoke readymade chartreuse bespoke tilde</h6>
</div>
<div class="vi-typesystem vi-typesystem--collapse-last">
  <p class="lead">Yolo freegan sartorial selvage keffiyeh green juice meh. Vinyl scenester irony. 8-bit etsy locavore. Ramps iphone bespoke echo neutra goth humblebrag. Single-origin coffee lo-fi pour-over mumblecore.</p>
</div>
<div class="vi-typesystem vi-typesystem--collapse-last">
  <p>Gastropub raw denim scenester helvetica chambray tilde stumptown. +1 lo-fi cornhole umami yolo actually bespoke shoreditch. Diy shabby chic blog flannel aesthetic readymade.</p>
</div>
<div class="vi-typesystem vi-typesystem--collapse-last">
  <ul>
    <li>Church-key wes anderson kale chips schlitz helvetica. Cornhole gentrify photo booth 3 wolf moon gastropub. Vice loko leggings banjo helvetica.</li>
    <li>Heirloom salvia listicle. Health 90's +1 salvia franzen loko pabst bespoke. Retro tumblr tousled. Lomo blue bottle vinegar squid. Fanny pack gastropub celiac ennui pickled.</li>
    <li>Park celiac poutine austin raw denim yuccie kale chips 3 wolf moon. Tacos goth before they sold out 3 wolf moon. 90's muggle magic carry wayfarers.</li>
  </ul>
</div>
<div class="vi-typesystem vi-typesystem--collapse-last">
  <ol>
    <li>Venmo farm-to-table ethical. Heirloom typewriter tilde hammock marfa. Diy selvage microdosing. Roof chartreuse food truck microdosing polaroid.</li>
    <li>Jean shorts cray wolf pickled dreamcatcher vinegar. Kale chips pbr&amp;b green juice seitan. Chia ethical hammock locavore cred pickled. Godard sartorial irony.</li>
    <li>Cray godard craft beer. Humblebrag disrupt whatever waistcoat. Forage cred sustainable irony tilde typewriter.</li>
  </ol>
</div>
<div class="vi-typesystem vi-typesystem--collapse-last">
  <dl>
    <dt>bushwick</dt>
    <dd>Biodiesel tacos marfa. Kogi art party freegan keytar. Blue bottle ethical bushwick. Kickstarter umami sustainable butcher asymmetrical street phlogiston.</dd>
    <dt>90's</dt>
    <dd>Tousled bitters butcher. Pabst vinegar asymmetrical tilde kogi kickstarter next level migas. Freegan craft beer helvetica. Bicycle rights letterpress bushwick shabby chic.</dd>
    <dt>marfa</dt>
    <dd>Shoreditch direct trade 90's typewriter distillery. Heirloom organic yolo. Post-ironic narwhal ugh bushwick plaid. Meggings brooklyn pour-over.</dd>
  </dl>
</div>

Offset underline #

Scope content with class .vi-typesystem and modifier --offset-underline for multiline offset of underline. The underline is placed under the descender of the letter. No ink-skipping is applied.

Use only in combination with small (--small) modifier.

Chartreuse scenester banjo. Forage park squid mumblecore schlitz echo vinegar paleo. Mlkshk kickstarter wayfarers actually pop-up gastropub irony pour-over.

button as link

<div class="vi-typesystem vi-typesystem--offset-underline vi-typesystem--small">
  <p>
    <a href="#">Chartreuse scenester banjo. Forage park squid mumblecore schlitz echo vinegar paleo. Mlkshk kickstarter wayfarers actually pop-up gastropub irony pour-over.</a>
  </p>
  <p>
    <small class="text-muted">button as link</small>
    <!-- Button type: link  -->
    <button type="button" class="vi-btn-link vi-btn">Migas direct trade pop-up. Try-hard vegan fanny pack yuccie mixtape. Meditation aesthetic dreamcatcher sriracha normcore synth. Offal kogi intelligentsia. 8-bit literally echo austin art party.</button>
  </p>
</div>