Typography

Font Styles

u-display-large

Display - Large

u-display-medium

Display - Medium

u-display-small

Display - Small

u-headline-large

Headline - Large

u-headline-medium

Headline - Medium

u-headline-small

Headline - Small

u-title-large

Title - Large

u-title-medium

Title - Medium

u-title-small

Title - Small

u-body-large

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-body-medium

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-body-small

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare

u-label-large

I am a label

u-label-medium

I am a label

u-label-small

I am a label

Font Weight

u-weight-100

Lorem ipsum dolor

u-weight-200

Lorem ipsum dolor

u-weight-300

Lorem ipsum dolor

u-weight-400

Lorem ipsum dolor

u-weight-500

Lorem ipsum dolor

u-weight-600

Lorem ipsum dolor

u-weight-700

Lorem ipsum dolor

u-weight-800

Lorem ipsum dolor

u-weight-900

Lorem ipsum dolor

Line Clamp

u-line-clamp-1

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-line-clamp-2

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-line-clamp-3

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-line-clamp-4

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.

Typography Elements

u-rich-text

Lorem ipsum

Lorem ipsum dolor sit amet, consectetur

All Ordered List
  1. This is some text
  2. This is some text
  3. This is some text
All Unordered List
  • This is some text
  • This is some text
  • This is some text
All Block Quotes
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do

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

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

Color

Themes

data-theme="invert"

Heading

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

Button Text
Button Text
data-theme="inherit"

Heading

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

Button Text
Button Text
data-theme="light"

Heading

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

Button Text
Button Text
data-theme="dark"

Heading

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

Button Text
Button Text

Text Color

u-color-inherit

Lorem ipsum dolor

u-color-faded

Lorem ipsum dolor

Flexbox

Horizontal Flex Utilities

u-hflex-left-top
u-hflex-left-center
u-hflex-left-bottom
u-hflex-left-stretch
u-hflex-center-top
u-hflex-center-center
u-hflex-center-bottom
u-hflex-center-stretch
u-hflex-right-top
u-hflex-right-center
u-hflex-right-bottom
u-hflex-right-stretch
u-hflex-between-top
u-hflex-between-center
u-hflex-between-bottom
u-hflex-between-stretch

Vertical Flex Utilities

u-vflex-left-top
u-vflex-left-center
u-vflex-left-bottom
u-vflex-left-between
u-vflex-center-top
u-vflex-center-center
u-vflex-center-bottom
u-vflex-center-between
u-vflex-right-top
u-vflex-right-center
u-vflex-right-bottom
u-vflex-right-between
u-vflex-stretch-top
u-vflex-stretch-center
u-vflex-stretch-bottom
u-vflex-stretch-between

Other Flex Utilities

u-hflex-wrap
u-vflex-wrap
u-flex-shrink
u-flex-grow
u-flex-noshrink

Grid

Grid Utilities

u-grid-custom
u-grid-desktop
u-grid-tablet
u-grid-landscape
u-grid-column-2
u-grid-column-3
u-grid-column-4
u-grid-autofit
u-grid-subgrid

Column Utilities

u-column-custom
u-column-full
u-column-indent
u-column-1
u-column-2
u-column-3
u-column-4
u-column-5
u-column-6
u-column-7
u-column-8
u-column-9
u-column-10
u-column-11
u-column-12

Order Utilities

u-order-first
u-order-first-desktop
u-order-first-tablet
u-order-last
u-order-last-desktop
u-order-last-tablet

Spacing

Gap Utilities

u-gap-none
u-gap-main
u-gap-xsmall
u-gap-small
u-gap-medium
u-gap-large
u-gap-xlarge

Section Spacing Attributes

data-padding-top="none"
data-padding-bottom="none"
data-padding-top="small"
data-padding-bottom="small"
data-padding-top="main"
data-padding-bottom="main"
data-padding-top="large"
data-padding-bottom="large"

Miscellaneous

Other Utilities

u-height-screen
u-text-display
u-max-width-none
u-text-display
u-visual-wrap
u-text-display
u-display-none
u-text-display
u-cover
u-text-display
u-cover-absolute
u-text-display

Components

Prevent Style Cleanup

Buttons

data-button-style="primary"
u-text-display
Button Text
data-button-style="secondary"
u-text-display
Button Text

Icons

Global

Eyebrow Text Here

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.

Eyebrow Text Here

Lorem ipsum dolor sit

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

Button Text
Button Text

Form

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
No items found.
Series
/
John Vianney
Trailer

John Vianney

Episodes
About
Education
More
Episodes
About
Education
More

Episodes

One-Hour Version

Series Details

Cast and Crew

Educational Guide

Behind the Scenes

View All

The Saints 2024: Production Photos

Katharine Drexel: Riches to Rags

Kris McLaughlin: Writing Katharine Drexel

Homeschoolers in the Studio!

Serving The Master: Saint Francis of Assisi

What Makes a Saint? Saints Researcher Lisa Lickona

Maximilian Kolbe: Knight of the Immaculate

Juan Diego: Live on Stage!

A Look inside the Software: TMB and Pibox

Peter Atkinson at the Arizona Catholic Homeschool Conference

Production Photo Blog - August 9th

At the National Eucharistic Congress with The Merry Beggars

No items found.
Explore
Shows
Blog
Company
Our Story
Our Team
Rating System
Careers
Auditions
Contact
FAQ
Socials
Facebook
Twitter
Instagram
LinkedIn
YouTube
© 2023 The Merry Beggars is the entertainment division of Relevant Radio, Inc. All Rights Reserved.
Privacy Policy
Terms & Conditions