Fade to Grey and BG – classes set on main wrapper column
Fade to grey down: fade-to-grey-down. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit. Accumsan in nisl nisi scelerisque eu ultrices. Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci.
Fade to grey up: .fade-to-grey-up. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit. Accumsan in nisl nisi scelerisque eu ultrices. Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci
Faint grey background: .bg-faint-grey. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit. Accumsan in nisl nisi scelerisque eu ultrices. Ac ut consequat semper viverra nam libero justo. Pharetra et ultrices neque ornare aenean euismod. Felis eget nunc lobortis mattis aliquam faucibus purus. Magna eget est lorem ipsum dolor sit amet consectetur. Faucibus in ornare quam viverra orci.
Shadow Blocks & Flat Block – class applied to column itself or wrapper column
Class shadow-block-single applied to each column in this 66/33 block. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.
Class shadow-block-single in a column next to the first one. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.
Shadow Block Multi
Class: shadow-block-multi Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Shadow Block Multi
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Shadow Block Multi
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Flat block
Applied to this column only: flat-block – not wrapper column. Flat block allow for styling a block to be consistent across the site. Similar to Shadow Block but without the shadow.
Right Photo, Left Photo, Shadow Photo – classes applied to wrapper column
Left photo.
Left photo class applied to 2 column block: left-photo – requires H3 heading. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut.
Right photo.
Right photo class applied to 2 column block: right-photo – requires H3 heading. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut.
Right photo shadow.
Photo right (or left) with shadow – requires H3 heading. Two classes applied: right-photo and photo-shadow to main wrapper column Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at
Intro Column Class Block: class-block-intro-column
Introduction – apply class supheading to the paragraph
Heading for Intro Column Class Block
Set this up with a 1 column block and then nest another 1 column block inside and add supheading, heading, and first paragraph with largetext class applied to paragraph. Then add a 3 or 4 column block which is also inside main wrapper block. Apply classes in css to .class-block-intro-column if adjusting basic selectors in this area. Otherwise no adjustments are required. This section uses simple selectors.
Column 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Column 2
- One list item
- Second list item
- Third list item
Column 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit
Column 4
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Variation on above with open left column. class-block-intro-column-open-left class applied. Modified wrapper column width to 25 / 75 manually. Largetext and smalltext applied to paragraphs.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.
Split Intro Column Class Block: class-block-split-intro-column
Section Has Class Vertical-Center and this is an H3
Remove class vertical center to have headline at top with this column of text. This is simply a paragraph with no class applied. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Odio ut sem nulla pharetra. Tempus quam pellentesque nec nam. Tempus iaculis urna id volutpat lacus laoreet. Scelerisque fermentum dui faucibus in ornare.
Apply margin-top to this column for multiple paragraphs. Purus sit amet volutpat consequat. Nam aliquam sem et tortor consequat. Morbi tristique senectus et netus et malesuada fames ac. Scelerisque felis imperdiet proin fermentum.
Unique Solutions
H4 applied above and this is a simple paragraph. arrow-columns applied to this column wrapper for arrow space.
Seamless Solutions
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.
Innovative Solutions
Lorem ipsum dolor sit amet, consectetur. Accumsan in nisl nisi scelerisque eu ultrices.
Left Colored BG: class-block-left-colored-bg
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat.
Citation or author name for a quote
Accordion Left: class-block-accordion-left
A heading above the accordions. Applying vertical-center caused image to jump when opening accordions.
Aliquam nulla facilisi cras fermentum odio eu feugiat. Morbi non arcu risus quis varius. Fames ac turpis egestas integer eget aliquet. Aliquam etiam erat velit scelerisque in dictum non. Quisque non tellus orci ac.
Aliquam nulla facilisi cras fermentum odio eu feugiat. Morbi non arcu risus quis varius. Fames ac turpis egestas integer eget aliquet. Aliquam etiam erat velit scelerisque in dictum non. Quisque non tellus orci ac. Mauris ultrices eros in cursus turpis massa. Nunc sed id semper risus in hendrerit gravida.
Aliquam nulla facilisi cras fermentum odio eu feugiat. Morbi non arcu risus quis varius. Fames ac turpis egestas integer eget aliquet. Aliquam etiam erat velit scelerisque in dictum non. Quisque non tellus orci ac. Mauris ultrices eros in cursus turpis massa. Nunc sed id semper risus in hendrerit gravida.
Accordion Right: class-block-accordion-right
A heading for the right aligned accordion
Aliquam nulla facilisi cras fermentum odio eu feugiat. Morbi non arcu risus quis varius. Fames ac turpis egestas integer eget aliquet. Aliquam etiam erat velit scelerisque in dictum non.
Aliquam nulla facilisi cras fermentum odio eu feugiat. Morbi non arcu risus quis varius. Fames ac turpis egestas integer eget aliquet. Aliquam etiam erat velit scelerisque in dictum non.
Aliquam nulla facilisi cras fermentum odio eu feugiat. Morbi non arcu risus quis varius. Fames ac turpis egestas integer eget aliquet. Aliquam etiam erat velit scelerisque in dictum non.
Video Right: class-block-video-right
A heading for video right
Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. Amet venenatis urna cursus eget nunc scelerisque viverra. Id aliquet lectus proin nibh nisl condimentum id. Faucibus pulvinar elementum integer enim neque volutpat.
Video Left: class-block-video-left
A heading for video left
Pharetra et ultrices neque ornare aenean euismod elementum nisi quis. Amet venenatis urna cursus eget nunc scelerisque viverra. Id aliquet lectus proin nibh nisl condimentum id. Faucibus pulvinar elementum integer enim neque volutpat.
Fade In On Scroll : fadeinonscroll
Heading for Fade In On Scroll w Grey BG
Fade in on scroll with reverse fade out/in set at 10% up from the bottom using 90% on start trigger in JS.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.
Slide In On Scroll : slideinonscroll
Add Class On Scroll: addclassonscroll
Heading for Add Class On Scroll w Grey BG
Add class on scroll and remove on reverse set at 10% up from the bottom using 90% on start trigger in JS.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut. Orci nulla pellentesque dignissim enim sit. In cursus turpis massa tincidunt dui ut ornare lectus sit.
Parallax with ScrollTrigger
On page slider
Pad Left First Paragraph
pad-left-first-paragraph
001
A title here
If used combine first two columns into one for mobile rather than splitting them into separate lines. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Semper quis lectus nulla at volutpat diam ut.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.