Containers

Components

There are many types of component layouts which give various flexibilities.

Default Section

This section is a default for containing all other components inside, you can add grid components to this block as well as any other components. There are various options for defining the use of this section

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.

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.

Container

There are several container types which are unique classes for various purposes.

container

container-respond

container-flex

image container

meta-container

social-container

Category 1

Caption

First Selling Point

The rich text element allows you to create and format headings, paragraphs, blockquotes, images, and video all in one place instead of having to add and format them individually. Just double-click and easily create content.

Learn More



Category 1

Caption

First Selling Point

Learn More



Combo Classes

The following elements use this combo class structure.

Type

Class Combo

Classes

padding

color

flex

Class

Usage

utilities

dependancy

container

default contain anything

expand, shrink, padding, color, flex

container-respond

respond to the parent container

padding, color, flex

container-flex (child)

container-flex

flex right if inside container respond

padding, color, flex

container-respond (parent)

meta-container

containing any meta information

expand, shrink, padding, color, flex

image-container

containing any image

expand, shrink, padding, color, flex

modal-container

containing and container for a modal (default set to hidden)

expand, shrink, padding, color, flex

social-container

containing social media icons/links

expand, shrink, padding, color, flex