[CDG] Webflow Framework

[01] Type Styles

Typography within the CDG Framework is based on set sizes used within our design system. Each size and style can be applied using classes beginning with .text-.

.text-h0

Heading

.text-h1

Heading

.text-h2

Heading

.text-h3

Heading

.text-h4

Heading

.text-h5
Heading
.text-h6
Heading
.text-p-lg

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-p

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-p-sm

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-tag

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.

.u-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

  1. Item 1
  2. Item 2
  3. Item 3

Unordered list

  • Item A
  • Item B
  • Item C

Text link

Bold text

Emphasis

Superscript

Subscript

[02] Heading Spacing

By default, if a Heading or text with a heading style's next sibling is a paragraph, there will be spacing added below the heading. To remove, add .u-heading-spacing-off to the heading

Default

Heading

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.

.u-heading-spacing-off

Heading

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.

[03] Animations

There are some built in animations within the CDG Framework. These can be used by adding .anim-[ANIMATION] to any element.

.anim-marquee

Marquee animation

.anim-fade-in

Fade in animation

.anim-fade-in-blur

Fade in blur animation

.anim-slide-up

Slide up animation

.anim-slide-up-blur

Slide up blur animation

.anim-scale-up

Scale up animation

.anim-scale-up-blur

Scale up blur animation

.anim-clip-up
.anim-clip-down
.anim-clip-left
.anim-clip-right

[04] Animation Modifiers

Using data-attributes, we can modify how some of the animations behave.

[data-cdg-anim-inview]

When applied to an element or parent div, the animation will not trigger until scrolled into view.

[data-cdg-anim-inview="50%"]

If a value is used within the attribute, we can change the trigger point of the animation.

[data-cdg-anim-stagger]

When applied to a parent div, all children will be staggered in their animation by the amount set in the Variables panel.

[data-cdg-anim-stagger="0.8"]

If a value is used within the attribute, we can change the stagger amount.

[data-cdg-text-split="chars"]

Splits text elements into individual characters and plays the animation staggered across each character. Can be used in conjunction with [data-cdg-anim-stagger] and [data-cdg-anim-inview].

Slide up animation

[data-cdg-text-split="words"]

Splits text elements into individual words and plays the animation staggered across each words. Can be used in conjunction with [data-cdg-anim-stagger] and [data-cdg-anim-inview].

Slide up animation

[data-cdg-text-split="lines"]

Splits text elements into individual lines and plays the animation staggered across each line. Can be used in conjunction with [data-cdg-anim-stagger] and [data-cdg-anim-inview].

Slide up animation that is multiple lines long

[05] Grid

.grid-autofit

Wraps children elements with a min-column width as defined in the custom CSS

.grid-autofill

Wraps children elements with a min-column width as defined in the custom CSS

[06] Utilities

.u-mw-x

Sets an element to 100% width with a max-width based in CH values.

.u-mw-10ch
.u-mw-15ch
.u-mw-20ch
.u-mw-25ch
.u-mw-30ch
.u-mw-35ch
.u-mw-40ch
.u-mw-45ch
.u-mw-50ch
.u-mw-60ch
.u-mw-80ch
.u-gap-x

Sets the gap between elements in a grid or flex context.

.u-gap-0
.u-gap-0
.u-gap-0.5
.u-gap-0.5
.u-gap-1
.u-gap-1
.u-gap-1.5
.u-gap-1.5
.u-gap-2
.u-gap-2
.u-gap-2.5
.u-gap-2.5
.u-gap-3
.u-gap-3
.u-gap-3.5
.u-gap-3.5
.u-gap-4
.u-gap-4
.u-gap-4.5
.u-gap-4.5
.u-gap-5
.u-gap-5
.u-text-wrap-balance

This is an example heading

.u-text-wrap-pretty

This is an example heading

.u-text-trim-off

This is an example heading

[07] Components

Infinite Marquee
Accordion

Heading

This is an example content for this dropdown.