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.

data-theme="inherit"

Heading

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

data-theme="light"

Heading

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

data-theme="dark"

Heading

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

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.

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.

Episodes

One-Hour Version

Series Details

Overview:
Joan of Arc, also known as Jeanne d'Arc, was a young French peasant girl who became a national heroine and Roman Catholic saint. Born around 1412, she claimed to have received visions from God instructing her to support Charles VII and liberate France from English domination during the Hundred Years' War. Despite her lack of military training, Joan led French troops to several important victories, including the lifting of the siege of Orléans in 1429. Her unwavering faith and military successes helped to unite the French and turn the tide of the war.

However, Joan's remarkable journey was cut short when she was captured by the Burgundians, sold to the English, and put on trial for heresy. Despite her courageous defense, she was convicted and burned at the stake in 1431 at the age of 19. Twenty-five years later, her conviction was posthumously overturned, and in 1920, she was canonized as a saint by the Roman Catholic Church.

Patron Saint of:
France, soldiers, prisoners, people ridiculed for their piety, rape victims, and women in military service.

Feast Day:
May 30

Country of Origin:
France

Time Period:
15th century (1412-1431)

Interesting Facts:

  1. Joan was illiterate and dictated her letters, though she may have later learned to sign her name.
  2. She referred to herself as "Jeanne la Pucelle" ("Joan the Maiden"), emphasizing her virginity.
  3. Joan cropped her hair short and wore men's clothing, including white armor, during her military campaigns.
  4. She was only 17 years old when she led the French army to victory at Orléans.
  5. Joan's trial lasted for over a year, during which she was interrogated nearly a dozen times but maintained her innocence and humility throughout.
  6. Legend has it that her heart survived unaffected after she was burned at the stake.
  7. Joan of Arc was officially cleared of all charges 20 years after her death and became a symbol of French national pride.

Cast and Crew

Crew

Director: Lee Parent

Writer: Kevin Wessa

Sound Engineer: Peter Atkinson


Cast

Joan of Arc: Joan of Arc

Educational Guide

Saint Joan of Arc, the patron saint of France, is one of Christianity's most widely known figures. Teach your child all about Saint Joan of Arc through our educational guide.

Activities, discussion questions, coloring pages, and more! Look for a free downloadable education packet with every new series.