The Image Stripe Block is featured on the home page and FitNation main page and can be used throughout the site to breakup large amounts of text with some color and a photo. It also is great to highlight a Call to Action (CTA) or something you want to bring the user’s attention to. You can choose whether the overlaid content appears to the left or right on desktop.
This block allows you to pick a full-width BG image and then an overlay – which you can pick to be on the right or left side – on top of the image with some teaser text and a call to action (CTA) button. You can also adjust the primary and accent color of the overlay block as well as select an accent icon.
Below is another spin off of the image/stripe block called Image Text Split block:
And even more fun stuff here and I can keep typing because I can get a full paragraph here so I should put at least a few sentences after the title and hopefully these sentences will tease people to click the call to action button below. Rock on
Below is a row of icons that can have up to 4 icons, and you can swap the color between Green (Default), Blue and Maroon:
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna nibh, rutrum sit amet lorem eget, condimentum lacinia magna. Quisque lorem massa, volutpat sit amet dapibus a, eleifend quis enim. Aliquam id vestibulum tortor. Aliquam sit amet dolor id dolor lacinia interdum in accumsan dolor. Vestibulum bibendum justo ut ante laoreet condimentum. Etiam id enim sit amet nisl ultricies vestibulum. F
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna nibh, rutrum sit amet lorem eget, condimentum lacinia magna. Quisque lorem massa, volutpat sit amet dapibus a, eleifend quis enim. Aliquam id vestibulum tortor. Aliquam sit amet dolor id dolor lacinia interdum in accumsan dolor. Vestibulum bibendum justo ut ante laoreet condimentum. Etiam id enim sit amet nisl ultricies vestibulum. F
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna nibh, rutrum sit amet lorem eget, condimentum lacinia magna. Quisque lorem massa, volutpat sit amet dapibus a, eleifend quis enim. Aliquam id vestibulum tortor. Aliquam sit amet dolor id dolor lacinia interdum in accumsan dolor. Vestibulum bibendum justo ut ante laoreet condimentum. Etiam id enim sit amet nisl ultricies vestibulum. F
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna nibh, rutrum sit amet lorem eget, condimentum lacinia magna. Quisque lorem massa, volutpat sit amet dapibus a, eleifend quis enim. Aliquam id vestibulum tortor. Aliquam sit amet dolor id dolor lacinia interdum in accumsan dolor. Vestibulum bibendum justo ut ante laoreet condimentum. Etiam id enim sit amet nisl ultricies vestibulum. F
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna nibh, rutrum sit amet lorem eget, condimentum lacinia magna. Quisque lorem massa, volutpat sit amet dapibus a, eleifend quis enim. Aliquam id vestibulum tortor. Aliquam sit amet dolor id dolor lacinia interdum in accumsan dolor. Vestibulum bibendum justo ut ante laoreet condimentum. Etiam id enim sit amet nisl ultricies vestibulum. F
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna nibh, rutrum sit amet lorem eget, condimentum lacinia magna. Quisque lorem massa, volutpat sit amet dapibus a, eleifend quis enim. Aliquam id vestibulum tortor. Aliquam sit amet dolor id dolor lacinia interdum in accumsan dolor. Vestibulum bibendum justo ut ante laoreet condimentum. Etiam id enim sit amet nisl ultricies vestibulum. F
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna nibh, rutrum sit amet lorem eget, condimentum lacinia magna. Quisque lorem massa, volutpat sit amet dapibus a, eleifend quis enim. Aliquam id vestibulum tortor. Aliquam sit amet dolor id dolor lacinia interdum in accumsan dolor. Vestibulum bibendum justo ut ante laoreet condimentum. Etiam id enim sit amet nisl ultricies vestibulum. F
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer urna nibh, rutrum sit amet lorem eget, condimentum lacinia magna. Quisque lorem massa, volutpat sit amet dapibus a, eleifend quis enim. Aliquam id vestibulum tortor. Aliquam sit amet dolor id dolor lacinia interdum in accumsan dolor. Vestibulum bibendum justo ut ante laoreet condimentum. Etiam id enim sit amet nisl ultricies vestibulum. F
Below are some examples of image grids you can use for larger call-to-action links . First is a grid of thumbnail links (Thumbnail Grid Links) and after that is a grid of 50%-width slide-up cards (Full Width Slide-Up Cards Grid), for these you’ll want to use an even number of cards :
Here’s another example of 50% width image grid with teasers that display all the time (not just on hover):
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non accumsan
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non accumsan
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non accumsan
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus non accumsan
