This is the home page (front-page.php) template.
Style your components below for the theme.
Once finished, feel free to move this markup somewhere else in the theme file structure for future reference.
This is a sample paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sample LinkThis is a sample paragraph with a link inside of it.
Details content goes here.
Details content goes here.
Details content goes here.
We often alternate <section>
elements background colors with .bg-gray
.split
Unordered List Item 1.split
Unordered List Item 2.split
Unordered List Item 3.split
Unordered List Item 4.slim-content
Use the .slim-content
class on a container or <div>
to improve readability on wider viewports.
Applies max-width and equal horizontal margins.
Fusce non fermentum mi. Praesent vel lobortis elit. Nulla sodales, risus quis sollicitudin iaculis, felis dolor aliquet purus, eget elementum velit nunc eu dolor. Curabitur elit tellus, dictum non sem sit amet, viverra lobortis velit. Quisque facilisis, neque cursus ullamcorper ornare, dolor metus aliquam lacus, pharetra porttitor massa neque ut ligula. Vivamus laoreet nulla diam, eget adipiscing felis scelerisque sit amet. Mauris egestas, nisi vitae cursus tincidunt, urna ipsum facilisis eros, ut venenatis dui tellus sit amet orci. Nullam a rhoncus diam, eget tristique felis. Nulla egestas adipiscing fermentum. Aenean sagittis libero at eros ornare molestie. Morbi convallis ornare imperdiet. Mauris convallis tristique erat ac eleifend.
.lazy-background
sectionUse the .lazy-background
class on an element to delay loading the background image until the user has scrolled closer to the element.
Place the image URL inside the data-bgimage
property on the element and JavaScript will take care of the rest via the IntersectionObserver.
See the setupLazyLoadBackgrounds()
function in scripts.js and /scss/base/lazyloader.scss
for more