Breadcrumb
<div class="v2-breadcrumb">
<div class="v2-breadcrumb-link -passed">
<div class="v2-breadcrumb-item">First step</div>
</div>
<div class="v2-breadcrumb-link -separator"><span class="v2-breadcrumb-item">></span></div>
<div class="v2-breadcrumb-link -active">
<div class="v2-breadcrumb-item">Second step</div>
</div>
</div>
.v2-breadcrumb
.v2-breadcrumb-link.-passed
.v2-breadcrumb-item First step
.v2-breadcrumb-link.-separator
span.v2-breadcrumb-item >
.v2-breadcrumb-link.-active
.v2-breadcrumb-item Second step
<div class="v2-decoration-horizontal-line -bd-w-1 black"></div>
.v2-decoration-horizontal-line.-bd-w-1.black
Atoms are the basic building blocks of matter. Applied to web interfaces, atoms are our HTML tags, such as a form label, an input or a button.
Atoms can also include more abstract elements like color palettes, fonts and even more invisible aspects of an interface like animations.
Button-danger
<!-- Normal button-->
<button class="tls-button-danger">Button
</button>
<!-- Small button-->
<button class="tls-button-danger -small">Small Button
</button>
<!-- Uppercase button-->
<button class="tls-button-danger -uppercase">Uppercase Button
</button>
<!-- Disabled button-->
<button class="tls-button-danger" disabled="disabled">Disabled Button
</button>
// Normal button
button.tls-button-danger.
Button
// Small button
button.tls-button-danger.-small.
Small Button
// Uppercase button
button.tls-button-danger.-uppercase.
Uppercase Button
// Disabled button
button.tls-button-danger(disabled).
Disabled Button
Button icon
<button class="tls-button-icon">×</button>
button.tls-button-icon ×
Button-link
<a class="tls-button-link">Button link</a>
a.tls-button-link Button link
Button main
<!-- Normal button-->
<button class="tls-button-primary">Button
</button>
<!-- Small button-->
<button class="tls-button-primary -small">Small Button
</button>
<!-- Uppercase button-->
<button class="tls-button-primary -uppercase">Uppercase Button
</button>
<!-- Disabled button-->
<button class="tls-button-primary" disabled="disabled">Disabled Button
</button>
// Normal button
button.tls-button-primary.
Button
// Small button
button.tls-button-primary.-small.
Small Button
// Uppercase button
button.tls-button-primary.-uppercase.
Uppercase Button
// Disabled button
button.tls-button-primary(disabled).
Disabled Button
Button success
<!-- Normal button-->
<button class="tls-button-success">Button
</button>
<!-- Small button-->
<button class="tls-button-success -small">Small Button
</button>
<!-- Uppercase button-->
<button class="tls-button-success -uppercase">Uppercase Button
</button>
<!-- Disabled button-->
<button class="tls-button-success" disabled="disabled">Disabled Button
</button>
// Normal button
button.tls-button-success.
Button
// Small button
button.tls-button-success.-small.
Small Button
// Uppercase button
button.tls-button-success.-uppercase.
Uppercase Button
// Disabled button
button.tls-button-success(disabled).
Disabled Button
<div class="ukvi-button -bg-color-white -bd-color-main">My button</div>
.ukvi-button.-bg-color-white.-bd-color-main My button
UKVI Button link
<button class="tls-ukvi-button-link">Button Link</button>
<button class="tls-ukvi-button-link -large">Button Link</button>
button.tls-ukvi-button-link Button Link
button.tls-ukvi-button-link.-large Button Link
Card medium
<div class="tls-card-md">
<p>example</p>
<p>example</p>
</div>
.tls-card-md
p example
p example
Card large
<div class="tls-card-lg">example</div>
.tls-card-lg example
<div class="ukvi-card">ukvi-card</div>
.ukvi-card ukvi-card
Citizen flag
<a class="tls-citizen-flag" src="/atom/citizen-flag/image.png"></a>
a.tls-citizen-flag(src='/atom/citizen-flag/image.png')
Circle
<div class="tls-circle -color-danger"></div>
<div class="tls-circle -color-warning"></div>
<div class="tls-circle -color-success"></div>
.tls-circle.-color-danger
.tls-circle.-color-warning
.tls-circle.-color-success
Decoration horizontal lines
<div class="tls-decoration-horizontal-lines">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
.tls-decoration-horizontal-lines
.tls-line1
.tls-line2
Decoration vertical lines
<!-- Decoration with vertical lines white-->
<div class="tls-decoration-vertical-lines -white">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
<!-- Decoration with vertical lines blue-->
<div class="tls-decoration-vertical-lines -blue">
<div class="tls-line1"></div>
<div class="tls-line2"></div>
</div>
// Decoration with vertical lines white
.tls-decoration-vertical-lines.-white
.tls-line1
.tls-line2
// Decoration with vertical lines blue
.tls-decoration-vertical-lines.-blue
.tls-line1
.tls-line2
Hamburger
<div class="tls-hamburger -state-closed">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
<div class="tls-hamburger -state-opened">
<div class="tls-hamburger--top-line"></div>
<div class="tls-hamburger--middle-line"></div>
<div class="tls-hamburger--bottom-line"></div>
</div>
.tls-hamburger.-state-closed
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
.tls-hamburger.-state-opened
.tls-hamburger--top-line
.tls-hamburger--middle-line
.tls-hamburger--bottom-line
Heading 1 (h1) for main headings
<h1 class="tls-heading-1">Heading level 1</h1>
h1.tls-heading-1 Heading level 1
Heading 2 for secondary headings
<h2 class="tls-heading-2">Heading level 2</h2>
h2.tls-heading-2 Heading level 2
Success icon
<div class="tls-success-icon">
<div class="tls-success-icon--content"><i class="fas fa-check"></i></div>
</div>
.tls-success-icon
.tls-success-icon--content
i.fas.fa-check
Danger icon
<div class="tls-danger-icon">
<div class="tls-danger-icon--content"><i class="fas fa-hourglass-half"></i></div>
</div>
.tls-danger-icon
.tls-danger-icon--content
i.fas.fa-hourglass-half
To get all glyph available on this project, you can follow this link: glyph list
<span class="ukvi-icon ukvi-glyph-time"></span><br/><span class="ukvi-icon -pointer ukvi-glyph-calendar-blank"></span><br/><span class="ukvi-icon ukvi-glyph-coins -info"></span><br/><span class="ukvi-icon ukvi-glyph-info -info"></span>
span.ukvi-icon.ukvi-glyph-time
br
span.ukvi-icon.-pointer.ukvi-glyph-calendar-blank
br
span.ukvi-icon.ukvi-glyph-coins.-info
br
span.ukvi-icon.ukvi-glyph-info.-info
Image
<img class="tls-image" src="/atom/image/image.png"/>
img.tls-image(src='/atom/image/image.png')
Input check with label
<div class="tls-input-check-group">
<input class="tls-input-check" id="val1" type="checkbox" name="cb"/>
<label class="tls-input-check--label" for="val1">Checkbox</label>
</div>
<div class="tls-input-check-group">
<input class="tls-input-check" id="val3" type="radio" name="rb"/>
<label class="tls-input-check--label" for="val3">Radio</label>
</div>
.tls-input-check-group
input.tls-input-check#val1(type='checkbox', name='cb')
label.tls-input-check--label(for='val1') Checkbox
.tls-input-check-group
input.tls-input-check#val3(type='radio', name='rb')
label.tls-input-check--label(for='val3') Radio
Input select
<div class="tls-input-select-container">
<select class="tls-input-select">
<div class="tls-input-select--content">
<option class="tls-input-select-option" value="AB">Option 1</option>
<option class="tls-input-select-option" value="CD">Option 2</option>
<option class="tls-input-select-option" value="ZD">Option 3</option>
</div>
</select>
</div>
.tls-input-select-container
select.tls-input-select
option.tls-input-select-option(value='AB') Option 1
option.tls-input-select-option(value='CD') Option 2
option.tls-input-select-option(value='ZD') Option 3
Input text
<input class="tls-input-text valid" type="text"/>
input.tls-input-text.valid(type='text')
Label
<label class="tls-label">Label</label>
label.tls-label Label
Link
<a class="tls-link">My Link</a>
a.tls-link My Link
Link-dropdown
<!-- Case using chevron down--><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Link dropdown</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-down"></i></div></a>
<!-- Case using chevron up--><a class="tls-link-dropdown">
<div class="tls-link-dropdown--text">Link dropdown</div>
<div class="tls-link-dropdown--icon"><i class="fa fa-chevron-up"></i></div></a>
// Case using chevron down
a.tls-link-dropdown
.tls-link-dropdown--text Link dropdown
.tls-link-dropdown--icon
i.fa.fa-chevron-down
// Case using chevron up
a.tls-link-dropdown
.tls-link-dropdown--text Link dropdown
.tls-link-dropdown--icon
i.fa.fa-chevron-up
Link-uppercase
<a class="tls-link-uppercase">My Uppercase Link</a>
a.tls-link-uppercase My Uppercase Link
Link
<a class="ukvi-link">My Link</a>
a.ukvi-link My Link
Text used.
Loading dots
<div class="tls-loading-dots">Loading dots</div>
.tls-loading-dots Loading dots
Loading spinner
<i class="fas fa-spinner fa-pulse tls-loading-spinner"></i>
i.fas.fa-spinner.fa-pulse.tls-loading-spinner
Logo
<a class="tls-logo" href="#"><img class="tls-logo--img" src="/atom/logo/logo/logo.svg"/></a>
a.tls-logo(href='#')
img.tls-logo--img(src='/atom/logo/logo/logo.svg')
Social Logo
<a class="tls-social-logo" href="#"><i class="fab fa-linkedin-in tls-social-logo--icon"></i></a>
a.tls-social-logo(href='#')
i.fab.fa-linkedin-in.tls-social-logo--icon
Google map
<div class="tls-google-map">
<iframe class="tls-google-map-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3212.8176904014567!2d6.639447615032586!3d36.36519458004049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12f176eb4e52720f%3A0x840973aeb1fc132a!2sTLScontact%20Visa%20Application%20Center%20Constantine!5e0!3m2!1sen!2stn!4v1566901882835!5m2!1sen!2stn"></iframe>
</div>
.tls-google-map
iframe.tls-google-map-iframe(src='https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3212.8176904014567!2d6.639447615032586!3d36.36519458004049!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x12f176eb4e52720f%3A0x840973aeb1fc132a!2sTLScontact%20Visa%20Application%20Center%20Constantine!5e0!3m2!1sen!2stn!4v1566901882835!5m2!1sen!2stn')
Clearly label all mandatory fields with the required field indicator.
<span class="tls-mandatory-indicator tls-simple-text -color-danger -weight-bold -size-16">*</span>
span.tls-mandatory-indicator.tls-simple-text.-color-danger.-weight-bold.-size-16 *
Select
<div class="tls-select">
<select class="tls-select-select">
<option class="tls-select-option">Option 1</option>
<option class="tls-select-option">Option 2</option>
<option class="tls-select-option">Option 3</option>
</select>
</div>
.tls-select
select.tls-select-select
option.tls-select-option Option 1
option.tls-select-option Option 2
option.tls-select-option Option 3
Table Cell
<td class="tls-table-cell">text
</td>
td.tls-table-cell.
text
Table head
<th class="tls-table-head">text
</th>
th.tls-table-head.
text
Table thead
<th class="tls-table-thead">text
</th>
th.tls-table-thead.
text
Text used.
Dropdown text
<a class="tls-dropdown-text">My dropdown text</a>
a.tls-dropdown-text My dropdown text
Simple text
<div class="tls-simple-text -size-12">Simple Text
</div>
<div class="tls-simple-text -size-16">Simple Text
</div>
<div class="tls-simple-text -color-main -size-16">Simple Text
</div>
<div class="tls-simple-text -color-main -weight-bold -size-16">Simple Text
</div>
<div class="tls-simple-text -color-danger -weight-bold -size-16">Simple Text
</div>
<div class="tls-simple-text -color-warning -weight-bold -size-16">Simple Text
</div>
<div class="tls-simple-text -color-success -size-16">Simple Text
</div>
<div class="tls-simple-text -size-16 -style-italic">Simple Text
</div>
<div class="tls-simple-text -color-primary -size-19">Simple Text
</div>
<div class="tls-simple-text -color-white -size-22">Simple Text
</div>
<div class="tls-simple-text -color-white -size-40">Simple Text
</div>
.tls-simple-text.-size-12.
Simple Text
.tls-simple-text.-size-16.
Simple Text
.tls-simple-text.-color-main.-size-16.
Simple Text
.tls-simple-text.-color-main.-weight-bold.-size-16.
Simple Text
.tls-simple-text.-color-danger.-weight-bold.-size-16.
Simple Text
.tls-simple-text.-color-warning.-weight-bold.-size-16.
Simple Text
.tls-simple-text.-color-success.-size-16.
Simple Text
.tls-simple-text.-size-16.-style-italic.
Simple Text
.tls-simple-text.-color-primary.-size-19.
Simple Text
.tls-simple-text.-color-white.-size-22.
Simple Text
.tls-simple-text.-color-white.-size-40.
Simple Text
Ukvi text
<div class="ukvi-text -s-16">Simple Text
</div>
<div class="ukvi-text -s-20">Simple Text
</div>
<div class="ukvi-text -info -s-32">Simple Text
</div>
.ukvi-text.-s-16.
Simple Text
.ukvi-text.-s-20.
Simple Text
.ukvi-text.-info.-s-32.
Simple Text
Time Unit
<!-- Available-->
<button class="tls-time-unit -available">12:34</button>
<!-- Unavailable-->
<button class="tls-time-unit -unavailable">12:34</button>
// Available
button.tls-time-unit.-available 12:34
// Unavailable
button.tls-time-unit.-unavailable 12:34
UKVI flag
<img class="tls-ukvi-flag" src="/atom/ukvi-flag/GB.svg"/>
img.tls-ukvi-flag(src='/atom/ukvi-flag/GB.svg')
UKVI Select
<select class="tls-ukvi-select">
<option>Sample Option</option>
</select>
select.tls-ukvi-select
option Sample Option
UKVI Text Field
<input class="tls-ukvi-text-field"/>
input.tls-ukvi-text-field
UKVI Button
<button class="tls-ukvi-button">Sample Option</button>
button.tls-ukvi-button Sample Option
Card
<div class="v2-card"></div>
.v2-card
Radio
<div class="v2-card-radio">
<label class="v2-radio">
<input class="v2-radio-input" type="radio"/><span class="v2-radio-checkmark ukvi-icon ukvi-glyph-check"></span>
</label>
</div>
.v2-card-radio
label.v2-radio
input.v2-radio-input(type='radio')
span.v2-radio-checkmark.ukvi-icon.ukvi-glyph-check