Section 1
Here the scrolling takes you from one whole section - or tile - to the next, instead of moving evenly down the page. To make this work, I'm using an extra 'custom.js' in the Resources, and then linked to in the Page manager Footer.
The page needs a html element with the tags '<del></del>' (without the inverted commas) right at the top, and also between each 'section', as an anchor, or identifier, for the script. Also, each section has to be given a min-height covering at least most of the viewport height. I've used 80vh, and to make the scrolling work also for the last section, I added a bottom padding of 20vh to the 'wrapper' container, which is holding all the sections. That bottom padding may of course be replaced by a regular footer.
This building block has been built in Foundation. It utilizes no specific Foundation classes, so it would be easy to create it in Bootstrap and Vanilla too.
To make a component, select the 'wrapper' container. You can have more (or less) sections, just remember to put a html element in between them. If you want to use this as a web page with a navigation bar, it would be best to add the navbar outside (above) the wrapper.
The rest of the contents down the page is just filling/decoration.
Section 2
A shepherd with his flock. In the background the Haute Atlas mountains, Morocco.
Section 3
Bit of rough sea outside the Norwegian coast. Picture taken during the 'golden hour' at sunset.
Section 4
A lone tree growing on the old city walls in Foca, Turkey.