Image & Text Page Block
This is a foundational page block type, and contains a side-by-side layout on desktop, featuring an image in one column and paragraph of text in the second column. Several variations exist for this block type.
How To | Style Guide | Content Styles | Accessibility Tips | Page Blocks
Optional Pre-Title
H2 – Image & Text (image right, NO BG Inset)
Lorem ipsum dolor sit amet, consec tetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
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.
Excepteur sint occaecat cupidatat non proident
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.
Optional Pre-Title
H2 – Image & Text (image left, NO BG Inset)
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.
Optional Pre-Title
H2 – Image & Text (image left, YES BG Inset)
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.
Optional Pre-Title
H2 – Image & Text (image right, YES BG Inset)
It may feel redundant to include this block again in this Codepen, but I’m interested in the relationship when a BG Inset section follows another BG Inset BG. I just want to ensure that this still looks okay.
Optional Pre-Title
H2 – Image & Text, with Utility Cards Links
This demonstrates what this permutation would look like. I think it’s important to beat this up in a variety of ways to ensure that these blocks hold up.
Optional Pre-Title
H2 – Image & Text with Testimonial (image right, NO BG Inset)
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.
“I would rate my experience as a definite 5. Honestly what stuck out to me the most about Olivet and one of the reasons why I picked it as a school was because the people, my counselor, and the atmosphere was so welcoming and friendly. I loved my experience!”
Firstname Lastname
Class of 2025