11 Utility classes

Here are some utility classes that can be used in the project.

Note that each styleguide section/page may also have some available utility classes related to the section.


Any items suffixed by CORE may be used by any NMSCs or 3rd party of the T1 project. Any item that don't have the CORE suffix or that are suffixed by EXTENDED are reserved to the "t1-client" & "t1-server" project and might evolved in a non-expected way for anyone using them out of those two projects.

11.1 relative-position class -EXTENDED

relative-position class -EXTENDED

This will set the position of the element relative.

.relative-position / .relative-position-sm (from sm-breakpoint)

Absolute position child elements of this div will be positioned from here
<div class="relative-position">Absolute position child elements of this div will be positioned
from here</div>

11.2 vertical-centered class -EXTENDED

vertical-centered class -EXTENDED

This will vertically align an element in the center of it's first relatively positioned parent.

.vertical-centered / .vertical-centered-sm (from sm-breakpoint)

vertically centered element
<div class="relative-position grid" style="height:100px;max-width:300px;background:rgba(0,0,0,0.05)"><div class="vertical-centered" style="height:30px;background:white">vertically centered element<div></div>

11.3 loading class -CORE

loading class -CORE

This loading class is usefull for temporarily showing a loader wrapping some content until the content is loaded. Any content inside the '.loading' element is hidden unless the loading element has the class '.transparent'. The height of the loading content should be handled context-wise.


<div class="loading"><div class="hidden">Loading content that is hidden<div></div>

11.4 Pseudo A tag - EXTENDED

Pseudo A tag - EXTENDED

The pseudo tag utility class is a workaround against the W3 html invalid "Nested links" (https://www.w3.org/TR/html401/struct/links.html#h-12.2.2). See example below for a better understanding.

Note that having a link inside another link isn't very good practise neither is it user friendly, this workaround should definitely not be abused.

.pseudo-a-tag + data-internal-href false/true + data-href

<a href="//www.google.com" >
    This is an A tag element linking to www.google.com, it also contains a :
    <div class="pseudo-a-tag"
        Pseudo tag linking to w3

11.5 overflow-vis - EXTENDED

overflow-vis - EXTENDED

A utility class to set the element overflow to visible. Use case: usefull when you want to temporarily make an element overflow visible(add class when expanding, remove when collapsing)...


Text visible eventhough the element is 0px height and initially overflow:hidden.
<div class="overflow-vis" style="height:0;overflow:hidden;">Text visible eventhough the element is 0px height and initially overflow:hidden.</div>

11.6 External-link class - CORE

External-link class - CORE

This external link utility class has been introduced for article-v2 sections, it's adding an external link icon at the end of the link. You can add it to an A tag as documented in the article-v2 wiki page(link in the example below).


This class was added for article-V2 sections, it may or may not work outside of article-v2 context and on other markups than A tags. Hack it at your own risk.


<a class="external_link" href="//t1-preview-wiki.herokuapp.com/index.php?title=Article_Section_V2_(ART-SECTV2)#Display_external_link_icon_when_linking_to_external_page_or_site" target="_blank" >
    This is an external link tag to it's wiki section

11.7 taller class -EXTENDED

taller class -EXTENDED

This will make the text 20% taller then it would normally be. fe. 15px will become 18px, 20px will become 24px etc.


Normal H1 text - 20% bigger H1 text

<h1>Normal H1 text - <span class="taller">20% bigger H1 text</span></div>