Typography

Fonts

Quanty

Headings + Body

Type: Sans Serif
Weights: Normal (400)

Headings

H1 Headings

Element

H2 Headings

Element

H3 Headings

Element

H4 Headings

Element

Element
h1
Class
h2
Class
Class
h3
Class
h4
Class

Body

paragraph-1.5

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph-20

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

paragraph - 16

Text 16

paragraph-14

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

eyebrow
Lorem Ipsum
All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List
All Unordered Lists
  • Example Unordered List
  • Example Unordered List

Color

Background

Dark Blue

#021725
u-bg-dark-blue

Blue

#002B49
u-bg-blue

Blue White

#00a0ff
u-bg-blue

Green

#155E52
u-bg-green

Black

#010C13
u-bg-black

Blue Light

#E8F4FF
u-bg-blue-light

White

#FFFFFF
u-bg-white

Dark Blue - Blue

#021725 - #002B49
u-bg-dbb

Blue Light - White

#E8F4FF - #FFFFFF
u-bg-blw

Light Blue - Green

##23e5b8 - ##0069a7
u-bg-blw

Text

Aa

Primary

#d14424
u-text-primary
Aa

Black

#010C13
u-text-black
Aa

Dark Gray

#302f2c
u-text-darkgray
Aa

Mid Gray

#888680
u-text-midgray
Aa

Light Gray

#dfddd6
u-text-lightgray
Aa

White

#FFFFFF
u-text-white

Components

Buttons

НАЖМИ СЮДА

Default

btn
Button

Default

btn
Button

Secondary

btn
cc-secondary
Text

Text Link

All Links
Button

Default Light

btn
cc-light
Button

Secondary Light

btn
cc-secondary
cc-light
Text

Text Link Light

u-text-white

Card

Информационная
безопасность

  • Хранение и резервное копирование данных
    ‍
  • Проектирование и построение частных и гибридных облачных инфраструктур
    ‍
  • Гиперконвергентные решения
    ‍
  • ‍Виртуализация рабочих мест (VDI)
    ‍
  • Системы мониторинга ИТ-инфраструктуры и производительности приложений
    ‍
  • Сетевые решения и балансировка приложений
    ‍
  • Импортозамещение в ИТ-инфраструктуре

Default

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.

Prevent Style Clean Up

Utilities

Margin

Top

u-mt-0
margin-top: 0;
u-mt-1
margin-top: 1em;
u-mt-2
margin-top: 2em;
u-mt-3
margin-top: 3em;
u-mt-auto
margin-top: auto;

Bottom

u-mb-0
margin-bottom: 0;
u-mb-5
margin-bottom: 0;
u-mb-15
margin-bottom: 15px to em;
u-mb-10
margin-bottom: 15px to em;
u-mb-20
margin-bottom: 20px to em;
u-mb-80
margin-bottom: 80px to em;
u-mb-40
margin-bottom: 40px to em;
u-mb-3em
margin-bottom: 270px to em - 5em;

Other

u-m-0
margin: 0;
u-mlr-auto
margin: 0 auto; (centers element))
u-mr-1
margin-right: 1em;
u-ml-1
margin-left: 10px to em;

Padding

Top

u-pt-0
padding-top: 0;
u-pt-1
padding-top: 1em;
u-pt-2
padding-top: 2em;
u-pt-3
padding-top: 3em;

Bottom

u-pb-0
padding-bottom: 0;
u-pb-1
padding-bottom: 1em;
u-pb-2
padding-bottom: 2em;
u-pb-3
padding-bottom: 3em;

Other

u-p-0
padding: 0;
u-p-1
padding: 1em;
u-p-0-5
padding: 1em;
u-pl-10px
padding: 10px to em;

Alignment

u-text-center
text-align: center;
u-text-right
text-align: right;

Overflow

u-overflow-hidden
overflow: hidden;
u-overflow-visible
overflow: visible;

Display + position

u-d-none
display: none;
u-d-block
display: block;
u-d-flex
display: flex;
u-position-relative;
position: relative;

Size

u-w-100
width: 100%;
u-h-100
height: 100%;

Helpers

u-img-cover
Multiple properties
u-link-cover
Multiple properties
Open link
u-aspect-1x1
Multiple properties
u-z-index-1
Multiple properties
u-sr-only
Multiple properties
Screen Reader Only
u-border
Multiple properties

Layout

Section

section

Container

container

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.