Navigation

Logo
Typography
Color Swatches
Buttons
Shadows

Typography

Primary typography — headlines and hero texts
Aa

Ubuntu

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Æ Ø Å

1 2 3 4 5 6 7 8 9 0

! ? @ € $ £ # § & / ( ) = ' " [ ] { }

SEcondary typography — Body text
Aa

Roboto

a b c d e f g h i j k l m n o p q r s t u v w x y z æ ø å

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z Æ Ø Å

1 2 3 4 5 6 7 8 9 0

! ? @ € $ £ # § & / ( ) = ' " [ ] { }

.HeroText — 4.209em / 1.1EM
The most elegant write-back extension for Qlik Sense on the market.
.H1 — 3.157em / 1.2EM

The most elegant write-back extension for Qlik Sense on the market.

.H2 — 2.369em / 1.2EM

The most elegant write-back extension for Qlik Sense on the market.

.H3 — 1.777em / 1.2EM

The most elegant write-back extension for Qlik Sense on the market.

.H4 — 1.333em / 1.2EM

The most elegant write-back extension for Qlik Sense on the market.

Paragraph — 1em / 1.7EM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

.Preamble — 1.2em / 1.8EM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Rich text — Inherits from above

What’s a Rich Text element?

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

This is my caption and it's lovely
Uhh I like it
Quote

Color Swatches

Spot color
#2c9dd7
#2983b1
Spot color 2
#2dd689
#20ad6d
Spot color 3
#195bf1
#0f4acf
Gradient
#2dd689
#2c9dd7
#195bf1
Main color
#222222
Shade 1
#BBBBBB
Shade 2
#e0e0e0
Shade 3
#f5f5f5
Shade 4
#ffffff
Lightblue
#bce8ff
Lightblue2
#acd6ec

Buttons

Tip: Add roundness to .Button to make all buttons round

Button
Button Text
Ghost Button
Button Text
Call to action button
Unleash the power
Call to action button w. Icon (32px)
Button Text

Shadows

.ShadowLarge
.ShadowMedium
.ShadowSmall

With ❤️ from okayokay