Railtown Design System
Typography
Heading 1
Heading 2
Heading 1 mobile
Heading 2 mobile
Heading 3
Heading / h4
Heading / h5
Title
Field label
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?
2021
2020
2019
2018
2017
Add anoter class besides model content
to adjust padding and width