Components

Railtown Design System

Typography

Heading 1

Heading 2

Heading 1 mobile

Heading 2 mobile

Heading 3

Heading / h4

Heading / h5

Title

Field label

caption

Paragraph

super-small

text-align: left

text-align: center

text-align: center-desktop only

text-align: right

font-bold

font-semibold

no-wrap

text-black

text-capitalize first word

Background

Royal Blue

#3a6ddf

Royal Blue

#3e6ee7

Goldenrod

#3a6ddf

mediumturquoise

#3a6ddf

lightsteelblue

#3a6ddf

black

#181818

dark-grey

#f4f4f4

light-grey

#f9f9f9

white

#ffffff

Border

border-black

border-grey

border-white

border-blue

border-orange

border-green

border-purple

border-bottom-black

border-bottom-grey

border-bottom-white

border-bottom-blue

border-bottom-orange

border-thick-black

border-thick-orange

border-thick-green

border-thick-purple

border-rad-8-black

border-rad-8

comparison-border-left‍

Opacity

Opacity-50%

Opacity-50%

Opacity-60%

Opacity-80%

Media

desktop-only

mobile-only

Sizing

Width

width-25%

width-35%

width-50%

width-75%

width-90%

width-100%

max-width: 1440px

Height

height: 25vh

height: 50vh

height: 100%

Margin

This is a dummy text lorem ipsum

margin-bottom: 0.5rem

This is a dummy text lorem ipsum

margin-bottom: 1rem

This is a dummy text lorem ipsum

margin-bottom: 1rem-desktop-only

This is a dummy text lorem ipsum

margin-bottom: 2rem

This is a dummy text lorem ipsum

margin-bottom: 3rem

This is a dummy text lorem ipsum

margin-bottom: 4rem

This is a dummy text lorem ipsum

margin-bottom: 5rem

This is a dummy text lorem ipsum

margin-left: 1%

This is a dummy text lorem ipsum

margin-left: 2%

This is a dummy text lorem ipsum

margin-left:3%

This is a dummy text lorem ipsum

margin-left: 4%

This is a dummy text lorem ipsum

margin-left: 5%

This is a dummy text lorem ipsum

margin-right: 5%

This is a dummy text lorem ipsum

margin-x: auto

This is a dummy text lorem ipsum

margin-y: auto

Padding

This is a dummy text lorem ipsum

padding-top: 0.5rem

This is a dummy text lorem ipsum

padding-top: 1rem

This is a dummy text lorem ipsum

padding-top: 2rem

This is a dummy text lorem ipsum

padding-nav
@desktop:6.25rem;
@mobile: 4rem;

This is a dummy text lorem ipsum

padding-bottom: 0.5rem

This is a dummy text lorem ipsum

padding-bottom: 1rem

This is a dummy text lorem ipsum

padding-bottom: 3rem

This is a dummy text lorem ipsum

padding-y: 1rem

This is a dummy text lorem ipsum

padding-y: 2rem

This is a dummy text lorem ipsum

padding-y: 3rem

This is a dummy text lorem ipsum

padding-container-x: 7.5%

This is a dummy text lorem ipsum

padding-container-l: 7.5%

This is a dummy text lorem ipsum

padding-container-r: 7.5%

This is a dummy text lorem ipsum

padding-left: 2%

This is a dummy text lorem ipsum

padding-left: 3%

This is a dummy text lorem ipsum

padding-left: 5%

This is a dummy text lorem ipsum

padding-right: 5%

This is a dummy text lorem ipsum

padding-x: 1rem

This is a dummy text lorem ipsum

padding: 1rem 5% 1rem 5%

This is a dummy text lorem ipsum

padding: 2rem 8% 2rem 8%

Dots

Cards

Box-shadow-card

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

box-shadow-left-black

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

box-shadow-left-blue

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

box-shadow-left-green

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

box-shadow-left-purple

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

box-shadow-left-orange

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

box-shadow-right-black

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

box-shadow-right-blue

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

box-shadow-right-orange

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

box-shadow-right-purple

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

box-shadow-right-green

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

box-shadow-right-grey

Border-card

Inside there is card border-black varius enim in eros elementum tristique.

card with black border

Inside there is card border-black and card-border-white. varius enim in eros elementum tristique.

card with white border

Inside there is card border-black varius enim in eros elementum tristique.

Image-fit

Image-cover

Image-contain