***STAGE*** AIGNER_OFF DEVELOP

Style Guide

This page outlines the current styles and standards for the ***STAGE*** AIGNER_OFF DEVELOP website.

Colors

An overview of this site's brand colors.

Primary

Primary

Ultra Light

Light

Semi-Light

Medium

Semi Dark

Dark

Ultra Dark

Hover

Secondary

Secondary

Ultra Light

Light

Semi-Light

Medium

Semi Dark

Dark

Ultra Dark

Hover

Tertiary

Tertiary

Ultra Light

Light

Semi-Light

Medium

Semi Dark

Dark

Ultra Dark

Hover

Accent

Accent

Ultra Light

Light

Semi-Light

Medium

Semi Dark

Dark

Ultra Dark

Hover

Base

Base

Ultra Light

Light

Semi-Light

Medium

Semi Dark

Dark

Ultra Dark

Hover

Neutral

Neutral

Ultra Light

Light

Semi-Light

Medium

Semi Dark

Dark

Ultra Dark

Hover

Succes (Fix)

Success

Ultra Light

Light

Semi-Light

Medium

Semi Dark

Dark

Ultra Dark

Hover

Warning (Fix)

Warning

Ultra Light

Light

Semi-Light

Medium

Semi Dark

Dark

Ultra Dark

Hover

Info (Fix)

Info

Ultra Light

Light

Semi-Light

Medium

Semi Dark

Dark

Ultra Dark

Hover

Danger (Fix)

Danger

Ultra Light

Light

Semi-Light

Medium

Semi Dark

Dark

Ultra Dark

Hover

Transparencies

Primary Trans Dark

Secondary Trans Dark

Tertiary Trans Dark

Accent Trans Dark

Base Trans Dark

Neutral Trans Dark

White Trans Light

White Trans Ultra Light

Typography

Below is an overview of responsive typography sizes and weights for this site. These are computed from a base size and a mathematical scale.

Headings H1 - H6

H1

html * Heading 1
Das ist eine Heading H1

.h1 * Heading 1
Das ist eine Heading H1

H2

html * Heading 2
Das ist eine Heading H2

.h2 * Heading 2
Das ist eine Heading H2

H3

html * Heading 3
Das ist eine Heading H3

.h3 * Heading 3
Das ist eine Heading H3

H4

html * Heading 4
Das ist eine Heading H4

.h4 * Heading 4
Das ist eine Heading H4

H5

html * Heading 5
Das ist eine Heading H5
.h5 * Heading 5
Das ist eine Heading H5

H6

html * Heading 6
Das ist eine Heading H6
.h6 * Heading 6
Das ist eine Heading H6

Body Texts XXL - XS

BODY TEXT (--xxl)

Text is overwritten in frontend by live font size value in px.

Text is overwritten in frontend by live font size value in px.

--text-xxl * nur font-size Variable
Das ist ein Text mit der Variable

.text-xxl * Klasse mit allen Property-Stylings
Das ist ein Text mit der Klasse

BODY TEXT (--xl)

Text is overwritten in frontend by live font size value in px.

Text is overwritten in frontend by live font size value in px.

--text-xl * nur font-size Variable
Das ist ein Text mit der Variable

.text-xl * Klasse mit allen Property-Stylings
Das ist ein Text mit der Klasse

BODY TEXT (--l)

Text is overwritten in frontend by live font size value in px.

Text is overwritten in frontend by live font size value in px.

--text-l * nur font-size Variable
Das ist ein Text mit der Variable

.text-l * Klasse mit allen Property-Stylings
Das ist ein Text mit der Klasse

BODY TEXT (--m)

Text is overwritten in frontend by live font size value in px.

Text is overwritten in frontend by live font size value in px.

--text-m * nur font-size Variable
Das ist ein Text mit der Variable

.text-m * Klasse mit allen Property-Stylings
Das ist ein Text mit der Klasse

SMALL TEXT (--s)

Text is overwritten in frontend by live font size value in px.

Text is overwritten in frontend by live font size value in px.

--text-xs * nur font-size Variable
Das ist ein Text mit der Variable

.text-s * Klasse mit allen Property-Stylings
Das ist ein Text mit der Klasse

XTRA SMALL TEXT (--xs)

Text is overwritten in frontend by live font size value in px.

Text is overwritten in frontend by live font size value in px.

--text-xs * nur font-size Variable
Das ist ein Text mit der Variable

.text-xs * Klasse mit allen Property-Stylings
Das ist ein Text mit der Klasse

Examples - Headings H1 - H6 mit Body Text

Heading 1 (H1)

Text is overwritten in frontend by live font size value in px.

Text is overwritten in frontend by live font size value in px.

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.

Heading 2 (H2)

Text is overwritten in frontend by live font size value in px.

Text is overwritten in frontend by live font size value in px.

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.

Heading 3 (H3)

Text is overwritten in frontend by live font size value in px.

Text is overwritten in frontend by live font size value in px.

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.

Heading 4 (H4)

Text is overwritten in frontend by live font size value in px.

Text is overwritten in frontend by live font size value in px.

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.

Heading 5 (H5)

Text is overwritten in frontend by live font size value in px.

Text is overwritten in frontend by live font size value in px.

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.

Heading 6 (H6)

Text is overwritten in frontend by live font size value in px.

Text is overwritten in frontend by live font size value in px.

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.

Example - Body Text Schriftbild

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Smart Spacing (Typography)

Below are examples of rtf-fields. This shows how paragraph, headings and list spacings looks like in wysiwyf-fields.

Smart Spacing ===>>> NUR RICH TEXT FIELDS

1. Das ist die ERSTE Ãœberschrift im Rich-Text-Field (Fix-Paragraph-Spacing => keine Auswirkung wenn auf ON)

Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert.

Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert.

Die Abstände zwischen Absätzen (hier aber NUR oberhalb wirksam, weil unterhalb eine CHILD-Zwischenüberschrift) folgt werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (hier aber NUR oberhalb wirksam, weil unterhalb eine CHILD-Zwischenüberschrift) folgt werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert.

2. CHILD/SIBLING Zwischen-Überschrift (Abstand oberhalb über BCSS-Setting DEFAULT HEADING SPACING => gilt für alle H2-H6)

Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert.

Das hier ist eine Auflistung mit Aufzählungspunkten (only ONE hierarchy level)

  • Hierarchy Level #1
  • Hierarchy Level #1
  • Hierarchy Level #1
  • Hierarchy Level #1
  • Hierarchy Level #1
  • Hierarchy Level #1
  • Hierarchy Level #1
  • Hierarchy Level #1
  • Hierarchy Level #1

Das hier ist eine Auflistung mit Aufzählungspunkten (with TWO hierarchy levels)

  • Hierarchy Level #1
    • Hierarchy Level #2
    • Hierarchy Level #2
    • Hierarchy Level #2
  • Hierarchy Level #1
    • Hierarchy Level #2
    • Hierarchy Level #2
    • Hierarchy Level #2
  • Hierarchy Level #1
    • Hierarchy Level #2
    • Hierarchy Level #2
    • Hierarchy Level #2
  • Hierarchy Level #1
    • Hierarchy Level #2
    • Hierarchy Level #2
    • Hierarchy Level #2
  • Hierarchy Level #1
    • Hierarchy Level #2
    • Hierarchy Level #2
    • Hierarchy Level #2

Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert.

3. CHILD/SIBLING Zwischen-Überschrift (Abstand oberhalb über BCSS-Setting DEFAULT HEADING SPACING)

Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert.

Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert. Die Abstände zwischen Absätzen (also hier oberhalb und unterhalb dieses Absatzes werden über das BCSS-Setting DEFAULT PARAGRAPH SPACING definiert.

Das ist einfach nur ein Absatz nach einer Liste, um zu prüfen, ob der Abstand für die First Child-Liste korrekt OBEN nicht angewendet wird, unten aber schon. Das ist einfach nur ein Absatz nach einer Liste, um zu prüfen, ob der Abstand für die First Child-Liste korrekt OBEN nicht angewendet wird, unten aber schon. Das ist einfach nur ein Absatz nach einer Liste, um zu prüfen, ob der Abstand für die First Child-Liste korrekt OBEN nicht angewendet wird, unten aber schon. Das ist einfach nur ein Absatz nach einer Liste, um zu prüfen, ob der Abstand für die First Child-Liste korrekt OBEN nicht angewendet wird, unten aber schon. Das ist einfach nur ein Absatz nach einer Liste, um zu prüfen, ob der Abstand für die First Child-Liste korrekt OBEN nicht angewendet wird, unten aber schon. Das ist einfach nur ein Absatz nach einer Liste, um zu prüfen, ob der Abstand für die First Child-Liste korrekt OBEN nicht angewendet wird, unten aber schon.
  • Hier ist eine zweite Liste Ebene 1 – Zeile 1
  • Hier ist eine zweite Liste Ebene 1 – Zeile 2
    • xxx
    • yyy
    • zzz
  • Hier ist eine zweite Liste Ebene 1 – Zeile 3
  • Hier ist eine zweite Liste Ebene 1 – Zeile 4
    • xxx
    • yyy
    • zzz
  • Hier ist eine zweite Liste Ebene 1 – Zeile 5
Das ist einfach nur ein Absatz nach einer Liste, um zu prüfen, ob der Abstand für die First Child-Liste korrekt OBEN nicht angewendet wird, unten aber schon. Das ist einfach nur ein Absatz nach einer Liste, um zu prüfen, ob der Abstand für die First Child-Liste korrekt OBEN nicht angewendet wird, unten aber schon. Das ist einfach nur ein Absatz nach einer Liste, um zu prüfen, ob der Abstand für die First Child-Liste korrekt OBEN nicht angewendet wird, unten aber schon. Das ist einfach nur ein Absatz nach einer Liste, um zu prüfen, ob der Abstand für die First Child-Liste korrekt OBEN nicht angewendet wird, unten aber schon. Das ist einfach nur ein Absatz nach einer Liste, um zu prüfen, ob der Abstand für die First Child-Liste korrekt OBEN nicht angewendet wird, unten aber schon. Das ist einfach nur ein Absatz nach einer Liste, um zu prüfen, ob der Abstand für die First Child-Liste korrekt OBEN nicht angewendet wird, unten aber schon.
  • Hier ist eine zweite Liste Ebene 1 – Zeile 1
  • Hier ist eine zweite Liste Ebene 1 – Zeile 2
    • xxx
    • yyy
    • zzz
  • Hier ist eine zweite Liste Ebene 1 – Zeile 3
  • Hier ist eine zweite Liste Ebene 1 – Zeile 4
    • xxx
    • yyy
    • zzz
  • Hier ist eine zweite Liste Ebene 1 – Zeile 5
    • xxx
    • yyy
    • zzz
Das ist nun ein Beispiel für einen Text, wenn Bilder direkt im wysiwyg-Element eingebunden werden. Das ist nun ein Beispiel für einen Text, wenn Bilder direkt im wysiwyg-Element eingebunden werden. Das ist nun ein Beispiel für einen Text, wenn Bilder direkt im wysiwyg-Element eingebunden werden. Das ist nun ein Beispiel für einen Text, wenn Bilder direkt im wysiwyg-Element eingebunden werden. Das ist nun ein Beispiel für einen Text, wenn Bilder direkt im wysiwyg-Element eingebunden werden.
leaves dark 1920x1080
leaves dark 1920×1080

Das ist nun ein Beispiel für einen Text, wenn Bilder direkt im wysiwyg-Element eingebunden werden. Das ist nun ein Beispiel für einen Text, wenn Bilder direkt im wysiwyg-Element eingebunden werden. Das ist nun ein Beispiel für einen Text, wenn Bilder direkt im wysiwyg-Element eingebunden werden. Das ist nun ein Beispiel für einen Text, wenn Bilder direkt im wysiwyg-Element eingebunden werden. Das ist nun ein Beispiel für einen Text, wenn Bilder direkt im wysiwyg-Element eingebunden werden.

Buttons

Solid and outline buttons are available across all color sets including black and white.

BUTTONS ON LIGHT BACKGROUND

Text is overwritten in frontend by live font size value in px.

Text is overwritten in frontend by live font size value in px.

.btn-primary.btn-primary-light.btn-primary-dark.btn-outline-primary.btn-outline-primary-light.btn-outline-primary-dark
.btn-secondary.btn-secondary-light.btn-secondary-dark.btn-outline-secondary.btn-outline-secondary-light.btn-outline-secondary-dark

BUTTONS ON DARK BACKGROUND

.btn-primary.btn-primary-light.btn-primary-dark.btn-outline-primary.btn-outline-primary-light.btn-outline-primary-dark
.btn-secondary.btn-secondary-light.btn-secondary-dark.btn-outline-secondary.btn-outline-secondary-light.btn-outline-secondary-dark

Button scale

Buttons WITHOUT icons

Button S

btn-primary / btn-s

Button Standard M

btn-primary

Button L

btn-primary / btn-l

Buttons WITH icons

Button S

btn-primary / btn-s

Button Standard (gleich wie .btn--m)

btn-primary

Button L

btn-primary / btn-l

Text Links

Bricks native Basic and Rich text links and BCSS text links on white and dark background.

Text Link in Basic Text (Taken from BCSS LINK Color)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata. Das ist ein normaler Link innerhalb eines Bricks-Textelements (ohne Klasse) dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

Text Link in Rich Text (Taken from BCSS LINK Color)

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata. Das ist ein normaler Link innerhalb eines Bricks-Textelements (ohne Klasse) dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.

LINK UNDERLINE OFFSET (on various text-sizes)

Links - Basic Text Element (Link hardcoded in content)

Links - Basic Text Element (Link with native Bricks settings) - Links OK in frontend, but not indicated as links in backend. Bricks issue, no soltuion possible!

Links - Text Link Element (without Icon)

Links - Text Link Element (with Icon)

LINK COLORS

Contextual Color Utilites

Here are all contextual colors presented

Backgrounds

.

.

--bg-ultra-dark

.

.

--bg-dark

.

.

--bg-light

.

.

--bg-ultra-light

Text

Standard Body Text

--text-light

--text-light-muted

--text-dark-muted

--text-dark

Manual Color Relationships - Add --vars To Parent DIV

Heading Color

Text Color for Body Text

Color for text linkButton

Only necessary on parent div:
–bg-ultra-dark
–text-light
.focus-color-light

On heading inside div (if needed)
.b-link-reset

Heading Color

Text Color for Body Text

Color for text linkButton

Only necessary on parent div:
–bg-dark
–text-light-muted
.focus-color-light

On heading inside div (if needed)
.b-link-reset

Heading Color

Text Color for Body Text

Color for text linkButton

Only necessary on parent div:
–bg-light
–text-dark-muted

On heading inside div (if needed)
.b-link-reset

Heading Color

Text Color for Body Text

Color for text linkButton

Only necessary on parent div:
–bg-ultra-light
–text-dark

On heading inside div (if needed)
.b-link-reset

leaves green 1920x1080

BZW Overlay Klasse - eigene Farbe

Individuelles Overlay (wie BCSS-Settings) => Klasse ".b-overlay-main"

Test-button auf Overlay

Border radius

There are six border radius values calculated from a base size and a mathematical scale.

--radius

--radius-xs

--radius-s

--radius-m

--radius-l

--radius-xl

--radius-xxl

--radius-circle

Border colors

BCSS border classes (include border color & border radius)

.border-dark

.border-light

Box Shadows

There are three multi-layer box shadows to choose from.

.box-shadow-m

.box-shadow-l

.box-shadow-xl

Dividers

BZW Divider Classes (no BCSS)

.divider-light-bg

.divider-light-bg-icon

.divider-dark-bg

.divider-dark-bg-icon

Taglines

bzw Demo Tagline

Taglines on light bg

Das ist eine Demo-Tagline

Das ist eine Demo-Tagline

Taglines on dark bg

Das ist eine Demo-Tagline

Das ist eine Demo-Tagline

Widths

There are seven values you can use to control element width. They're automatically responsive.

--width-xs
(variable)

.width-xs
(class)

--width-s
(variable)

.width-s
(class)

--width-m
(variable)

.width-m
(class)

--width-l
(variable)

.width-l
(class)

--width-xl
(variable)

.width-xl
(class)

--width-xxl
(variable)

.width-xxl
(class)

--width-full
(variable)

.width-full
(class)

Section Padding

Padding for sections is responsive and based on a multiplier of the core spacing system.

None

XS

S

M

L

XL

2XL

Spacing

There are six levels of responsive spacing calculated from a base size and a mathematical scale. This ensures margin, padding, and gaps all match perfectly.

--space-xs

--space-s

--space-m

--space-l

--space-xl

--space-2xl

Element Padding

Here are the six levels of spacing visualized as padding.

.padding-xs

This is a card with XS padding. Its content is pretty close to the edges.

.padding-s

This is a card with S padding. It has a little bit tighter padding.

.padding-m

This is a card with M padding. It has standard breathing room.

.padding-l

This is a card with L padding. It has extra breathing room.

.padding-xl

This is a card with XL padding. It has significant breathing room.

.padding-2xl

This is a card with XXL padding. Avoid using this in a confined space.

BCSS Contextual Spacing Classes

Demo-Layouts zum Setup der Contextual Spcing Classes:
.container-gap / .content-gap / .grid-gap

Containter Gap

Content Gap

Das ist ein ganz normales Content-Element

Das ist ein ganz normales Content-Element

Das ist ein ganz normales Content-Element

Das ist ein ganz normales Content-Element

Das ist ein ganz normales Content-Element

Content Gap - S

Das ist ein ganz normales Content-Element

Das ist ein ganz normales Content-Element

Das ist ein ganz normales Content-Element

Das ist ein ganz normales Content-Element

Das ist ein ganz normales Content-Element

Content Gap - L

Das ist ein ganz normales Content-Element

Das ist ein ganz normales Content-Element

Das ist ein ganz normales Content-Element

Das ist ein ganz normales Content-Element

Das ist ein ganz normales Content-Element

Grid Gap

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Grid Gap - S

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Grid Gap - L

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

Das ist eine Grid Card

ACF Options Page - Kontaktdaten

Kontaktdaten auf hellem + dunklem Hintergrund

Kontaktdaten DUNKEL auf hellem BG
=> KEINE Klasse
+43 7246 20200-0office@aigner.atwww.aigner-air.com
Custom SVG: Kontaktdaten DUNKEL auf hellem BG
=> mit Klassen "--dark"
Dieselstraße 13, 4623 Gunskirchen

+43 7246 20200-0

office@aigner.at

www.aigner-air.com

Kontaktdaten HELL auf dunklem BG
=> KEINE Klasse
+43 7246 20200-0office@aigner.atwww.aigner-air.com
Custom SVG: Kontaktdaten HELL auf dunklem BG
=> mit Klassen "--light"
Dieselstraße 13, 4623 Gunskirchen

+43 7246 20200-0

office@aigner.at

www.aigner-air.com

ACF Options Page - Social Icons

Social Icons auf hellem + dunklem Hintergrund

Social Links DUNKEL auf hellem BG
=> Klasse "social--text-dark"
Custom SVG: Social Icons DUNKEL auf hellem BG
=> mit Klassen "--dark"
Social Links DUNKEL auf hellem BG
=> Klasse "social--text-light"
Custom SVG: Social Icons HELL auf dunklem BG
=> mit Klassen "--light"

Grid Card Widths - autofit & autofill

AUTO-FIT: "Existing items STRETCH to fill available space" (MAINLY USED - growing grid cards. like ACSS autogrid)

AUTO-FILL: "Existing items KEEP THEIR MINIMUM WIDTH" (more like standard grids)

Grids with --grid-autofit-x

  • .grid-autofit-xs

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofit-xs

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofit-xs

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofit-s

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofit-s

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofit-s

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofit-m

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofit-m

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofit-m

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofit-l

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofit-l

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofit-l

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofit-xl

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofit-xl

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofit-xl

    Here goes your text ... Select any part of your text to access the formatting toolbar.

Grids with --grid-autofill-x

  • .grid-autofill-xs

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofill-xs

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofill-xs

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofill-s

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofill-s

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofill-s

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofill-m

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofill-m

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofill-m

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofill-l

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofill-l

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofill-l

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofill-xl

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofill-xl

    Here goes your text ... Select any part of your text to access the formatting toolbar.

  • .grid-autofill-xl

    Here goes your text ... Select any part of your text to access the formatting toolbar.

Ribbons & Badges

Token-driven ribbon component system for marking elements with visual labels (On Sale, New, ...)

I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar. Here goes your text ... Select any part of your text to access the formatting toolbar.Here goes your text ... Select any part of your text to access the formatting toolbar.

Here goes your text ... Select any part of your text to access the formatting toolbar. Here goes your text ... Select any part of your text to access the formatting toolbar.Here goes your text ... Select any part of your text to access the formatting toolbar.

Ribbon Text

I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar. Here goes your text ... Select any part of your text to access the formatting toolbar.Here goes your text ... Select any part of your text to access the formatting toolbar.

Here goes your text ... Select any part of your text to access the formatting toolbar. Here goes your text ... Select any part of your text to access the formatting toolbar.Here goes your text ... Select any part of your text to access the formatting toolbar.

I am a heading

Here goes your text ... Select any part of your text to access the formatting toolbar. Here goes your text ... Select any part of your text to access the formatting toolbar.Here goes your text ... Select any part of your text to access the formatting toolbar.

Here goes your text ... Select any part of your text to access the formatting toolbar. Here goes your text ... Select any part of your text to access the formatting toolbar.Here goes your text ... Select any part of your text to access the formatting toolbar.

Ribbon Text

Sticky Offset (for sidebars, ...)

Testen von verschiedenen Sticky Offset Settings.

Here goes your text … Select any part of your text to access the formatting toolbar. Here goes your text … Select any part of your text to access the formatting toolbar. Here goes your text … Select any part of your text to access the formatting toolbar.

Here goes your text … Select any part of your text to access the formatting toolbar. Here goes your text … Select any part of your text to access the formatting toolbar. Here goes your text … Select any part of your text to access the formatting toolbar.

Here goes your text … Select any part of your text to access the formatting toolbar. Here goes your text … Select any part of your text to access the formatting toolbar. Here goes your text … Select any part of your text to access the formatting toolbar.

.sticky

This text stays fixed on scroll (desktop only).

Demo-content

Demo-content

Demo-content

Demo-content

Demo-content

.sticky
.sticky-top-s

This text stays fixed on scroll (desktop only).

Demo-content

Demo-content

Demo-content

Demo-content

.sticky
.sticky-top-m

This text stays fixed on scroll (desktop only).

Demo-content

Demo-content

Demo-content

Demo-content

.sticky
.sticky-top-l

This text stays fixed on scroll (desktop only).

Demo-content

Demo-content

Demo-content

Demo-content

Header - Scroll-To-#-Offset (if sticky header is used)

Testen von Scroll Offset auf unterschiedlichen Breakpoints bei gleichen oder unterschiedlichen Header-Höhen.

Scroll To # - PrimaryScroll To # - SecondaryScroll To # - Tertiary

DIV Primary

DIV Secondary

DIV Tertiary

Images - Captions

Default captions for images as single images or images in galleries

Image in WYSIWYG

This is an image in a WYSIWYG field. This is an image in a WYSIWYG field. This is an image in a WYSIWYG field. This is an image in a WYSIWYG field.This is an image in a WYSIWYG field. This is an image in a WYSIWYG field.This is an image in a WYSIWYG field.

leaves dark 1920x1080
leaves dark 1920×1080

This is an image in a WYSIWYG field. This is an image in a WYSIWYG field. This is an image in a WYSIWYG field. This is an image in a WYSIWYG field.This is an image in a WYSIWYG field. This is an image in a WYSIWYG field.This is an image in a WYSIWYG field.

Single Images

leaves green 1920x1080
leaves green 1920x1080

Image Gallery

Animation Bricks Default - FADE UP

Das ist ein Demo-Text. Das ist ein Demo-Text. Das ist ein Demo-Text. Das ist ein Demo-Text. Das ist ein Demo-Text. Das ist ein Demo-Text. Das ist ein Demo-Text. Das ist ein Demo-Text. Das ist ein Demo-Text. Das ist ein Demo-Text. Das ist ein Demo-Text. Das ist ein Demo-Text.

A11y Buttons

Two buttons with correct A11y implementation

Content Grid - Demos

Several content grid sections below for testing reasons

Content Grid - DEFAULT - 1200px

Default

1. Section > .content-grid

Content Grid - FEATURE - + 50px pro Seite dazu

Feature

1. Section > .content-grid
2. Grid Container > .content-feature

Content Grid - FEATURE MAX - + 100px pro Seite dazu

Feature Max

1. Section > .content-grid
2. Grid Container > .content-feature-max

Content Grid - FULL - Volle Browserbreite

Full

1. Section > .content-grid
2. Grid Container > .content-full

Content Grid - FULL SAVE - Volle Browserbreite abzgl. Section Gutter links und rechts

Full Safe

1. Section > .content-grid
2. Grid Container > .content-full-safe

Content Grid WITHOUT Gap - LINKS: Breakout Fullwidth / RECHTS: Content-Aligned

Breakout Left - WITHOUT GAP

1. Section > .content-grid

2. Grid Container > .content-breakout-left–without-gap
   default behavior: 2 cols with 50% each
   => override default col-behavior with additional class on container
   => + „var(–grid-1-2) !important;“ on class
   => + „var(–grid-gap-l) !important;“ on class

These classes require matching values for
1) Bricks Container Width (Theme Styles → Elements → Container → Width) and
2) BCSS –content-width variable.

Content Grid WITH Gap - LINKS: Breakout Fullwidth / RECHTS: Content-Aligned

Breakout Left - WITH GAP

1. Section > .content-grid

2. Grid Container > .content-breakout-left–with-gap
   default behavior: 2 cols with 50% each
   => override default col-behavior with additional class on container
   => + „var(–grid-1-2) !important;“ on class
   => + „var(–grid-gap-l) !important;“ on class

3. Default gap –col-gap is added automatically

4. Override default col-gap by adding any other gap-variable (or gap-class) on Main Grid Container:
–grid-gap / –grid-gap-s / –grid-gap-l
–content-gap / –content-gap-s / –content-gap-l
–container-gap

These classes require matching values for
1) Bricks Container Width (Theme Styles → Elements → Container → Width) and
2) BCSS –content-width variable.

Content Grid WITHOUT GAP - LINKS: Content-Aligned / RECHTS: Breakout Fullwidth

Breakout Right - WITHOUT GAP

1. Section > .content-grid

2. Grid Container > .content-breakout-right–without-gap
   default behavior: 2 cols with 50% each
   => override default col-behavior with additional class on container
   => + „var(–grid-1-2) !important;“ on class
   => + „var(–grid-gap-l) !important;“ on class

These classes require matching values for
1) Bricks Container Width (Theme Styles → Elements → Container → Width) and
2) BCSS –content-width variable.

Content Grid WITH GAP - LINKS: Content-Aligned / RECHTS: Breakout Fullwidth

Breakout Right - WITH GAP

1. Section > .content-grid

2. Grid Container > .content-breakout-left–with-gap
   default behavior: 2 cols with 50% each
   => override default col-behavior with additional class on container
   => + „var(–grid-1-2) !important;“ on class
   => + „var(–grid-gap-l) !important;“ on class

3. Default gap –col-gap is added automatically

4. Override default col-gap by adding any other gap-variable (or gap-class) on Main Grid Container:
–grid-gap / –grid-gap-s / –grid-gap-l
–content-gap / –content-gap-s / –content-gap-l
–container-gap

These classes require matching values for
1) Bricks Container Width (Theme Styles → Elements → Container → Width) and
2) BCSS –content-width variable.