Typography

H1

The quick brown fox jumps over the lazy dog

H2

The quick brown fox jumps over the lazy dog

H3

The quick brown fox jumps over the lazy dog

H4

The quick brown fox jumps over the lazy dog

H5

The quick brown fox jumps over the lazy dog

H6

The quick brown fox jumps over the lazy dog

Paragraph

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.

Paragraph XS

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph S

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph M

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Paragraph L

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph XL (light)

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph XL

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Paragraph XXL (light)

Lorem ipsum dolor

Paragraph XXL

Lorem ipsum dolor

Paragraph XXXL

Lorem ipsum

Eyebrow

This is an Eyebrow

Bullet paragraph text

This is some bullet text

Lists

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet

H2-Huge

123

Rich Text

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.

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.

The quick brown fox jumps over the lazy dog

‍

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog
The quick brown fox jumps over the lazy dog

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.

Colors

Swatches

Buttons

Default Button

CTA Button

Neutral

Lavender

Sun

Learn More Card

Explore how Telea can benefit your clinic

see our solution

→

Menu-item

Text-Link

Clinician login

→

Menu-login

Footer-menu-item

Animations

fade-in-text

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.

Image-Wipe

Image-Move-up

shape-up

shape-up-alot

shape-down

shape-down-alot

Global classes

Padding Bottom

b10

b20

b30

b40

b50

Padding Top

t10

t20

t30

t40

t50

Relative Z index

rel-z5

rel-z100

Lingo - Glossary

sg

style guide

nav

navigation

txt

text

p

paragraph

d

div

wrap

wrapper

img

image

bg

background

dd

drop down

cta

call to action

tes

testimonial

num

number

sig

signature

sec

secondary

b

bottom

t

top

l

left

r

right

abs

position absolute

rel

position relative

vert

vertical align

hor

horizontal align

is-

combo class indicator

is b less

bottomless (no bottom padding)

is b half

50% (half the bottom padding)

is t less

topless (no top padding)

is t half

50% (half the top padding)

is tab full

full width on tablet view - 100% width

is mob full

full width on mobile view - 100% width

is l align

left aligned

is r align

Telea Website Style Guide

Typography

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

123

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

The quick brown fox jumps over the lazy dog

Colors

Buttons

Explore how Telea can benefit your clinic

Animations

Global classes

Lingo - Glossary

style guide

navigation

text

paragraph

div

wrapper

image

background

drop down

call to action

testimonial

number

signature

secondary

bottom

top

left

right

position absolute

position relative

vertical align

horizontal align

combo class indicator

bottomless (no bottom padding)

50% (half the bottom padding)

topless (no top padding)

50% (half the top padding)

full width on tablet view - 100% width

full width on mobile view - 100% width

left aligned

right aligned

Columns (Can’t touch this)