Demo page for elements and styles.
.inline { display: inline }
.block { display: block }
.inline-block { display: inline-block }
.overflow-hidden { overflow: hidden }
.clearfix:before,
.clearfix:after {
content: " ";
display: table
}
.clearfix:after { clear: both }
.left { float: left }
.right { float: right }
.fit { max-width: 100% }
.half-width { width: 50% }
.full-width { width: 100% }
.m0 { margin: 0 }
.mt0 { margin-top: 0 }
.mr0 { margin-right: 0 }
.mb0 { margin-bottom: 0 }
.ml0 { margin-left: 0 }
.m1 { margin: var(--space-1) }
.mt1 { margin-top: var(--space-1) }
.mr1 { margin-right: var(--space-1) }
.mb1 { margin-bottom: var(--space-1) }
.ml1 { margin-left: var(--space-1) }
.m2 { margin: var(--space-2) }
.mt2 { margin-top: var(--space-2) }
.mr2 { margin-right: var(--space-2) }
.mb2 { margin-bottom: var(--space-2) }
.ml2 { margin-left: var(--space-2) }
.m3 { margin: var(--space-3) }
.mt3 { margin-top: var(--space-3) }
.mr3 { margin-right: var(--space-3) }
.mb3 { margin-bottom: var(--space-3) }
.ml3 { margin-left: var(--space-3) }
.m4 { margin: var(--space-4) }
.mt4 { margin-top: var(--space-4) }
.mr4 { margin-right: var(--space-4) }
.mb4 { margin-bottom: var(--space-4) }
.ml4 { margin-left: var(--space-4) }
.mxn1 { margin-left: -var(--space-1); margin-right: -var(--space-1); }
.mxn2 { margin-left: -var(--space-2); margin-right: -var(--space-2); }
.mxn3 { margin-left: -var(--space-3); margin-right: -var(--space-3); }
.mxn4 { margin-left: -var(--space-4); margin-right: -var(--space-4); }
.mx-auto { margin-left: auto; margin-right: auto; }
.p1 { padding: var(--space-1) }
.py1 { padding-top: var(--space-1); padding-bottom: var(--space-1) }
.px1 { padding-left: var(--space-1); padding-right: var(--space-1) }
.p2 { padding: var(--space-2) }
.py2 { padding-top: var(--space-2); padding-bottom: var(--space-2) }
.px2 { padding-left: var(--space-2); padding-right: var(--space-2) }
.p3 { padding: var(--space-3) }
.py3 { padding-top: var(--space-3); padding-bottom: var(--space-3) }
.px3 { padding-left: var(--space-3); padding-right: var(--space-3) }
.p4 { padding: var(--space-4) }
.py4 { padding-top: var(--space-4); padding-bottom: var(--space-4) }
.px4 { padding-left: var(--space-4); padding-right: var(--space-4) }
--breakpoint-sm
and up.--breakpoint-sm
and up..sm-show, .md-show, .lg-show {
display: none !important
}
@media (--breakpoint-sm) {
.sm-show { display: block !important }
}
@media (--breakpoint-md) {
.md-show { display: block !important }
}
@media (--breakpoint-lg) {
.lg-show { display: block !important }
}
.hide { display: none !important }
@media (--breakpoint-sm) {
.sm-hide { display: none !important }
}
@media (--breakpoint-md) {
.md-hide { display: none !important }
}
@media (--breakpoint-lg) {
.lg-hide { display: none !important }
}
For vertically centered content
Artist | Album | Release Date |
---|---|---|
Huey Lewis and the News | Sports | 1983 |
Phil Collins | No Jacket Required | 1985 |
Peter Gabriel | So | 1986 |
Pastrami 1
Pastrami 2
Pastrami 3
Pastrami 4
Pastrami 5
Pastrami 6
Bold
Regular
Italic
Caps
Left align
Center
Right align
Justify Bacon ipsum dolor sit amet chuck prosciutto landjaeger ham hock filet mignon shoulder hamburger pig venison.