Styling Definitions

First of all - these definitions can be edited and saved by content authors to create dynamic and adaptable styles on various components. You do not need a developer to apply custom styling definitions. It is important to understand how they work however.

Take a moment to read through this and understand:

It is important to understand how components are generally broken down. All agility Layout Components are contained within a Section. This is in actually a <section> tag and has the ability to be styled as needed - allowing us to apply different spacings as needed.

Many components contain some sort of Heading. This is also in actuality a <h tag. On most components headings have the ability to have the heading level defined, ie - h1, h2, h3... as well as have the ability to be styled independently. This allows us to apply colors, heading levels, font sizes and font weights as needed. A great us of this is for SEO - where visually you want to present something that looks like a very important heading, but structurally it might fall as a lowly h4. These can be styled by applying alignment, color, font, font-weight and size as configurable options.

A large amount of components contain Content. This is content that can be added via the Freeform editor or the Rich Text editor. These can also be styled as needed - applying alignment, color, size and 2 column as configurable options.

Many components contain actions - normally expressed as Buttons. These can also be styled as needed - applying color and variant (outline or filled) as configurable options.