Basics
Headings
Use semantically correct heading tags in order (h1-h6), to
adhere to WCAG accessibility guidelines.
For “normal” text paragraphs, use the <p> tag.
Telegraf font variants
Telegraf-UltraLight
Telegraf-Light
Telegraf-Regular
Telegraf-Medium
Telegraf-SemiBold
Telegraf-Bold
Telegraf-UltraBold
Telegraf-Black
Telegraf-Variable
Typography
Headings
Lorem Ipsum<h1> or
<class="h1">
Lorem Ipsum<h1> or <class="h1">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Lorem Ipsum <h2> or <class="h2">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Lorem Ipsum <h3> or <class="h3">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Lorem Ipsum <h4> or <class="h4">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
Lorem Ipsum <h5> or <class="h5">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Lorem Ipsum <h6> or <class="h6">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
Display fonts
Lorem ipsum class="display-1">
Lorem ipsum class="display-2">
Lorem ipsum class="display-3">
Lorem ipsum class="display-4">
Contextual
del: this line of text is meant to be treated as deleted text.
ins: this line of text is meant to be treated as an addition to the document.
u: this line of text will render as underlined
Small: this line of text is meant to be treated as fine print.
Strong: this line rendered as bold text.
em: this line rendered as italicized text.
Buttons
Buttons and links are very separate concepts. Always use a <button>
when clicking will trigger an action, and an <a href="{link}"> when
clicking will change the view or take the user out of the
application/to another page.
The styling for buttons and links can be somewhat interchangeable. In fact you can make
any element look like a button by adding the class .btn to an element. You
can also make a button look like a link by combining the
classes .btn and .btn-link. Make sure the context is very
clear if you use styling tricks like this though. We don't want to trick the user into
thinking clicking something will do something it doesn't.
Contextual type styling
Solid
Solid disabled
Outline
Outline disabled
Sizing: large, default, small
Sizing: block
<p class="pt-3">Solid</p>
<button type="button" class="btn btn-primary">Primary</button>
<button type="button" class="btn btn-secondary">Secondary</button>
<button type="button" class="btn btn-success">Success</button>
<button type="button" class="btn btn-danger">Danger</button>
<button type="button" class="btn btn-warning">Warning</button>
<button type="button" class="btn btn-info">Info</button>
<button type="button" class="btn btn-light">Light</button>
<button type="button" class="btn btn-dark">Dark</button>
<button type="button" class="btn btn-link">Link</button>
<p class="pt-3">Solid disabled</p>
<button type="button" class="btn btn-primary" disabled>Primary</button>
<button type="button" class="btn btn-secondary" disabled>Secondary</button>
<button type="button" class="btn btn-success" disabled>Success</button>
<button type="button" class="btn btn-danger" disabled>Danger</button>
<button type="button" class="btn btn-warning" disabled>Warning</button>
<button type="button" class="btn btn-info" disabled>Info</button>
<button type="button" class="btn btn-light" disabled>Light</button>
<button type="button" class="btn btn-dark" disabled>Dark</button>
<button type="button" class="btn btn-link" disabled>Link</button>
<p class="pt-3">Outline</p>
<button type="button" class="btn btn-outline-primary">Primary</button>
<button type="button" class="btn btn-outline-secondary">Secondary</button>
<button type="button" class="btn btn-outline-success">Success</button>
<button type="button" class="btn btn-outline-danger">Danger</button>
<button type="button" class="btn btn-outline-warning">Warning</button>
<button type="button" class="btn btn-outline-info">Info</button>
<button type="button" class="btn btn-outline-light">Light</button>
<button type="button" class="btn btn-outline-dark">Dark</button>
<p class="pt-3">Outline disabled</p>
<button type="button" class="btn btn-outline-primary" disabled>Primary</button>
<button type="button" class="btn btn-outline-secondary" disabled>Secondary</button>
<button type="button" class="btn btn-outline-success" disabled>Success</button>
<button type="button" class="btn btn-outline-danger" disabled>Danger</button>
<button type="button" class="btn btn-outline-warning" disabled>Warning</button>
<button type="button" class="btn btn-outline-info" disabled>Info</button>
<button type="button" class="btn btn-outline-light" disabled>Light</button>
<button type="button" class="btn btn-outline-dark" disabled>Dark</button>
<p class="pt-3">Sizing: large, default, small</p>
<button class="btn btn-primary btn-lg">primary lg</button>
<button class="btn btn-primary">primary</button>
<button class="btn btn-primary btn-sm">primary sm</button>
<p class="pt-3">Sizing: block</p>
<button class="btn btn-primary btn-block">primary block</button>
Button groups
Single button group:
And groups of button groups:
<p>Single button group:</p>
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-outline-primary">Left</button>
<button type="button" class="btn btn-outline-primary">Middle</button>
<button type="button" class="btn btn-outline-primary">Right</button>
</div>
<p>And groups of button groups:</p>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
<div class="btn-group mr-2" role="group" aria-label="First group">
<button type="button" class="btn btn-outline-outline-primary">1</button>
<button type="button" class="btn btn-outline-primary">2</button>
<button type="button" class="btn btn-outline-primary">3</button>
<button type="button" class="btn btn-outline-primary">4</button>
</div>
<div class="btn-group mr-2" role="group" aria-label="Second group">
<button type="button" class="btn btn-outline-primary">5</button>
<button type="button" class="btn btn-outline-primary">6</button>
<button type="button" class="btn btn-outline-primary">7</button>
</div>
<div class="btn-group" role="group" aria-label="Third group">
<button type="button" class="btn btn-outline-primary">8</button>
</div>
</div>
Export files types buttons / navigation
<ul role="navigation" class="nav exportIcons" aria-label="file export options">
<li aria-label="code export"><a href="/"><span
class="fal fa-file-code-o hr-purple"></span></a></li>
<li aria-label="Excel"><a href="/"><span
class="fal fa-file-excel-o hr-green"></span></a></li>
<li aria-label="pdf"><a href="/"><span
class="fal fa-file-pdf-o hr-red"></span></a></li>
<li aria-label="Powerpoint"><a href="/"><span
class="fal fa-file-powerpoint-o hr-orange"></span></a></li>
<li aria-label="zip"><a href="/"><span
class="fal fa-file-archive-o hr-yellow"></span></a></li>
<li aria-label="comma-separated"><a href="/"><span
class="fal fa-file-csv hr-green"></span></a></li>
<li aria-label="Word"><a href="/"><span
class="fal fa-file-word-o hr-blue"></span></a></li>
</ul>
Action-buttons
Vertical
Horisontal
<p>Vertical</p>
<button type="button" class="btn btn-sq">
<i class="fal fa-plus fa-fw"></i>
<p>Project</p>
</button>
<button type="button" class="btn btn-sq btn-sq-success">
<i class="fal fa-plus fa-fw"></i>
<p>Project</p>
</button>
<button type="button" class="btn btn-sq btn-sq-danger">
<i class="fal fa-plus fa-fw"></i>
<p>Project</p>
</button>
<p class="pt-5">Horisontal</p>
<button type="button" class="btn btn-sq-horisontal btn-sq-horisontal"><i
class="fal fa-plus fa-fw"></i></i>Project</button>
<button type="button" class="btn btn-sq-horisontal btn-sq-horisontal-success"><i
class="fal fa-plus fa-fw"></i>Project</button>
<button type="button" class="btn btn-sq-horisontal btn-sq-horisontal-danger"><i
class="fal fa-plus fa-fw"></i>Project</button>
How to convey meaning with text, icons, colours
Text, shape, icons, and colors are tools to help bring a message across and minimise cognitive load. It is important that this is consistent, and that there are no contradictory use in textual and visual clues and cues. The meaning of colors and icons are not coherent across cultures, traditions, and contexts, and are ambivalent more times than you think.
Text
Create simple, human-readable sentences. Instead of outputs like "Password: fail", "Time zone: 0", "Email: set" see example.
Put the essential, operative word first in the sentence. This way, a quick glance will let a user understand what the rest of the sentence is about.
Icons
With the exception of icons in the example, ask your friendly UI-UX-person if you need an icon. This ensure consistency within and across applications.
Colors
We have color classes for typical "traffic-light"-feedback. You can see them in sections above.
success classes: all is well / this action is confirmed / clicking this will add something, not replace something
warning classes: something needs attention soon-ish / this action requires you to be extra-sure / clicking this will change something
danger classes: blocking problem – this problem will prevent user from accomplishing something / this action makes irreversible changes.
WCAG
Do not use color only as a cue / information. Traffic-light color-encoding is desirable, but must be together with text and / or icon.
Testing stacked icon:
Background color
Password is not set.
Time zone not defined
Email is confirmed
<p><span class="fas fa-minus-circle text-danger"></span> Password is <em><span
class="text-danger">not</span></em> set.</p>
<p><span class="fas fa-exclamation-circle text-warning"></span> Time zone not
defined</p>
<p><span class="fas fa-check-circle text-success"></span> Email is confirmed</p>
Icons
FontAwesome 5 is a breaking release. This means some fundamental changes.
Right now we are using temporary a fix to be able to run both old and new FontAwesome. This should work for TM, TR, TO, absence, and HRID.
See all icons at FontAwesome
Fundamentals
We use FontAwesome for all inline icons. Find the
right class and insert into an i or span tag. Like this:
<span class="fal fa-bolt"></span>
Weights
In FA4, there was only one prefix: fa. In V5 this is deprecated and replaced
with four new ones: .fab .fas .far .fal .fad
fal
Sizing
If you need to adjust the size of the icon, add a helper class for icon size:
.fa-lg, .fa-2x, .fa-3x, .fa-4x, .fa-5x
Equal widths
If you have a list of icons and need them to line up with equal width, use the helper class.fa-fw. Consult FontAwesome
docs for more.
Icon weights classes
| Prefix | Meaning | Example classes | Result |
|---|---|---|---|
fab |
Brand | fab fa-facebook-f |
|
fas |
Solid | fas fa-file-signature |
|
far |
Regular | far fa-file-signature" |
|
fal |
Light | fal fa-file-signature |
TT custom-made icons
There is nothing that differs these icons from FontAwesome except the
extra r in far-x! so their respective classes are:
=
<i class="far far-talentech-icon"></i>
=
<i class="far far-hr-absence"></i>
Spinner
Use this code for a default loader/spinner. Expected results: this spinner in the size of
your choice, centered on a white opacity overlay. If you need to remove the opacity
overlay, delete class modal-loading2 and ID loading2
Spinner
Small
Medium
Large
<p>Small</p>
<div class="modal-loading2">
<div class="fa-1x">
<span class="sr-only">Loading...</span>
<i id="loading2" class="spinB fad fa-spin"></i>
</div>
</div>
<p>Medium</p>
<div class="modal-loading2">
<div class="fa-2x">
<span class="sr-only">Loading...</span>
<i id="loading2" class="spinB fad fa-spin"></i>
</div>
</div>
<p>Large</p>
<div class="modal-loading2">
<div class="fa-3x">
<span class="sr-only">Loading...</span>
<i id="loading2" class="spinB fad fa-spin"></i>
</div>
</div>
v1.0.811-rev-07dbbad
