Basics

Typography | Colorspace & variables | Background colors | Border colors | Buttons & links | Icons | Ajax spinner

Typography

Visma Dataløn uses the font Ubuntu for headers and Open Sans for the rest.

Font-stack Ubuntu

font-family: "Ubuntu", "Open Sans", "Helvetica Neue", "Open Sans", "Segoe UI", Roboto, Oxygen, sans-serif;

Font-stack Open Sans

font-family: "Open Sans", "Segoe UI", Tahoma, sans-serif;

Sizing

  • Root 16px
  • Body 0.875rem
  • H1 1.7rem; weight 300
  • H2 1.5rem
  • H3 1.4rem
  • H4 1.2rem
  • H5 1rem
  • H6 .8rem uppercase
Headers

Lorem Ipsum<h1> or <p class="h1">

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Lorem Ipsum <h2> or <p 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 <p class="h3">

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Lorem Ipsum <h4> or <p class="h4">

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Lorem Ipsum <h5> or <p 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 <p 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.

Colour space & variables

Figma

Background colors: global classes

Background color

General background colors

bg-primary text-white

bg-success text-white

bg-warning text-white

bg-danger text-white

bg-dark text-white

bg-faded

Border colors: global classes

Border colors

Default border colors

border border-default

border border-success

border border-warning

border border-danger

Buttons and links

Button colours / hover / active

Buttons

Solid

Solid disabled

Outline

Outline disabled

Sizing: large, default, small

Sizing: block

Download icon links navbar

Icons

We use FontAwesome for all inline icons.

Icon weights
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
fad Duotone fad fa-file-signature

Spinner / loader

This is the current loader / spinner.

Spinner
Loading...

v1.0.816-rev-21ed2a3