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
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
Dropdown
How to invite team members?
How to invite team members?
Manage team members and permissions?
OVERVIEW
2021
2020
2019
2018
2017
