Atoms

V2 breadcrumb

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

V2 Horizontal line

<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.

Atomic Design by Brad Frost

Buttons

Button-danger

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 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

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

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
  

Ukvi 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

Cards

Card medium

Card medium

<div class="tls-card-md">
  <p>example</p>
  <p>example</p>
</div>
.tls-card-md
  p example
  p example

Card large

Card large

<div class="tls-card-lg">example</div>
.tls-card-lg example

Ukvi card

<div class="ukvi-card">ukvi-card</div>
.ukvi-card ukvi-card

Citizen flag

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

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

Decoration horizontal lines

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 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

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

Headings

h1

Heading 1 (h1) for main headings

<h1 class="tls-heading-1">Heading level 1</h1>
h1.tls-heading-1 Heading level 1

h2

Heading 2 for secondary headings

<h2 class="tls-heading-2">Heading level 2</h2>
h2.tls-heading-2 Heading level 2

Icons

Success icon

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

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

UKVI Icon

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

Image

<img class="tls-image" src="/atom/image/image.png"/>
img.tls-image(src='/atom/image/image.png')

Inputs

Input Check

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

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 text

<input class="tls-input-text valid" type="text"/>
input.tls-input-text.valid(type='text')

Label

Label

<label class="tls-label">Label</label>
label.tls-label Label

Links

Link

<a class="tls-link">My Link</a>
a.tls-link My Link

Link-dropdown

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

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

Loading

Text used.

Loading Dots

Loading dots

<div class="tls-loading-dots">Loading dots</div>
.tls-loading-dots Loading dots

Loading-Spinner

Loading spinner

<i class="fas fa-spinner fa-pulse tls-loading-spinner"></i>
i.fas.fa-spinner.fa-pulse.tls-loading-spinner

Logo

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

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')

Mandatory indicator

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

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

Tables

Table cell

Table Cell

<td class="tls-table-cell">text
</td>
td.tls-table-cell.
  text
  

Table head

Table head

<th class="tls-table-head">text
</th>
th.tls-table-head.
  text
  

Table thead

Table thead

<th class="tls-table-thead">text
</th>
th.tls-table-thead.
  text
  

Text

Text used.

Dropdown text

<a class="tls-dropdown-text">My dropdown text</a>
a.tls-dropdown-text My dropdown text

Simple 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

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

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

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

UKVI Select

<select class="tls-ukvi-select">
  <option>Sample Option</option>
</select>
select.tls-ukvi-select
  option Sample Option

UKVI Text Field

UKVI Text Field

<input class="tls-ukvi-text-field"/>
input.tls-ukvi-text-field

UKVI Button

UKVI Button

<button class="tls-ukvi-button">Sample Option</button>
button.tls-ukvi-button Sample Option

V2 Card

Card

<div class="v2-card"></div>
.v2-card

V2 Radio

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