AIGNER_OFF DEVELOP
Style Guide
This page outlines the current styles and standards for the AIGNER_OFF DEVELOP website.
Table Of Contents
- ColorsText - HeadingsText - Body TextsText - Headings & Body TextsText - Smart Spacing (wysiwyg)Links - ButtonsLinks - Text LinksContextual ColorsOverlaysBorders - Radius
- Borders - ColorsDividersBox ShadowsTaglinesWidths (1920)Spacing - Section PaddingSpacing - Default VarsSpacing - Element PaddingSpacing - Contextual
- ACF Options - KontaktACF Options - SocialGrids AutoFIT AutoFILLRibbons & BadgesSticky Offset (for sidebars, ...)Images - CaptionsHeader Scroll-To-#-Offset (if sticky header)AnimationsA11y ButtonsContent Grid
Colors
An overview of this site's brand colors.
Primary
Primary
Ultra Light
Light
Semi-Light
Medium
Semi Dark
Dark
Ultra Dark
Hover
Secondary
Primary
Ultra Light
Light
Semi-Light
Medium
Semi Dark
Dark
Ultra Dark
Hover
Tertiary
Primary
Ultra Light
Light
Semi-Light
Medium
Semi Dark
Dark
Ultra Dark
Hover
Accent
Primary
Ultra Light
Light
Semi-Light
Medium
Semi Dark
Dark
Ultra Dark
Hover
Base
Primary
Ultra Light
Light
Semi-Light
Medium
Semi Dark
Dark
Ultra Dark
Hover
Neutral
Primary
Ultra Light
Light
Semi-Light
Medium
Semi Dark
Dark
Ultra Dark
Hover
Succes (Fix)
Primary
Ultra Light
Light
Semi-Light
Medium
Semi Dark
Dark
Ultra Dark
Hover
Warning (Fix)
Primary
Ultra Light
Light
Semi-Light
Medium
Semi Dark
Dark
Ultra Dark
Hover
Info (Fix)
Primary
Ultra Light
Light
Semi-Light
Medium
Semi Dark
Dark
Ultra Dark
Hover
Danger (Fix)
Primary
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-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-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-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-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-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-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)
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)
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)
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)
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)
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)
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.
- 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
- 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.
Text Links
Bricks native Basic and Rich text links and BCSS text links on white and dark background.
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
Only necessary on parent div:
–bg-ultra-dark
–text-light
+ use (if needed):
.b-heading-color-unset on heading
Only necessary on parent div:
–bg-dark
–text-light-muted
Â
+ use (if needed):
.b-heading-color-unset on heading
Only necessary on parent div:
–bg-light
–text-dark-muted
Â
+ use (if needed):
.b-heading-color-unset on heading
Only necessary on parent div:
–bg-ultra-light
–text-dark
Â
+ use (if needed):
.b-heading-color-unset on heading
BZW Overlay Klasse - eigene Farbe
Individuelles Overlay (wie BCSS-Settings) => Klasse ".b-overlay-main"
Test-button auf OverlayBorder 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
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.
Section Padding
Padding for sections is responsive and based on a multiplier of the core spacing system.
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 7587 208000-0+43 664 1946190info@musterfirma.comwww.beziehungsweise.ccCustom SVG: Kontaktdaten DUNKEL auf hellem BG
=> mit Klassen "--dark"
Igelweg 1, 4552 Wartberg an der KremsKontaktdaten HELL auf dunklem BG
=> KEINE Klasse
+43 7587 208000-0+43 664 1946190info@musterfirma.comwww.beziehungsweise.ccCustom SVG: Kontaktdaten HELL auf dunklem BG
=> mit Klassen "--light"
Igelweg 1, 4552 Wartberg an der KremsGrid 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.
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.
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
Image Gallery
leaves dark 1920x1080 leaves green 1920x1080
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.
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
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–without-gap
3. Default gap –col-gap is added automatically
4. Override –col-gap by adding any other gap-variable on main 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
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–without-gap
3. Default gap –col-gap is added automatically
4. Override –col-gap by adding any other gap-variable on main 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.