Typography
Typography is set high up in het cascade.
Here the typography is set in a modified BS stylesheet that includes VI fonts and typography.
Do NOT use when Bootstrap already used on a page. Please see Typesystem.
Headers #
Used to define HTML headers. Where <h1> defines the most important header. <h6> defines the least important header.
Header 1
Header 2
Header 3
Header 4
Header 5
Header 6
<h1>Header 1</h1>
<h2>Header 2</h2>
<h3>Header 3</h3>
<h4>Header 4</h4>
<h5>Header 5</h5>
<h6>Header 6</h6>Respectively .h1 through .h6 classes are available. Use to conform to SEO markup rules.
Header 6
Header 5
Header 4
Header 3
Header 2
Header 1
<h6 class="h1">Header 6</h6>
<h5 class="h2">Header 5</h5>
<h4 class="h3">Header 4</h4>
<h3 class="h4">Header 3</h3>
<h2 class="h5">Header 2</h2>
<h1 class="h6">Header 1</h1>Regular body copy #
Default paragraph styling.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>Lead #
Make a paragraph stand out by adding .lead.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
<div class="lead">
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
</div>
<p class="lead">Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>Blockquote #
Wrap markup or text with <blockquote class="blockquote"> to use vision specific
styling of content from another source.
Same effect can be achieved without the .blockquote class by using the typesystem blockquote modifier.
The future is already here – it's just not evenly distributed.
The future is already here – it's just not evenly distributed.
The future is already here – it's just not evenly distributed.
Cyberspace
A consensual hallucination experienced daily by billions of legitimate operators, in every nation, by children being taught mathematical concepts...
A graphic representation of data abstracted from banks of every computer in the human system. Unthinkable complexity. Lines of light ranged in the nonspace of the mind, clusters and constellations of data. Like city lights, receding...
<blockquote class="blockquote">
<p>The future is already here – it's just not evenly distributed.</p>
</blockquote>
<blockquote class="blockquote">
<p>The future is already here – it's just not evenly distributed.</p>
<footer class="blockquote-footer">
William Gibson,
<cite>The Economist, December 4, 2003</cite>
</footer>
</blockquote>
<blockquote class="blockquote">
<h4>The future is already here – it's just not evenly distributed.</h4>
<footer class="blockquote-footer">
William Gibson,
<cite>The Economist, December 4, 2003</cite>
</footer>
</blockquote>
<blockquote class="blockquote">
<h4>Cyberspace</h4>
<p>A consensual hallucination experienced daily by billions of legitimate operators, in every nation, by children being taught mathematical concepts...</p>
<p>A graphic representation of data abstracted from banks of every computer in the human system. Unthinkable complexity. Lines of light ranged in the nonspace of the mind, clusters and constellations of data. Like city lights, receding...</p>
<footer class="blockquote-footer">
William Gibson,
<cite>Neuromancer</cite>
</footer>
</blockquote>Mixed example
Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
Slow-carb leggings raw denim. Chicharrones venmo tumblr pour-over tofu. Meggings microdosing iphone park. Asymmetrical sriracha slow-carb tousled.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
Slow-carb leggings raw denim. Chicharrones venmo tumblr pour-over tofu. Meggings microdosing iphone park. Asymmetrical sriracha slow-carb tousled.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
Slow-carb leggings raw denim. Chicharrones venmo tumblr pour-over tofu. Meggings microdosing iphone park. Asymmetrical sriracha slow-carb tousled.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
Slow-carb leggings raw denim. Chicharrones venmo tumblr pour-over tofu. Meggings microdosing iphone park. Asymmetrical sriracha slow-carb tousled.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
Slow-carb leggings raw denim. Chicharrones venmo tumblr pour-over tofu. Meggings microdosing iphone park. Asymmetrical sriracha slow-carb tousled.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
Slow-carb leggings raw denim. Chicharrones venmo tumblr pour-over tofu. Meggings microdosing iphone park. Asymmetrical sriracha slow-carb tousled.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.
<h1>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h1>
<p class="lead">Slow-carb leggings raw denim. Chicharrones venmo tumblr pour-over tofu. Meggings microdosing iphone park. Asymmetrical sriracha slow-carb tousled.</p>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
<blockquote class="blockquote">
<h1>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h1>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
</blockquote>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
<h2>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h2>
<p class="lead">Slow-carb leggings raw denim. Chicharrones venmo tumblr pour-over tofu. Meggings microdosing iphone park. Asymmetrical sriracha slow-carb tousled.</p>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
<blockquote class="blockquote">
<h2>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h2>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
</blockquote>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
<h3>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h3>
<p class="lead">Slow-carb leggings raw denim. Chicharrones venmo tumblr pour-over tofu. Meggings microdosing iphone park. Asymmetrical sriracha slow-carb tousled.</p>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
<blockquote class="blockquote">
<h3>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h3>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
</blockquote>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
<h4>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h4>
<p class="lead">Slow-carb leggings raw denim. Chicharrones venmo tumblr pour-over tofu. Meggings microdosing iphone park. Asymmetrical sriracha slow-carb tousled.</p>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
<blockquote class="blockquote">
<h4>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h4>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
</blockquote>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
<h5>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h5>
<p class="lead">Slow-carb leggings raw denim. Chicharrones venmo tumblr pour-over tofu. Meggings microdosing iphone park. Asymmetrical sriracha slow-carb tousled.</p>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
<blockquote class="blockquote">
<h5>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h5>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
</blockquote>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
<h6>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h6>
<p class="lead">Slow-carb leggings raw denim. Chicharrones venmo tumblr pour-over tofu. Meggings microdosing iphone park. Asymmetrical sriracha slow-carb tousled.</p>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
<blockquote class="blockquote">
<h6>Expect skilled signwriters to use many jazzy, quaint old alphabets effectively.</h6>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>
</blockquote>
<p>Organic tacos 90's. Vinegar marfa viral wes anderson wayfarers lomo. Mlkshk forage pinterest vinegar fashion axe. Knausgaard retro direct trade. Cronut scenester viral park cold-pressed godard kinfolk.</p>List Elements. #
Default styling of list elements.
Unordered list
Use for lists where the order or items has no particular importance.
- Wayfarers ethical roof.
-
Leggings lo-fi neutra.
- Synth williamsburg goth.
- Selvage mumblecore brunch.
- Etsy poutine godard.
- Cardigan occupy synth.
<div class="sg-strip">
<p class="sg-heading--sub sg-mb-0">Unordered list</p>
<p class="sg-small">Use for lists where the order or items has no particular importance.</p>
</div>
<ul>
<li>Wayfarers ethical roof.</li>
<li>
Leggings lo-fi neutra.
<ul>
<li>Synth williamsburg goth.</li>
<li>Selvage mumblecore brunch.</li>
<li>Etsy poutine godard.</li>
</ul>
</li>
<li>Cardigan occupy synth.</li>
</ul>Ordered list
Type of list where the order of elements has some meaning.
- Portland authentic 8-bit.
-
Bespoke celiac butcher.
- Kombucha hammock sriracha.
- Williamsburg offal poutine.
- Drinking selvage vice.
- Brunch flexitarian viral.
<div class="sg-strip">
<p class="sg-heading--sub sg-mb-0">Ordered list</p>
<p class="sg-small">Type of list where the order of elements has some meaning.</p>
</div>
<ol>
<li>Portland authentic 8-bit.</li>
<li>
Bespoke celiac butcher.
<ol>
<li>Kombucha hammock sriracha.</li>
<li>Williamsburg offal poutine.</li>
<li>Drinking selvage vice.</li>
</ol>
</li>
<li>Brunch flexitarian viral.</li>
</ol>Definition list
Contains one or more definition-description pairs.
- Chambray letterpress gentrify.
- Next level 90's seitan green juice gastropub. Beard chicharrones poutine disrupt mixtape. Salvia loko stumptown kombucha. Retro vinegar 90's tumblr.
- Everyday mustache venmo.
- Loko locavore kogi heirloom. Pop-up carry goth meh flannel. Tote bag swag cred 3 wolf moon food truck muggle magic. Cred next level venmo waistcoat pop-up chambray.
<div class="sg-strip">
<p class="sg-heading--sub sg-mb-0">Definition list</p>
<p class="sg-small">Contains one or more definition-description pairs.</p>
</div>
<dl>
<dt>Chambray letterpress gentrify.</dt>
<dd>Next level 90's seitan green juice gastropub. Beard chicharrones poutine disrupt mixtape. Salvia loko stumptown kombucha. Retro vinegar 90's tumblr.</dd>
<dt>Everyday mustache venmo.</dt>
<dd>Loko locavore kogi heirloom. Pop-up carry goth meh flannel. Tote bag swag cred 3 wolf moon food truck muggle magic. Cred next level venmo waistcoat pop-up chambray.</dd>
</dl>Semantic Elements. #
The styling of specific HTML elements that reinforce the semantics, or meaning, of the information rather than merely to define its presentation or look.
<div class="sg-strip">
<p class="sg-heading--sub">Address Tag</p>
</div>
<address>
<a href="#">Fernande Stehr III,</a>
<a href="#">Flossie Krajcik Esq.,</a>
<a href="#">Manuel Lueilwitz</a>
</address>Anchor Tag (aka. Link)
This is an example of a link.
And this link walks over multiple
lines of text.
This is an example of a button, styled as a .
<div class="sg-strip">
<p class="sg-heading--sub">Anchor Tag (aka. Link)</p>
</div>
<p>
This is an example of a
<a href="#">link</a>.
</p>
<p>
<a href="#">
And this link walks over multiple
<br>
lines of text.
</a>
</p>
<p>
This is an example of a button, styled as a
<!-- Button type: link -->
<button type="button" class="vi-btn-link vi-btn">Link</button>.
</p>
<p>
<!-- Button type: link -->
<button type="button" class="vi-btn-link vi-btn">And this button as link that walks over multiple
<br>
lines of text.</button>
</p>Abbreviation Tag
The abbreviation srsly stands for “seriously”.
Acronym Tag (deprecated in HTML5)
The acronym ftw stands for “for the win”.
<div class="sg-strip">
<p class="sg-heading--sub">Abbreviation Tag</p>
</div>
<p>
The abbreviation
<abbr title="Seriously">srsly</abbr>
stands for “seriously”.
</p>
<div class="sg-strip">
<p class="sg-heading--sub">
Acronym Tag
<span class="sg-small">(deprecated in HTML5)</span>
</p>
</div>
<p>
The acronym
<acronym title="For The Win">ftw</acronym>
stands for “for the win”.
</p>Cite Tag
“To contain the title of a work being referred to or quoted from” – HTML5
Quote Tag
Developers, developers, developers…
– Steve Ballmer
<div class="sg-strip">
<p class="sg-heading--sub">Cite Tag</p>
</div>
<p>
“To contain the title of a work being referred to or quoted from” –
<cite>HTML5</cite>
</p>
<div class="sg-strip">
<p class="sg-heading--sub">Quote Tag</p>
</div>
<p>
<q>Developers, developers, developers…</q>
– Steve Ballmer
</p>Code Tag
You will learn later on in these tests that
word-wrap: break-word;
will be your best friend.
Keyboard Tag
Sometimes styled like the
<code>
tag.
This scarsly known tag emulates keyboard text.
Teletype Tag (deprecated in HTML5)
Sometimes styled like the
<code>
tag.
This rarely used tag emulates teletype text.
<div class="sg-strip">
<p class="sg-heading--sub">Code Tag</p>
</div>
<p>
You will learn later on in these tests that
<code>word-wrap: break-word;</code>
will be your best friend.
</p>
<div class="sg-strip">
<p class="sg-heading--sub sg-mb-0">Keyboard Tag</p>
<p class="sg-small">
Sometimes styled like the
<code><code></code>
tag.
</p>
</div>
<p>
This scarsly known tag emulates
<kbd>keyboard text.</kbd>
</p>
<div class="sg-strip">
<p class="sg-heading--sub sg-mb-0">
Teletype Tag
<span class="sg-small">(deprecated in HTML5)</span>
</p>
<p class="sg-small">
Sometimes styled like the
<code><code></code>
tag.
</p>
</div>
<p>
This rarely used tag emulates
<tt>teletype text.</tt>
</p>Insert Tag
This tag should denote inserted text.
Delete Tag
This tag will let you
strikeout text.
Strike and S Tag (deprecated in HTML5)
This tag shows
strike-through text
twice
<div class="sg-strip">
<p class="sg-heading--sub">Insert Tag</p>
</div>
<p>
This tag should denote
<ins>inserted</ins>
text.
</p>
<div class="sg-strip">
<p class="sg-heading--sub">Delete Tag</p>
</div>
<p>
This tag will let you
<del>strikeout text</del>.
</p>
<div class="sg-strip">
<p class="sg-heading--sub">
Strike and S Tag
<span class="sg-small">(deprecated in HTML5)</span>
</p>
</div>
<p>
This tag shows
<strike>strike-through text</strike>
<s>twice</s>
</p>Emphasize Tag
The emphasize tag should emphasize text.
Italic Tag
The italic tag should do the same.
Strong Tag
This tag shows bold text.
Bold Tag
The bold tag should do the same.
Big Tag (deprecated in HTML5)
These tests are a big deal, but this tag is no longer supported in HTML5.
<div class="sg-strip">
<p class="sg-heading--sub">Emphasize Tag</p>
</div>
<p>
The emphasize tag should
<em>emphasize</em>
text.
</p>
<div class="sg-strip">
<p class="sg-heading--sub">Italic Tag</p>
</div>
<p>
The italic tag should
<i>do the same.</i>
</p>
<div class="sg-strip">
<p class="sg-heading--sub">Strong Tag</p>
</div>
<p>
This tag shows
<strong>bold</strong>
text.
</p>
<div class="sg-strip">
<p class="sg-heading--sub">Bold Tag</p>
</div>
<p>
The bold tag should
<strong>do the same.</strong>
</p>
<div class="sg-strip">
<p class="sg-heading--sub">
Big Tag
<span class="sg-small">(deprecated in HTML5)</span>
</p>
</div>
<p>
These tests are a
<big>big</big>
deal, but this tag is no longer supported in HTML5.
</p>Subscript Tag
Getting our science styling on with H2O, which should push the “2” down.
Superscript Tag
Still sticking with science and Isaac Newton’s E=MC2, which should lift the “2” up.
<div class="sg-strip">
<p class="sg-heading--sub">Subscript Tag</p>
</div>
<p>
Getting our science styling on with H<sub>2</sub>O, which should push the “2” down.
</p>
<div class="sg-strip">
<p class="sg-heading--sub">Superscript Tag</p>
</div>
<p>
Still sticking with science and Isaac Newton’s E=MC<sup>2</sup>, which should lift the “2” up.
</p>Preformatted Tag
This very special tag honors the white space within.
.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}
Please note:
The above code is wrapped in a <code> tag to be semantically correct.
<div class="sg-strip">
<p class="sg-heading--sub sg-mb-0">Preformatted Tag</p>
<p class="sg-small">This very special tag honors the white space within.</p>
</div>
<pre><code>.post-title {
margin: 0 0 5px;
font-weight: bold;
font-size: 38px;
line-height: 1.2;
and here's a line of some really, really, really, really long text, just to see how the PRE tag handles it and to find out how it overflows;
}</code></pre>
<div class="sg-strip">
<p class="sg-small">
<strong>Please note:</strong>
The above code is wrapped in a <code><code></code> tag to be semantically correct.
</p>
</div>Variable Tag
This allows you to denote variables.
<div class="sg-strip">
<p class="sg-heading--sub sg-mb-0">Variable Tag</p>
</div>
<p>
This allows you to denote
<var>variables</var>.
</p>Changelog #
Changelog
- 14 Okt 2025 - fix(core): force bold and fix broken variable value
- 21 Aug 2025 - feat(core): set line-height via css custom props.
- 21 Aug 2025 - feat(core): set dashoffset via css custom props via font-file.
Fix
- 14 Mar 2025 - fix(plugin): change error throw to console error for existing function
- PBS support: table text color (override bs)
- PBS support: fix box-shadow on custom-control
- Force Promise polyfill for IE11 (used for autocomplete)
- Force IE11 newline on long uninterrupted words.
- Base font size variable.
- Workaround IE11 BUG where any element with
display: flex can receive focus when clicked.
Changed
- 14 May 2025 - feat(core): allow focus color override
- 16 Apr 2025 - fix(core): hover colors color utilities
- 16 Apr 2025 - feat(core): remove .text-hover classes
- 16 Apr 2025 - feat(core): add .text-hover classes
- 12 Jan 2024 - Update Afek font file
- 11 Aug 2022 - Allow change of hover color PBS
- CSS Optimized for print.
- Print: css adjustments
- RTL support, links containing phone numbers should be displayed left-to-right.
- Removed Avenir Next as font option.
- Accessibility: focus display in specific color #0D3360
- Accessibility: focus display
- Art direction Noto Sans (posible changes in all css files)
- Art direction Teva Sans (posible changes in all css files)
Added
- 04 Okt 2023 - Install script for one-vision files
- 21 Jul 2023 - Added class for blue link with green hover
- Utility color class
.text-invalid
- Partial PBS support
- Introducing
.vi-collapse, .vi-collapse-first and .vi-collapse-last.
- BS-5 position utility classes (like
top-0, start-0)
- String sanitizer to allow Hebrew characters (but not
<script> for example)
- Added utility class
.no-transition
- Font combination Afek Hebrew - Noto Sans Latin
- Wrap long words. Update core files.
- Support direction ltr inside rtl for
.list-inline-item (bs).
- RTL Support
- Add bs alert behaviour to core
- Overlays text and background
- Initial draft