Layout patterns for Scalia Law School website based on a flexible grid system. Below examples only demonstrate a few patterns. You can create much more combinations using this grid system.
- One-Column, Full-Width Banner
- Two-Column Text
- Two-Column Layout with Equal Image & Text
- Three-Column Buttons
- Three-Column with Two-Column Image & One-Column Text
- Three-Column with One-Column Image & Two-Column Text
- Three-Column Layout with Image & Text
- Four-Column Buttons
- Four-Column Layout with Image & Text
- Four-Column Layout with One-Column Text & Three-Column Image
- Five-Column Boxes
- Five-Column Layout with Image & Text
One-Column, Full-Width Banner
Two-Column Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt. Mauris consequat tellus nec elit lobortis, vitae sodales libero pretium. Vivamus hendrerit faucibus purus, sollicitudin pharetra est gravida sit amet. Suspendisse potenti. Nam lectus dui, efficitur sit amet imperdiet ac, sagittis ut arcu. Integer et consequat lectus. Morbi placerat id tellus non cursus. Cras molestie porta mi, eu malesuada neque lacinia commodo.
Donec suscipit hendrerit neque ut feugiat. Nulla facilisi. Morbi aliquet iaculis purus, a malesuada risus scelerisque in. Sed suscipit ut mi placerat viverra. Donec luctus odio sit amet ullamcorper commodo. Vestibulum molestie sem quis lorem fermentum, sed euismod nulla tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus ipsum auctor sem cursus, a venenatis lorem condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras placerat, nibh sit amet molestie fermentum, ante mi luctus massa, sit amet mollis diam felis ut eros. Vivamus dapibus cursus est, facilisis pharetra nunc tristique et. Quisque cursus mollis lacus, vel scelerisque metus ullamcorper faucibus. Fusce et tristique magna. Duis maximus justo eu volutpat pharetra.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt. Mauris consequat tellus nec elit lobortis, vitae sodales libero pretium. Vivamus hendrerit faucibus purus, sollicitudin pharetra est gravida sit amet. Suspendisse potenti. Nam lectus dui, efficitur sit amet imperdiet ac, sagittis ut arcu. Integer et consequat lectus. Morbi placerat id tellus non cursus. Cras molestie porta mi, eu malesuada neque lacinia commodo.
Donec suscipit hendrerit neque ut feugiat. Nulla facilisi. Morbi aliquet iaculis purus, a malesuada risus scelerisque in. Sed suscipit ut mi placerat viverra. Donec luctus odio sit amet ullamcorper commodo. Vestibulum molestie sem quis lorem fermentum, sed euismod nulla tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean rhoncus ipsum auctor sem cursus, a venenatis lorem condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras placerat, nibh sit amet molestie fermentum, ante mi luctus massa, sit amet mollis diam felis ut eros. Vivamus dapibus cursus est, facilisis pharetra nunc tristique et. Quisque cursus mollis lacus, vel scelerisque metus ullamcorper faucibus. Fusce et tristique magna. Duis maximus justo eu volutpat pharetra.
Two-Column Layout with Equal Image & Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt. Mauris consequat tellus nec elit lobortis, vitae sodales libero pretium. Vivamus hendrerit faucibus purus, sollicitudin pharetra est gravida sit amet. Suspendisse potenti. Nam lectus dui, efficitur sit amet imperdiet ac, sagittis ut arcu. Integer et consequat lectus. Morbi placerat id tellus non cursus. Cras molestie porta mi, eu malesuada neque lacinia commodo. Donec suscipit hendrerit neque ut feugiat. Nulla facilisi. Morbi aliquet iaculis purus, a malesuada risus scelerisque in. Sed suscipit ut mi placerat viverra. Donec luctus odio sit amet ullamcorper commodo. Vestibulum molestie sem quis lorem fermentum, sed euismod nulla tristique. Lorem ipsum dolor sit amet, consectetur adipiscing.
Three-Column Buttons
Three-Column with Two-Column Image & One-Column Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt. Mauris consequat tellus nec elit lobortis, vitae sodales libero pretium. Vivamus hendrerit faucibus purus, sollicitudin pharetra est gravida sit amet. Suspendisse potenti. Nam lectus dui, efficitur sit amet imperdiet ac, sagittis ut arcu. Integer et consequat lectus. Morbi placerat id tellus non cursus. Cras molestie porta mi, eu malesuada neque lacinia commodo. Donec suscipit hendrerit neque ut feugiat. Nulla facilisi. Morbi aliquet iaculis purus, a malesuada risus scelerisque in. Sed suscipit ut mi placerat viverra. Donec luctus odio sit amet ullamcorper commodo.
Three-Column with One-Column Image & Two-Column Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt. Mauris consequat tellus nec elit lobortis, vitae sodales libero pretium. Vivamus hendrerit faucibus purus, sollicitudin pharetra est gravida sit amet. Suspendisse potenti. Nam lectus dui, efficitur sit amet imperdiet ac, sagittis ut arcu. Integer et consequat lectus. Morbi placerat id tellus non cursus. Cras molestie porta mi, eu malesuada neque lacinia commodo. Donec suscipit hendrerit neque ut feugiat. Nulla facilisi. Morbi aliquet iaculis purus, a malesuada risus scelerisque in. Sed suscipit ut mi placerat viverra. Donec luctus odio sit amet ullamcorper commodo.
Three-Column Layout with Image & Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt. Mauris consequat tellus nec elit lobortis, vitae sodales libero pretium. Vivamus hendrerit faucibus purus, sollicitudin pharetra est gravida sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt. Mauris consequat tellus nec elit lobortis, vitae sodales libero pretium. Vivamus hendrerit faucibus purus, sollicitudin pharetra est gravida sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt. Mauris consequat tellus nec elit lobortis, vitae sodales libero pretium. Vivamus hendrerit faucibus purus, sollicitudin pharetra est gravida sit amet.
Four-Column Buttons
Four-Column Layout with Image & Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt. Mauris consequat tellus nec elit lobortis, vitae sodales libero pretium. Vivamus hendrerit faucibus purus, sollicitudin pharetra est gravida sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt. Mauris consequat tellus nec elit lobortis, vitae sodales libero pretium. Vivamus hendrerit faucibus purus, sollicitudin pharetra est gravida sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt. Mauris consequat tellus nec elit lobortis, vitae sodales libero pretium. Vivamus hendrerit faucibus purus, sollicitudin pharetra est gravida sit amet.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt. Mauris consequat tellus nec elit lobortis, vitae sodales libero pretium. Vivamus hendrerit faucibus purus, sollicitudin pharetra est gravida sit amet.
Four-Column Layout with One-Column Text & Three-Column Image
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt. Mauris consequat tellus nec elit lobortis, vitae sodales libero pretium. Vivamus hendrerit faucibus purus, sollicitudin pharetra est gravida sit amet. Donec suscipit hendrerit neque ut feugiat. Nulla facilisi. Morbi aliquet iaculis purus, a malesuada risus scelerisque in. Sed suscipit ut mi placerat viverra. Donec luctus odio sit amet ullamcorper commodo. Vestibulum molestie sem quis lorem fermentum, sed euismod nulla tristique. Lorem ipsum dolor sit amet, consectetur adipiscing.
Five-Column Boxes
Five-Column Layout with Image & Text
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porttitor urna ut elit sagittis tincidunt.