document.addEventListener('DOMContentLoaded', () => {
    // Target the native Bricks header wrapper
    const header = document.getElementById('brx-header'); 
    if (!header) return;

    const updateHeaderHeight = () => {
        const headerHeight = header.offsetHeight;
        // This creates a live variable called --header-height we can use in CSS!
        document.documentElement.style.setProperty('--header-height', `${headerHeight}px`);
    };

    // Run immediately, and re-run if the user resizes their screen or rotates their phone
    updateHeaderHeight();
    window.addEventListener('resize', updateHeaderHeight);
    window.addEventListener('orientationchange', updateHeaderHeight);
});

Button playground

SmallMediumLargeExtra Large
SmallMediumLargeExtra Large
SmallMediumLargeExtra Large
SmallMediumLargeExtra Large
Small Button TextMedium Button TextLarge Button TextExtra Large Button Text
Arrow V2 Primary Small
Arrow V2 Primary Medium
Arrow V2 Primary Large
Arrow V2 Primary XL
Arrow V2 Primary 2XL
Arrow V2 Primary Small
Arrow V2 Primary Medium
Arrow V2 Primary Large
Arrow V2 Primary XL
Arrow V2 Primary 2XL
Arrow V2 Primary Small
Arrow V2 Primary Medium
Arrow V2 Primary Large
Arrow V2 Primary XL
Arrow V2 Primary 2XL
Arrow V2 Primary Small
Arrow V2 Primary Medium
Arrow V2 Primary Large
Arrow V2 Primary XL
Arrow V2 Primary 2XL

Button playground

SmallMediumLargeExtra Large
SmallMediumLargeExtra Large
SmallMediumLargeExtra Large
SmallMediumLargeExtra Large
Small Button TextMedium Button TextLarge Button TextExtra Large Button Text
Arrow V2 Primary Small
Arrow V2 Primary Medium
Arrow V2 Primary Large
Arrow V2 Primary XL
Arrow V2 Primary 2XL
Arrow V2 Primary Small
Arrow V2 Primary Medium
Arrow V2 Primary Large
Arrow V2 Primary XL
Arrow V2 Primary 2XL
Arrow V2 Primary Small
Arrow V2 Primary Medium
Arrow V2 Primary Large
Arrow V2 Primary XL
Arrow V2 Primary 2XL
Arrow V2 Primary Small
Arrow V2 Primary Medium
Arrow V2 Primary Large
Arrow V2 Primary XL
Arrow V2 Primary 2XL
Button defaultButton Text
Primary button (sm)Primary button (md)Primary button (lg)Primary button (xl)
Secondary button (sm)Secondary button (md)Secondary button (lg)Secondary button (xl)
Tertiary button (sm)Tertiary button (md)Tertiary button (lg)Tertiary button (xl)
No BG button (sm)No BG button (md)No BG button (lg)No BG button (xl)
Link color button (sm)Link color button (md)Link color button (lg)Link color button (xl)
Arrow Button v2 (md)
Bombay
Bombay
Bombay
Retail
Button
Arrow v2 (sm)
Arrow v2 (md)
Arrow v2 (lg)
Arrow v2 (xl)
Arrow v2 (2xl)
Arrow v2 (2xl)
Arrow v2 (sm)
Arrow v2 (md)
Arrow v2 (lg)
Arrow v2 (xl)
Arrow v2 (2xl)
Arrow v2 (sm)
Arrow v2 (md)
Arrow v2 (lg)
Arrow v2 (xl)
Arrow v2 (2xl) Arrow v2 (2xl) Arrow v2 (2xl)
Arrow v2 (sm)
Arrow v2 (md)
Arrow v2 (lg)
Arrow v2 (xl)
Arrow v2 (2xl)
Arrow Button
Arrow Button
NB Arrow (sm)
NB Arrow (md)
Arrow Button
Arrow Button v5
Ripple Bottom
Ripple Bottom
Top Ripple
Top Ripple
Bottom Ripple
Bottom Ripple
Top Ripple
Top Ripple
Bottom Ripple
Bottom Ripple
Ripple Button v6
Ripple Button v6
Marquee Button

I am a Display 3xl Heading

I am a Display 2xl Heading

I am a Display xl heading

I am a Display lg heading

I am a Display md heading

I am a Display sm heading

I am a Display xs heading

3xl heading with Accent

2xl heading with Accent

xl heading with Accent

lg heading with Accent

md heading with Accent

sm heading with Accent

xs heading with Accent

2xl heading with

Accent

Text 2xl. Here goes your text ... Select any part of your text to access the formatting toolbar.
Text xl. Here goes your text ... Select any part of your text to access the formatting toolbar.
Text lg. Here goes your text ... Select any part of your text to access the formatting toolbar.
Text md. Here goes your text ... Select any part of your text to access the formatting toolbar.
Text sm. Here goes your text ... Select any part of your text to access the formatting toolbar.
Text xs. Here goes your text ... Select any part of your text to access the formatting toolbar.

17px

Here is a standard paragraph of body copy. This is the default size of regular body copy throughout the site with an example of a link here.

And here is another paragraph of body copy, the same size as the one above. Again, here is a link, and this is just the default size of regular body copy throughout the site.

18px

Here is a standard paragraph of body copy. This is the default size of regular body copy throughout the site with an example of a link here.

And here is another paragraph of body copy, the same size as the one above. Again, here is a link, and this is just the default size of regular body copy throughout the site.

text md variable

Here is a standard paragraph of body copy. This is the default size of regular body copy throughout the site with an example of a link here.

And here is another paragraph of body copy, the same size as the one above. Again, here is a link, and this is just the default size of regular body copy throughout the site.

text lg variable

Here is a standard paragraph of body copy. This is the default size of regular body copy throughout the site with an example of a link here.

And here is another paragraph of body copy, the same size as the one above. Again, here is a link, and this is just the default size of regular body copy throughout the site.

text xl variable

Here is a standard paragraph of body copy. This is the default size of regular body copy throughout the site with an example of a link here.

And here is another paragraph of body copy, the same size as the one above. Again, here is a link, and this is just the default size of regular body copy throughout the site.

text 2xl variable

Here is a standard paragraph of body copy. This is the default size of regular body copy throughout the site with an example of a link here.

And here is another paragraph of body copy, the same size as the one above. Again, here is a link, and this is just the default size of regular body copy throughout the site.

text-md

Here is a standard paragraph of body copy. This is the default size of regular body copy throughout the site with an example of a link here.

And here is another paragraph of body copy, the same size as the one above. Again, here is a link, and this is just the default size of regular body copy throughout the site.

text-md changed

Here is a standard paragraph of body copy. This is the default size of regular body copy throughout the site with an example of a link here.

clamp(1rem, 0.97rem + 0.13vw, 1.13rem)

And here is another paragraph of body copy, the same size as the one above. Again, here is a link, and this is just the default size of regular body copy throughout the site.

text lg

Here is a standard paragraph of body copy. This is the default size of regular body copy throughout the site with an example of a link here.

clamp(1rem, 0.95rem + 0.24vw, 1.13rem)
And here is another paragraph of body copy, the same size as the one above. Again, here is a link, and this is just the default size of regular body copy throughout the site.

text lg changed

Here is a standard paragraph of body copy. This is the default size of regular body copy throughout the site with an example of a link here.

clamp(1.06rem, 0.98rem + 0.36vw, 1.25rem)
And here is another paragraph of body copy, the same size as the one above. Again, here is a link, and this is just the default size of regular body copy throughout the site.

text-xl

Here is a standard paragraph of body copy. This is the default size of regular body copy throughout the site with an example of a link here.

And here is another paragraph of body copy, the same size as the one above. Again, here is a link, and this is just the default size of regular body copy throughout the site.

text-xl changed

Here is a standard paragraph of body copy. This is the default size of regular body copy throughout the site with an example of a link here.

clamp(1rem, 0.97rem + 0.13vw, 1.13rem)

And here is another paragraph of body copy, the same size as the one above. Again, here is a link, and this is just the default size of regular body copy throughout the site.

.

FadeIn

.

FadeInDown

.

FadeInLeft

.

FadeInRight

.

FadeInUp

.

FadeInTopLeft

.

FadeInTopRight

.

FadeInBottomL

.

FadeInBottomR

.

FadeOut

.

FadeOutDown

.

FFadeOutLeft

.

FadeOutRight

.

FadeOutUp