On the Night Train full logo
Play the Trailer
On the Night Train full logo
Play the Trailer

Heading Huge

Heading XLarge

Heading Large

Heading Medium

Heading Small
Heading XSmall
Heading Tiny

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Sample text is being used as a placeholder for real text that is normally present. Sample text helps you understand how real text may look on your website. Sample text is being used as a placeholder for real text.

Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Sample text is being used as a placeholder for real text that is normally present.
Low
Medium Low
Medium
Medium High
High

Basic classes

  • This page holds the basic elements that are global to your project.
  • Add as many basic elements as your project needs on this page. Remember that basic classes are named with only 3 letters.

Buttons

Btn
Button Text
Btn x Outline
Button Text
Btn x Secondary
Button Text
Btn x Secondary xx Outline
Button Text

Blockquote

<blockquote>
Block Quote

Code

Used in Forward Slash pages to show class names.

Cod
Class Name

Box

This is used in the Forward Slash pages to visualize classes with dimensional values

Box

Link

<a>

In Forward Slash inline links are styled on the tag level. This way we create a global link style that then can be overriden when needed.

Lnk
Text Link

Lists

<ol>
<li>
  1. This is a list item
  2. This is a list item
    1. This is a nested list item
    2. This is a nested list item
    3. This is a nested list item
<ul>
<li>
  • This is a list item
  • This is a list item
    • This is a nested list item
    • This is a nested list item
    • This is a nested list item

Form

<label>
Txt
Txa
Chb
Rdo
Btn
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Rich Text

Rte

What’s a Rich Text element?

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.

Static and dynamic content editing

A rich text element can be used with static or dynamic content. For static content, just drop it into any page and begin editing. For dynamic content, add a rich text field to any collection and then connect a rich text element to that field in the settings panel. Voila!

How to customize formatting for each rich text

Headings, paragraphs, blockquotes, figures, images, and figure captions can all be styled after a class is added to the rich text element using the "When inside of" nested selector system.

Component classes

  • This page only holds an example component as Forward Slash does not include component classes per default.
  • Add every component for your project on this page.

Card

Illustration 3 persons around a table having a meeting

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.

Button Text

Your component here

Your component here

Structural Classes

Grid

[Grid]

Container

[Container]
[Container] Inner x Large
[Container] Inner x Medium
[Container] Inner x Small
[Container] Inner x Left
[Container] Inner x Right

Section

[Section] H Wrapper
[Section] V Wrapper
[Section] V Wrapper x Reduced
[Section] V Wrapper x Small

Functional classes

Vertical

Vertical / 2XS
Vertical / XS
Vertical / S
Vertical / M
Vertical / L
Vertical / XL
Vertical / 2XL
Vertical / 3XL
Vertical / 4XL
Vertical / 5XL
Vertical / 6XL
Vertical / 7XL

Horizontal spacing

Horizontal / 2XS
Horizontal / XS
Horizontal / S
Horizontal / M
Horizontal / L
Horizontal / XL
Horizontal / 2XL
Horizontal / 3XL
Horizontal / 4XL
Horizontal / 5XL
Horizontal / 6XL
Horizontal / 7XL

Flex Horizontal - Justify & Align

x Horizontal Justify / Center
x Horizontal Justify / Start
x Horizontal Justify / End
x Horizontal Align / Start
x Horizontal Align / Center
x Horizontal Align / End

Padding

Padding / 2XS
Padding / XS
Padding / S
Padding / M
Padding / L
Padding / XL
Padding / 2XL
Padding / 3XL
Padding / 4XL
Padding / 5XL

Width

Padding / 2XS
Padding / XS
Padding / S
Padding / M
Padding / L
Padding / XL
Padding / 2XL
Padding / 3XL
Padding / 4XL
Padding / 5XL

Heading

<H1>

H1 Tag

Heading / 2XL

Heading / 2XL

<H2>

H2 Tag

Heading / XL

Heading / XL

<H3>

H3 Tag

Heading / L

Heading / L

<H4>

H4 Tag

Heading / M

Heading / M

<H5>
H5 Tag
Heading / S
Heading / S
<H6>
H6 Tag
Heading / XS
Heading / XS
Footnote
Footnote
Heading / 2XS
Heading / 2XS

Font Size

Font Size / S

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.

Font Size / M

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.

Font Size / L

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.

Font Size / XL

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.

Font Weight

Font Weight / 100

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.

Font Weight / 200

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.

Font Weight / 300

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.

Font Weight / 400

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.

Font Weight / 500

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.

Font Weight / 600

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.

Font Weight / 700

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.

Font Weight / 800

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.

Font Weight / 900

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.

Text Align

Align Text / Left

This text aligns to the left in desktop breakpoint and smaller ones.

Align Text / Left Tab

This text aligns to the left in tablet and smaller breakpoints.

Align Text / Left Mob

This text aligns to the left in in mobile, landscape and portrait.

Align Text / Center

This text aligns to the center in desktop breakpoint and smaller ones.

Align Text / Center Tab

This text aligns to the center in tablet and smaller breakpoints.

Align Text / Center Mob

This text aligns to the center in in mobile, landscape and portrait.

Align Text / Right

This text aligns to the right in desktop breakpoint and smaller ones.

Align Text / Right Tab

This text aligns to the right in tablet and smaller breakpoints.

Align Text / Right Mob

This text aligns to the right in in mobile, landscape and portrait.

Line Height

Line Height / XS

This text has a line-height of 1 (unitless) in desktop breakpoint and smaller ones.

Line Height / XS Tab

This text has a line-height of 1 (unitless) in tablet and smaller breakpoints.

Line Height / XS Mob

This text has a line-height of 1 (unitless) in mobile, landscape and portrait.

Line Height / S

This text has a line-height of 1.25 (unitless) in desktop breakpoint and smaller ones.

Line Height / S Tab

This text has a line-height of 1.25 (unitless) in tablet and smaller breakpoints.

Line Height / S Mob

This text has a line-height of 1.25 (unitless) in mobile, landscape and portrait.

Line Height / M

This text has a line-height of 1.5 (unitless) in desktop breakpoint and smaller ones.

Line Height / M Tab

This text has a line-height of 1.5 (unitless) in tablet and smaller breakpoints.

Line Height / M Mob

This text has a line-height of 1.5 (unitless) in mobile, landscape and portrait.

Line Height / L

This text has a line-height of 1.75 (unitless) in desktop breakpoint and smaller ones.

Line Height / L Tab

This text has a line-height of 1.75 (unitless) in tablet and smaller breakpoints.

Line Height / L Mob

This text has a line-height of 1.75 (unitless) in mobile, landscape and portrait.

Line Height / XL

This text has a line-height of 2 (unitless) in desktop breakpoint and smaller ones.

Line Height / XL Tab

This text has a line-height of 2 (unitless) in tablet and smaller breakpoints.

Line Height / XL Mob

This text has a line-height of 2 (unitless) in mobile, landscape and portrait.

Line Height / 0

Line Height 0

Font Style

Font Style / Upper

Uppercase

Font Style / Under

Underline

Font Style / Strike

Strikethrough

Font Style / None

Uppercase

Bg

Bg / Primary
Bg / Primary Lightest
Bg / Primary Lighter
Bg / Primary Light
Bg / Primary Dark
Bg / Primary Darker
Bg / Primary Darkest
Bg / Secondary
Bg / Secondary Lightest
Bg / Secondary Lighter
Bg / Secondary Light
Bg / Secondary Dark
Bg / Secondary Darker
Bg / Secondary Darkest
Bg / Tertiary
Bg / Tertiary Lightest
Bg / Tertiary Lighter
Bg / Tertiary Light
Bg / Tertiary Dark
Bg / Tertiary Darker
Bg / Tertiary Darkest
Bg / Gray
Bg / Gray Lightest
Bg / Gray Lighter
Bg / Gray Light
Bg / Gray Dark
Bg / Gray Darker
Bg / Gray Darkest
Bg / Bright
Bg / Bright Lightest
Bg / Bright Lighter
Bg / Bright Light
Bg / Bright Dark
Bg / Bright Darker
Bg / Bright Darkest
Bg / Box
Bg / White

Color

Color / Primary

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.

Color / Secondary

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.

Color / Tertiary

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.

Color / Neutral

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.

Color / Bright

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.

Color / White

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.

Images

Image / Cover
Ratio / Square (1x1)
Ratio / Square Tab
Ratio / Square Mob
Ratio / Panorama (21x9)
Ratio / Panorama Tab
Ratio / Panorama Mob
Ratio / Landscape (16x9)
Ratio / Landscape Tab
Ratio / Landscape Mob
Ratio / Standard (4x3)
Ratio / Standard Tab
Ratio / Standard Mob
Ratio / Tall (???)
Ratio / Tall Tab
Ratio / Tall Mob
Ratio / Skyscraper (???)
Ratio / Skyscraper Tab
Ratio / Skyscraper Mob

This div has its display set to inline-block on tablet and smaller breakpoints.

Position

Position / Static

This div has its position set to static on desktop breakpoint and smaller ones.

Position / Static Tab

This div has its position set to static on tablet and smaller breakpoints.

Position / Static Mob

This div has its position set to static on mobile, landscape and portrait.

Position / Relative

This div has its position set to relative on desktop breakpoint and smaller ones.

Position / Relative Tab

This div has its position set to relative on tablet and smaller breakpoints.

Position / Relative Mob

This div has its position set to relative on mobile, landscape and portrait.

Display

Display / Block

This div has its display set to block on desktop breakpoint and smaller ones.

Display / Block Tab

This div has its display set to block on tablet and smaller breakpoints.

Display / Block Mob

This div has its display set to block on mobile, landscape and portrait.

Display / InBlock

This div has its display set to inline-block on desktop breakpoint and smaller ones.

Display / InBlock Tab
Display / InBlock Mob

This div has its display set to inline-block on mobile, landscape and portrait.

Display / Inline

This div has its display set to inline on desktop breakpoint and smaller ones.

Display / Inline Tab

This div has its display set to inline on tablet and smaller breakpoints.

Display / Inline Mob

This div has its display set to inline on mobile, landscape and portrait.

Display / None
Display / None Tab

This div has its display set to none on tablet and smaller breakpoints.

Display / None Mob

This div has its display set to none on mobile, landscape and portrait.

Shadows

Shadow / Low
Shadow / Medium
Shadow / High