Styles

Typography

[Font Family]

Headings + Body

Type: [last fallback (Sans Serif)]
Headings Weights: [font weight (Medium (500))]
Body Weights: [font weight (Normal (400))]
H1 Headings

Element

[typography-info]
H2 Headings

Element

[typography-info]
H3 Headings

Element

[typography-info]
H4 Headings

Element

[typography-info]
H5 Headings
Element
[typography-info]
H6 Headings
Element
[typography-info]
h1
Class
[typography-info]
h2
Class
[typography-info]
h3
Class
[typography-info]
h4
Class
[typography-info]
h5
Class
[typography-info]
h6
Class
[typography-info]
h1
Humanity is moving ever deeper into crisis
[typography-info]
h2
All technical evolution has a fundamental behavior pattern
[typography-info]
h3
The speed of sound is approximately 700 miles per hour.
[typography-info]
h4
The speed of electromagnetic radiation is 700 million miles per hour.
[typography-info]
h5
Sound can travel only in conducting mediums — for instance, in the Earth's atmosphere.
[typography-info]
h6
Electromagnetic radiation can travel on indefinitely through Universe.
[typography-info]
paragraph-xl

The amount of information humans can acquire visually is a millionfold greater in range, speed, and meaning than is the information they acquire aurally.

[typography-info]
paragraph-lg

By and large the function of life on the planet is designed to be syntropic — to impound the radiation, conserve it, and use it to produce further syntropic functioning in overall support of the syntropic integrity of eternally regenerative Universe. The tendencies of many human beings — wanting to cultivate the soil, to care for the animals, the drive of artists to create, of artisans to build, of inventors to invent and develop time- and troublesavers for others — are all manifests of the designed-in syntropic propensities of humans. The generous, compassionate propensity of humans is primarily syntropic. The selfish are "entropic." In order to keep Universe regenerative nature has placed human beings on this planet for their syntropic functioning.

[typography-info]
Body
Paragraphs

We may safely assume that class-one evolution is syntropic and that class two is often entropically diseased. The drive to make money is inherently entropic, for it seeks to monopolize order while leaving un-cope-with-able disorder to overwhelm others. We must remember that the majority of those convincedly committed to "making money" are motivated to do so primarily because of their mistaken conviction that there is a fundamental (external) inadequacy of human life support on our planet. That has been true until yesterday. They were right until the syntropic, class-one evolutionary accelerating ephemeralization reached a point of doing so much more work with so much less effort, because of the reduction in weights per strength ratios, that we came ten years ago to the point where we could, by proven design, take care of everyone at standards higher than any have ever known.

[typography-info]
paragraph-sm

In the vast majority of humans there is an innate inclination, propensity — even drive — to make sense and to produce order in consonance with universal order. The assumption by many humans that there is only entropic disorder seemingly present in Universe is brought about by looking only at the phases of energy separating out from any one system and by not looking at the same disengaging energies always joining syntropically in the production of other systems.

[typography-info]
eyebrow
Lorem Ipsum
[typography-info]
All Ordered Lists
  1. Example Ordered List
  2. Example Ordered List
[typography-info]
All Unordered Lists
  • Example Unordered List
  • Example Unordered List
[typography-info]
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
<div>example code block here</div>

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


Color

Primary

[Color Name]

[#hex-code]
[class-name]

Secondary

[Color Name]

[#hex-code]
[class-name]

[Color Name]

[#hex-code]
[class-name]

Neutral

[Color Name]

[#hex-code]
[class-name]

[Color Name]

[#hex-code]
[class-name]

[Color Name]

[#hex-code]
[class-name]

[Color Name]

[#hex-code]
[class-name]

[Color Name]

[#hex-code]
[class-name]

[Color Name]

[#hex-code]
[class-name]
Aa

[Color Name]

[#hex-code]
[class-name]
Aa

[Color Name]

[#hex-code]
[class-name]
Aa

[Color Name]

[#hex-code]
[class-name]
[css style]
u-opacity-0
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]
[css style]
[class-name]

Mode

Aa

Dark

[class-name]
Aa

Light

[class-name]

Utilities

Top

u-mt-0
[css style]
u-mt-xs
[css style]
u-mt-sm
[css style]
u-mt-md
[css style]
u-mt-lg
[css style]

Bottom

u-mb-0
[css style]
u-mb-xs
[css style]
u-mb-sm
[css style]
u-mb-md
[css style]
u-mb-lg
[css style]

Other

u-m-0
[css style]
u-mlr-auto
[css style]
(centers element))
u-mt-auto
[css style]
u-mb-auto
[css style]

Top

u-pt-0
[css style]

Bottom

u-pb-0
[css style]

Other

u-p-0
[css style]

Alignment

u-text-center
text-align: center;
u-text-right
text-align: right;
u-text-left
text-align: left;

Clamping

u-text-clamp-1
Multiple properties

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-text-clamp-2
Multiple properties

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-text-clamp-3
Multiple properties

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.

Wrapping

u-text-balance
text-wrap: balance;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

u-text-pretty
text-wrap: pretty;

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros.

u-overflow-hidden
overflow: hidden;
u-overflow-visible
overflow: visible;
u-d-none
display: none;
u-d-block
display: block;
u-d-flex
display: flex;
u-d-inline-flex
display: inline-flex;
u-position-relative
position: relative;
u-position-sticky
position: sticky;

Responsive modifiers

u-md-d-none
display: none; (Tablet down)
u-sm-d-none
display: none; (Mobile (L) down)
u-xs-d-none
display: none; (Mobile only)
u-md-d-block
display: block; (Tablet down)
u-sm-d-block
display: block; (Mobile (L) down)
u-xs-d-block
display: block; (Mobile only)
u-w-100
width: 100%;
u-h-100
height: 100%;
u-minh-100vh
min-height: 100vh;
u-aspect-3x1
Multiple properties
u-aspect-2x1
Multiple properties
u-aspect-16x9
Multiple properties
u-aspect-Φx1
Multiple properties
u-aspect-3x2
Multiple properties
u-aspect-4x3
Multiple properties
u-aspect-1x1
Multiple properties
u-aspect-2x3
Multiple properties
u-aspect-1xΦ
Multiple properties
u-img-cover
Multiple properties
u-link-cover
Multiple properties
u-z-index-1
Multiple properties
u-sr-only
Multiple properties
Screen Reader Only
u-divider
Multiple properties
u-full-height-center
Multiple properties

Layout

section
container
col
col
col
col
col
col
col
col
col
col
col
col-lg-1
col
col-lg-11
col
col-lg-2
col
col-lg-10
col
col-lg-3
col
col-lg-9
col
col-lg-4
col
col-lg-8
col
col-lg-5
col
col-lg-7
col
col-lg-6
col
col-lg-6
col
col-lg-12
col
col-md-1
col
col-md-11
col
col-md-2
col
col-md-10
col
col-md-3
col
col-md-9
col
col-md-4
col
col-md-8
col
col-md-5
col
col-md-7
col
col-md-6
col
col-md-6
col
col-md-12
col
col-sm-1
col
col-sm-11
col
col-sm-2
col
col-sm-10
col
col-sm-3
col
col-sm-9
col
col-sm-4
col
col-sm-8
col
col-sm-5
col
col-sm-7
col
col-sm-6
col
col-sm-6
col
col-sm-12
col
col-xs-1
col
col-xs-11
col
col-xs-2
col
col-xs-10
col
col-xs-3
col
col-xs-9
col
col-xs-4
col
col-xs-8
col
col-xs-5
col
col-xs-7
col
col-xs-6
col
col-xs-6
col
col-xs-12
row
row-align-center
col
col
col
row
row-align-end
col
col
col
row
row-justify-end
col
col
row
row-justify-center
col
col
row
row-justify-around
col
col
row
row-justify-between
col
col
col
col-lg-offset-1
col
col-lg-offset-2
col
col-lg-offset-3
col
col-lg-offset-4
col
col-lg-offset-5
col
col-lg-offset-6
col
col-md-offset-0
col
col-md-offset-1
col
col-md-offset-2
col
col-md-offset-3
col
col-md-offset-4
col
col-md-offset-5
col
col-md-offset-6
col
col-sm-offset-0
col
col-sm-offset-1
col
col-sm-offset-2
col
col-sm-offset-3
col
col-sm-offset-4
col
col-sm-offset-5
col
col-sm-offset-6
col
col-xs-offset-0
col
col-xs-offset-1
col
col-xs-offset-2
col
col-xs-offset-3
col
col-xs-offset-4
col
col-xs-offset-5
col
col-xs-offset-6
col
col-lg-first
col
col-md-first
col
col-sm-first
col
col-xs-first
col
col-lg-last
col
col-md-last
col
col-sm-last
col
col-xs-last

Medium gap (set from Grid / Gap MD variable)

row
row-gap-md
col
col
col
col
col
col

Small gap (set from Grid / Gap SM variable)

row
row-gap-sm
col
col
col
col
col
col

Button gap (set from Grid / Gap Button variable)

row
row-gap-button
Button
Button

No gap

row
row-gap-0
col
col
col
col
col
col

Shrink column

col
col-shrink
col

Contained column

col
col-lg-contain-left
col
col
col
col-lg-contain-right