Containers
Fluid (container-f = Container Full Width) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
1440 (container-1440 = Container Set Width) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
1024 (container-1024 = Container Set Width) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
768 (container-768 = Container Set Width) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
414 (container-414 = Container Set Width) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa.
Section
Dark (section-dark) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consect.
Light (section-light) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consect.
Grey (section-grey) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consect.
Color (section-color) - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consect.
Grid
Spacing
Margin Top
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: 20px; }
.mt-2 { margin-top: 40px; }
.mt-3 { margin-top: 100px; }
Margin Bottom
.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: 20px; }
.mb-2 { margin-bottom: 40px; }
.mb-3 { margin-bottom: 100px; }
Margin Left
.ml-0 { margin-left: 0; }
.ml-1 { margin-left: 20px; }
.ml-2 { margin-left: 40px; }
.ml-3 { margin-left: 100px; }
Margin Right
.mr-0 { margin-right: 0; }
.mr-1 { margin-right: 20px; }
.mr-2 { margin-right: 40px; }
.mr-3 { margin-right: 100px; }
Padding Top
.pt-0 { padding-top: 0; }
.pt-1 { padding-top: 20px; }
.pt-2 { padding-top: 40px; }
.pt-3 { padding-top: 100px; }
Padding Bottom
.pt-0 { padding-bottom: 0; }
.pt-1 { padding-bottom: 20px; }
.pt-2 { padding-bottom: 40px; }
.pt-3 { padding-bottom: 100px; }
Padding Left
.pt-0 { padding-left: 0; }
.pt-1 { padding-left: 20px; }
.pt-2 { padding-left: 40px; }
.pt-3 { padding-left: 100px; }
Padding Right
.pt-0 { padding-right: 0; }
.pt-1 { padding-right: 20px; }
.pt-2 { padding-right: 40px; }
.pt-3 { padding-right: 100px; }
Cards
Card (card-dark) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Card (card-light) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Card (card-grey) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Card (card-color) Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Custom
Image Fluid (Full Width) - with ability to size width display by container
Image Fluid + Set Height (Full Width) - with ability to size width display by container
Image Fluid + Set Height + Card + Center (Full Width) - with ability to size width display by container or display cards by column
Image Fluid + Set Height + Card Text + Card Image (Full Width)
Section Dark Background + Set Height + Card Image + Center (Full Width) - ability to control the display location of the image.
Ability to control the display location of the image floating above a color background or an image background.
Section Background Color + Image + Center
Shadow Example
Hover Example
Lightbox Example
👆 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Version • Copyright © Lorem ipsum