Style Guide V0.1

Change log

1. Added the change log
2. Padding Direction + Margin Direction added in a Global Styles component (or just added as classes after the size classes)
3. Text Align - it should be the text align and it was a layout align instead - here its fixed, gotta add "is-streched" to see it properly
4. Added a container xxx large
5. Added a variable max-width xxx large
6. Changed all spacing values to rem
7. Changed the default font size to regular
8. Added text-style-inline-link - for styling links that should look like normal text but highlight on hover / current etc. as opposed to text-style-link that should look like a link with brand color, underline etc.
9. Added text-style-highlight which wraps the text in a highlighted background that breaks with the text lines.
10. Stylized rich text elements

Typography

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.

Fonts

Headings

ABCDEFGHIJKLMONPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Body

ABCDEFGHIJKLMONPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Display

ABCDEFGHIJKLMONPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

Default HTML Styling

Headings

Sample text is being used as a placeholder.

Headings (heading-style)

heading-style-h0

Sample text is being used as a placeholder.

heading-style-h1

Sample text is being used as a placeholder.

heading-style-h2

Sample text is being used as a placeholder.

heading-style-h3

Sample text is being used as a placeholder.

heading-style-h4

Sample text is being used as a placeholder.

heading-style-h5

Sample text is being used as a placeholder.

Text Size (text-size)

text-size-x-large

Sample text is being used as a placeholder. 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.

text-size-large

text-size-regular

text-size-small

text-size-smallest

Text Weight (text-weight)

text-weight-bold

Sample text is being used as a placeholder.

text-weight-bold

Sample text is being used as a placeholder.

text-weight-bold

Sample text is being used as a placeholder.

Text Style (text-style)

Basic

text-style-strikethrough

Sample text is being used as a placeholder.

text-style-underlined

Sample text is being used as a placeholder.

text-style-italic

Sample text is being used as a placeholder.

text-style-caps

Sample text is being used as a placeholder.

Special

text-style-quote

Sample text is being used as a placeholder.

text-style-link

Sample text is being used as a placeholder.

text-style-inline-link

Sample text is being used as a placeholder.

text-style-muted

Sample text is being used as a placeholder.

text-style-muted-invert

Sample text is being used as a placeholder.

text-style-highlight

Sample text is being used as a placeholder. laksjdlkajsdlk lakjsd lkasj dlkajs dlkajs dlkaj sldkj alskdj alksjd

Text Alignment (text-align)

text-align-left

Sample text is being used as a placeholder.

text-align-center

Sample text is being used as a placeholder.

text-align-right

Sample text is being used as a placeholder.

Rich Text (rich-text)

Wszystkie tagi wyświetlane dynamicznie pod tagiem “ritch-text” będą stylizowane jak poniżej:

rich-text

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

Text link

Bold text

Emphasis

^Superscript

_Subscript

‍

Colors

Primitives

We edit color primitives in the variables panel- here they are just for display.

Base Colors

Dark-Primary

Color used for headings and other important elements + its the default background color in dark mode.

Bright-Primary

Color used for background in bright mode, used as the heading color and for important elements in dark mode & inverted sections.

Dark -Secondary

Color used for body text and less important elements.

Bright-Secondary

Color used for body text in dark mode and inverted scenarios.

Brand Colors

Color-Primary

Color used for headings and other important elements + its the default background color in dark mode.

Color-Secondary

Color used for headings and other important elements + its the default background color in dark mode.

Color-Tertiary

Color used for headings and other important elements + its the default background color in dark mode.

Color-Quaternary

Color used for headings and other important elements + its the default background color in dark mode.

Supporting

Panel

Panel-Invert

Muted

Muted-Invert

Link

Link-Invert

Error

Warning

Success

Info

Text Color (text-color)

text-color-primary

Sample text is being used as a placeholder.

text-color-secondary

Sample text is being used as a placeholder.

text-color-brand

Sample text is being used as a placeholder.

text-color-primary-invert

Sample text is being used as a placeholder.

text-color-secondary-invert

Sample text is being used as a placeholder.

text-color-brand-invert

Sample text is being used as a placeholder.

Construction & Helpers

Structure

Containers

page-wrapper

container-small

container-medium

container-large

container-x-large

container-xx-large

container-xxx-large

container-full-width

padding-global

padding-section-small

padding-section-medium

padding-section-large

button-group

max-width

max-width-xx-small

max-width-x-small

max-width-small

max-width-medium

max-width-large

max-width-x-large

max-width-xx-large

Text Areas

text-area-two-column-small

text-area-two-column-medium

text-area-two-column-large

Padding

Direction Classes

padding-bottom

padding-top

padding-horizontal

padding-vertical

padding-left

padding-right

Size Classes

padding-0

padding-tiny

padding-5x-small

padding-4x-small

padding-xxx-small

padding-xx-small

padding-x-small

padding-small

padding-medium

padding-large

padding-x-large

padding-xx-large

padding-xxx-large

padding-4x-large

padding-5x-large

Margin

Direction Classes

margin-bottom

margin-top

margin-horizontal

margin-vertical

margin-left

margin-right

Size Classes

margin-0

margin-tiny

margin-5x-small

margin-4x-small

margin-xxx-small

margin-xx-small

margin-x-small

margin-small

margin-medium

margin-large

margin-x-large

margin-xx-large

margin-xxx-large

margin-4x-large

margin-5x-large

Style Guide V0.1

ABCDEFGHIJKLMONPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

ABCDEFGHIJKLMONPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

ABCDEFGHIJKLMONPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz1234567890

Sample text is being used as a placeholder.

Sample text is being used as a placeholder.

Sample text is being used as a placeholder.

Sample text is being used as a placeholder.

Sample text is being used as a placeholder.

Sample text is being used as a placeholder.

Sample text is being used as a placeholder.

Sample text is being used as a placeholder.

Sample text is being used as a placeholder.

Sample text is being used as a placeholder.

Sample text is being used as a placeholder.

Sample text is being used as a placeholder.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

ABCDEFGHIJKLMONPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

ABCDEFGHIJKLMONPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890

ABCDEFGHIJKLMONPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
1234567890