Mosaic
Mosaic showcases components as a graphic montage. It always extends the full content area.
Example
Best practices
Use mosaic by itself or in combination with hero at the top of primary landing pages. It can also be used by itself further down the page. Mosaic is well-suited for a video and slideshow montage. Use mosaic to showcase lots of rich content items that are personalized to the user. Mosaics also lend themselves well to storytelling scenarios with lots of rich imagery and other content, (e.g. product detail or family pages). Single-height mosaics can be placed below single hero or single hero carousels at the top of a page. Mosaics may be stacked with heroes lower on the page, keeping in mind page pacing and rhythm.
Do
- Use mosaic to support a theme, communicate an idea, or present top picks around a particular topic. Users should be able to perceive the overall message of a mosaic without having to study all the individual segments.
- Consider hierarchy, rhythm, and pattern when choosing imagery for mosaic placements, and when placing a mosaic on the page. The flow of the page can be broken gracefully through a mindful use of the right mosaic pattern.
- Consider the same photo guidelines for mosaics as for hero images. In cases where text is placed on image, careful attention must be paid to clear spaces and contrast levels. For more information, see our photo guidelines.
Don’t
- Don’t try to put a mosaic on every page. It is a signature component that should be used according to specific cases described above to avoid oversaturation.
- Avoid placing full photo placements right next to each other within a mosaic. This intersection creates visual noise. Instead, break up rich imagery with color blocks or device renders with neutral backgrounds.
- Don’t put too much text over mosaic placements — it detracts from the impact of the imagery and message, which should both speak for themselves and speak clearly as a part of a well-composed mosaic.
- Do not place full bleed mosaics at the top of a page, or within a carousel at the top of a page. This creates legibility problems with the transparent header.
- Avoid placing double-height mosaics directly below a hero in the-of-page position.
- Do not stack mosaics taller than double height anywhere on a page.
- Do not use more than one call-to-action in a group.
Options
- Mosaics follow several predefined patterns as outlined below.
- Use the class
theme-dark
for dark images ortheme-light
for light images to control the text color. This class can be set at thedata-f-mosaic
level or on thec-mosaic
top level. - Use the
f-background-*
classes to style the background color of a mosaic tile, by default no background color is set. The table below shows possible options:
Class | Color |
---|---|
.f-background-neutral-10 |
neutral-10
|
.f-background-neutral-20 |
neutral-20
|
.f-background-neutral-30 |
neutral-30
|
.f-background-neutral-45 |
neutral-45
|
.f-background-neutral-55 |
neutral-55
|
.f-background-neutral-65 |
neutral-65
|
.f-background-neutral-75 |
neutral-75
|
.f-background-neutral-80 |
neutral-80
|
.f-background-neutral-90 |
neutral-90
|
.f-background-neutral-100 |
neutral-100
|
.f-background-accent |
accent
|
- Use the
f-mask-*
classes to add a mask to a mosaic tile, by default no mask is set. The table below shows possible options:
Class | Mask |
---|---|
.f-mask-10 |
10% mask
|
.f-mask-20 |
20% mask
|
.f-mask-40 |
40% mask
|
.f-mask-60 |
60% mask
|
.f-mask-80 |
80% mask
|
.f-mask-100 |
100% mask
|
Specifications
Browser support: | IE10+, Edge, Safari, Firefox, and Chrome |
---|
Development
- Schema definition: The mosaic schema defines the acceptable configurations, requirements, and options for each module.
Code and preview
Pattern one
Pattern 1, Item 2 - Title
<div class="m-mosaic">
<div class="c-mosaic">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-large">
<section class="c-mosaic-placement f-background-neutral-90">
<picture>
<source srcset="http://placehold.it/890x800/171717/2F2F2F" media="(min-width:1779px)">
<source srcset="http://placehold.it/800x800/171717/2F2F2F" media="(min-width:1400px)">
<source srcset="http://placehold.it/700x800/171717/2F2F2F" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
<source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 1 Item 1 - Title</h3>
<p class="c-subheading">Pattern 1 Item 1 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-large">
<section class="c-mosaic-placement f-background-neutral-80">
<picture>
<source srcset="http://placehold.it/890x800/2F2F2F/222222" media="(min-width:1779px)">
<source srcset="http://placehold.it/800x800/2F2F2F/222222" media="(min-width:1400px)">
<source srcset="http://placehold.it/700x800/2F2F2F/222222" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x400/2F2F2F/222222" media="(min-width:768px)">
<source srcset="http://placehold.it/768x400/2F2F2F/222222" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 1, Item 2 - Title</h3>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
</div>
Pattern two
<div class="m-mosaic">
<div class="c-mosaic">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-large">
<section class="c-mosaic-placement f-background-neutral-90">
<picture>
<source srcset="http://placehold.it/890x800/171717/2F2F2F" media="(min-width:1779px)">
<source srcset="http://placehold.it/800x800/171717/2F2F2F" media="(min-width:1400px)">
<source srcset="http://placehold.it/700x800/171717/2F2F2F" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
<source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 2 Item 1 - Title</h3>
<p class="c-subheading">Pattern 2 Item 1 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-80">
<picture>
<source srcset="http://placehold.it/425x425/2F2F2F/222222" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/2F2F2F/222222" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/2F2F2F/222222" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/2F2F2F/222222" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/2F2F2F/222222" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 2 Item 2 - Title</h3>
<p class="c-subheading">Pattern 2 Item 2 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-75">
<picture>
<source srcset="http://placehold.it/425x425/464646/333333" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/464646/333333" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/464646/333333" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/464646/333333" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/464646/333333" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/464646/333333" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/464646/333333" src="http://placehold.it/540x300/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 2 Item 3 - Title</h3>
<p class="c-subheading">Pattern 2 Item 3 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-height-medium">
<section class="c-mosaic-placement f-background-neutral-65">
<picture>
<source srcset="http://placehold.it/850x425/5E5E5E/505050" media="(min-width:1779px)">
<source srcset="http://placehold.it/800x400/5E5E5E/505050" media="(min-width:1400px)">
<source srcset="http://placehold.it/700x400/5E5E5E/505050" media="(min-width:1084px)">
<source srcset="http://placehold.it/1084x400/5E5E5E/505050" media="(min-width:768px)">
<source srcset="http://placehold.it/768x400/5E5E5E/505050" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/5E5E5E/505050" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/5E5E5E/505050" src="http://placehold.it/540x300/5E5E5E/505050" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 2 Item 4 - Title</h3>
<p class="c-subheading">Pattern 2 Item 4 - Title</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
Pattern three
Pattern 3 Item 2 - Title
Pattern 3 Item 5 - Title
Pattern 3 Item 5 - Subtitle
Pattern 3 Item 6 - Title
Pattern 3 Item 6 - Subtitle
<div class="m-mosaic">
<div class="c-mosaic">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-large">
<section class="c-mosaic-placement f-background-neutral-90">
<picture>
<source srcset="http://placehold.it/890x800/171717/2F2F2F" media="(min-width:1779px)">
<source srcset="http://placehold.it/800x800/171717/2F2F2F" media="(min-width:1400px)">
<source srcset="http://placehold.it/700x800/171717/2F2F2F" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
<source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 3 Item 1 - Title</h3>
<p class="c-subheading">Pattern 3 Item 1 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-80">
<picture>
<source srcset="http://placehold.it/425x425/2F2F2F/222222" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/2F2F2F/222222" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/2F2F2F/222222" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/2F2F2F/222222" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/2F2F2F/222222" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 3 Item 2 - Title</h3>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-75">
<picture>
<source srcset="http://placehold.it/425x425/464646/333333" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/464646/333333" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/464646/333333" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/464646/333333" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/464646/333333" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/464646/333333" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/464646/333333" src="http://placehold.it/540x300/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 3 Item 3 - Title</h3>
<p class="c-subheading">Pattern 3 Item 3 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-65">
<picture>
<source srcset="http://placehold.it/425x425/5E5E5E/505050" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/5E5E5E/505050" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/5E5E5E/505050" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/5E5E5E/505050" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/5E5E5E/505050" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/5E5E5E/505050" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/5E5E5E/505050" src="http://placehold.it/540x300/5E5E5E/505050" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 3 Item 4 - Title</h3>
<p class="c-subheading">Pattern 3 Item 4 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div data-f-mosaic="f-vp1-whole f-vp2-half">
<div class="theme-dark" data-f-mosaic="f-vp1-half f-height-small">
<section class="c-mosaic-placement f-background-neutral-55">
<picture>
<source srcset="http://placehold.it/215x215/767676/666666" media="(min-width:1779px)">
<source srcset="http://placehold.it/200x200/767676/666666" media="(min-width:1400px)">
<source srcset="http://placehold.it/175x200/767676/666666" media="(min-width:1084px)">
<source srcset="http://placehold.it/271x200/767676/666666" media="(min-width:768px)">
<source srcset="http://placehold.it/192x200/767676/666666" media="(min-width:540px)">
<source srcset="http://placehold.it/270x150/767676/666666" media="(min-width:0)">
<img srcset="http://placehold.it/270x150/767676/666666" src="http://placehold.it/270x150/767676/666666" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 3 Item 5 - Title</h3>
<p class="c-subheading">Pattern 3 Item 5 - Subtitle</p>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-half f-height-small">
<section class="c-mosaic-placement f-background-neutral-45">
<picture>
<source srcset="http://placehold.it/215x215/919191/777777" media="(min-width:1779px)">
<source srcset="http://placehold.it/200x200/919191/777777" media="(min-width:1400px)">
<source srcset="http://placehold.it/175x200/919191/777777" media="(min-width:1084px)">
<source srcset="http://placehold.it/271x200/919191/777777" media="(min-width:768px)">
<source srcset="http://placehold.it/192x200/919191/777777" media="(min-width:540px)">
<source srcset="http://placehold.it/270x150/919191/777777" media="(min-width:0)">
<img srcset="http://placehold.it/270x150/919191/777777" src="http://placehold.it/270x150/919191/777777" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 3 Item 6 - Title</h3>
<p class="c-subheading">Pattern 3 Item 6 - Subtitle</p>
</div>
</section>
</div>
<div class="theme-light" data-f-mosaic="f-vp1-whole f-height-small">
<section class="c-mosaic-placement f-background-neutral-30">
<picture>
<source srcset="http://placehold.it/425x215/ACACAC/888888" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x200/ACACAC/888888" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x200/ACACAC/888888" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x200/ACACAC/888888" media="(min-width:768px)">
<source srcset="http://placehold.it/384x200/ACACAC/888888" media="(min-width:540px)">
<source srcset="http://placehold.it/540x150/ACACAC/888888" media="(min-width:0)">
<img srcset="http://placehold.it/540x150/ACACAC/888888" src="http://placehold.it/540x150/ACACAC/888888" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 3 Item 7 - Title</h3>
<p class="c-subheading">Pattern 3 Item 7 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
Pattern four
Pattern 4 Item 2 - Title
<div class="m-mosaic">
<div class="c-mosaic">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
<section class="c-mosaic-placement f-background-nautral-90">
<picture>
<source srcset="http://placehold.it/890x400/171717/2F2F2F" media="(min-width:1779px)">
<source srcset="http://placehold.it/800x400/171717/2F2F2F" media="(min-width:1400px)">
<source srcset="http://placehold.it/700x400/171717/2F2F2F" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
<source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 4 Item 1 - Title</h3>
<p class="c-subheading">Pattern 4 Item 1 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-80">
<picture>
<source srcset="http://placehold.it/425x425/2F2F2F/222222" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/2F2F2F/222222" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/2F2F2F/222222" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/2F2F2F/222222" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/2F2F2F/222222" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 4 Item 2 - Title</h3>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-75">
<picture>
<source srcset="http://placehold.it/425x425/464646/333333" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/464646/333333" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/464646/333333" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/464646/333333" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/464646/333333" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/464646/333333" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/464646/333333" src="http://placehold.it/540x300/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 4 Item 3 - Title</h3>
<p class="c-subheading">Pattern 4 Item 3 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-65">
<picture>
<source srcset="http://placehold.it/425x425/5E5E5E/505050" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/5E5E5E/505050" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/5E5E5E/505050" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/5E5E5E/505050" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/5E5E5E/505050" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/5E5E5E/505050" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/5E5E5E/505050" src="http://placehold.it/540x300/5E5E5E/505050" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 4 Item 4 - Title</h3>
<p class="c-subheading">Pattern 4 Item 4 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-55">
<picture>
<source srcset="http://placehold.it/425x425/767676/666666" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/767676/666666" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/767676/666666" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/767676/666666" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/767676/666666" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/767676/666666" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/767676/666666" src="http://placehold.it/540x300/767676/666666" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 4 Item 5 - Title</h3>
<p class="c-subheading">Pattern 4 Item 5 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
<div class="theme-light" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-45">
<picture>
<source srcset="http://placehold.it/850x425/919191/777777" media="(min-width:1779px)">
<source srcset="http://placehold.it/800x400/919191/777777" media="(min-width:1400px)">
<source srcset="http://placehold.it/700x400/919191/777777" media="(min-width:1084px)">
<source srcset="http://placehold.it/1084x400/919191/777777" media="(min-width:768px)">
<source srcset="http://placehold.it/768x400/919191/777777" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/919191/777777" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/919191/777777" src="http://placehold.it/540x300/919191/777777" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 4 Item 6 - Title</h3>
<p class="c-subheading">Pattern 4 Item 6 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
</div>
Pattern five
Pattern 5 Item 2 - Title
Pattern 5 Item 6 - Title
Pattern 5 Item 6 - Subtitle
Pattern 5 Item 7 - Title
Pattern 5 Item 7 - Subtitle
<div class="m-mosaic">
<div class="c-mosaic">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-90">
<picture>
<source srcset="http://placehold.it/890x400/171717/2F2F2F" media="(min-width:1779px)">
<source srcset="http://placehold.it/800x400/171717/2F2F2F" media="(min-width:1400px)">
<source srcset="http://placehold.it/700x400/171717/2F2F2F" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
<source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 5 Item 1 - Title</h3>
<p class="c-subheading">Pattern 5 Item 1 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-80">
<picture>
<source srcset="http://placehold.it/425x425/2F2F2F/222222" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/2F2F2F/222222" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/2F2F2F/222222" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/2F2F2F/222222" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/2F2F2F/222222" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 5 Item 2 - Title</h3>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-75">
<picture>
<source srcset="http://placehold.it/425x425/464646/333333" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/464646/333333" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/464646/333333" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/464646/333333" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/464646/333333" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/464646/333333" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/464646/333333" src="http://placehold.it/540x300/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 5 Item 3 - Title</h3>
<p class="c-subheading">Pattern 5 Item 3 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-65">
<picture>
<source srcset="http://placehold.it/890x400/5E5E5E/505050" media="(min-width:1779px)">
<source srcset="http://placehold.it/800x400/5E5E5E/505050" media="(min-width:1400px)">
<source srcset="http://placehold.it/700x400/5E5E5E/505050" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x400/5E5E5E/505050" media="(min-width:768px)">
<source srcset="http://placehold.it/768x400/5E5E5E/505050" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/5E5E5E/505050" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/5E5E5E/505050" src="http://placehold.it/540x300/5E5E5E/505050" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 5 Item 4 - Title</h3>
<p class="c-subheading">Pattern 5 Item 4 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-55">
<picture>
<source srcset="http://placehold.it/425x425/767676/666666" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/767676/666666" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/767676/666666" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/767676/666666" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/767676/666666" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/767676/666666" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/767676/666666" src="http://placehold.it/540x300/767676/666666" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 5 Item 5 - Title</h3>
<p class="c-subheading">Pattern 5 Item 5 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div data-f-mosaic="f-vp1-whole f-vp2-half">
<div class="theme-light" data-f-mosaic="f-vp1-half f-height-small">
<section class="c-mosaic-placement f-background-neutral-45">
<picture>
<source srcset="http://placehold.it/215x215/919191/777777" media="(min-width:1779px)">
<source srcset="http://placehold.it/200x200/919191/777777" media="(min-width:1400px)">
<source srcset="http://placehold.it/175x200/919191/777777" media="(min-width:1084px)">
<source srcset="http://placehold.it/271x200/919191/777777" media="(min-width:768px)">
<source srcset="http://placehold.it/192x200/919191/777777" media="(min-width:540px)">
<source srcset="http://placehold.it/270x150/919191/777777" media="(min-width:0)">
<img srcset="http://placehold.it/270x150/919191/777777" src="http://placehold.it/270x150/919191/777777" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 5 Item 6 - Title</h3>
<p class="c-subheading">Pattern 5 Item 6 - Subtitle</p>
</div>
</section>
</div>
<div class="theme-light" data-f-mosaic="f-vp1-half f-height-small">
<section class="c-mosaic-placement f-background-neutral-30">
<picture>
<source srcset="http://placehold.it/215x215/ACACAC/888888" media="(min-width:1779px)">
<source srcset="http://placehold.it/200x200/ACACAC/888888" media="(min-width:1400px)">
<source srcset="http://placehold.it/175x200/ACACAC/888888" media="(min-width:1084px)">
<source srcset="http://placehold.it/271x200/ACACAC/888888" media="(min-width:768px)">
<source srcset="http://placehold.it/192x200/ACACAC/888888" media="(min-width:540px)">
<source srcset="http://placehold.it/270x150/ACACAC/888888" media="(min-width:0)">
<img srcset="http://placehold.it/270x150/ACACAC/888888" src="http://placehold.it/270x150/ACACAC/888888" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 5 Item 7 - Title</h3>
<p class="c-subheading">Pattern 5 Item 7 - Subtitle</p>
</div>
</section>
</div>
<div class="theme-light" data-f-mosaic="f-vp1-whole f-height-small">
<section class="c-mosaic-placement f-background-neutral-20">
<picture>
<source srcset="http://placehold.it/425x215/C8C8C8/AAAAAA" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x200/C8C8C8/AAAAAA" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x200/C8C8C8/AAAAAA" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x200/C8C8C8/AAAAAA" media="(min-width:768px)">
<source srcset="http://placehold.it/384x200/C8C8C8/AAAAAA" media="(min-width:540px)">
<source srcset="http://placehold.it/540x150/C8C8C8/AAAAAA" media="(min-width:0)">
<img srcset="http://placehold.it/540x150/C8C8C8/AAAAAA" src="http://placehold.it/540x150/C8C8C8/AAAAAA" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 5 Item 8 - Title</h3>
<p class="c-subheading">Pattern 5 Item 8 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
Pattern six
Pattern 6 Item 7 - Title
Pattern 6 Item 7 - Subtitle
Pattern 6 Item 8 - Title
Pattern 6 Item 8 - Subtitle
Pattern 6 Item 9 - Title
<div class="m-mosaic">
<div class="c-mosaic">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-90">
<picture>
<source srcset="http://placehold.it/890x400/171717/2F2F2F" media="(min-width:1779px)">
<source srcset="http://placehold.it/800x400/171717/2F2F2F" media="(min-width:1400px)">
<source srcset="http://placehold.it/700x400/171717/2F2F2F" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
<source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 6 Item 1 - Title</h3>
<p class="c-subheading">Pattern 6 Item 1 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-80">
<picture>
<source srcset="http://placehold.it/425x425/2F2F2F/222222" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/2F2F2F/222222" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/2F2F2F/222222" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/2F2F2F/222222" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/2F2F2F/222222" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 6 Item 2 - Title</h3>
<p class="c-subheading">Pattern 6 Item 2 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-75">
<picture>
<source srcset="http://placehold.it/425x425/464646/333333" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/464646/333333" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/464646/333333" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/464646/333333" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/464646/333333" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/464646/333333" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/464646/333333" src="http://placehold.it/540x300/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 6 Item 3 - Title</h3>
<p class="c-subheading">Pattern 6 Item 3 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-65">
<picture>
<source srcset="http://placehold.it/425x425/5E5E5E/505050" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/5E5E5E/505050" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/5E5E5E/505050" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/5E5E5E/505050" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/5E5E5E/505050" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/5E5E5E/505050" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/5E5E5E/505050" src="http://placehold.it/540x300/5E5E5E/505050" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 6 Item 4 - Title</h3>
<p class="c-subheading">Pattern 6 Item 4 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-55">
<picture>
<source srcset="http://placehold.it/425x425/767676/666666" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/767676/666666" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/767676/666666" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/767676/666666" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/767676/666666" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/767676/666666" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/767676/666666" src="http://placehold.it/540x300/767676/666666" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 6 Item 5 - Title</h3>
<p class="c-subheading">Pattern 6 Item 5 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-light" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-45">
<picture>
<source srcset="http://placehold.it/425x425/919191/777777" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/919191/777777" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/919191/777777" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/919191/777777" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/919191/777777" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/919191/777777" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/919191/777777" src="http://placehold.it/540x300/919191/777777" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 6 Item 6 - Title</h3>
<p class="c-subheading">Pattern 6 Item 6 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div data-f-mosaic="f-vp1-whole f-vp2-half">
<div class="theme-light" data-f-mosaic="f-vp1-half f-height-small">
<section class="c-mosaic-placement f-background-neutral-30">
<picture>
<source srcset="http://placehold.it/215x215/ACACAC/888888" media="(min-width:1779px)">
<source srcset="http://placehold.it/200x200/ACACAC/888888" media="(min-width:1400px)">
<source srcset="http://placehold.it/175x200/ACACAC/888888" media="(min-width:1084px)">
<source srcset="http://placehold.it/271x200/ACACAC/888888" media="(min-width:768px)">
<source srcset="http://placehold.it/192x200/ACACAC/888888" media="(min-width:540px)">
<source srcset="http://placehold.it/270x150/ACACAC/888888" media="(min-width:0)">
<img srcset="http://placehold.it/270x150/ACACAC/888888" src="http://placehold.it/270x150/ACACAC/888888" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 6 Item 7 - Title</h3>
<p class="c-subheading">Pattern 6 Item 7 - Subtitle</p>
</div>
</section>
</div>
<div class="theme-light" data-f-mosaic="f-vp1-half f-height-small">
<section class="c-mosaic-placement f-background-neutral-20">
<picture>
<source srcset="http://placehold.it/215x215/C8C8C8/AAAAAA" media="(min-width:1779px)">
<source srcset="http://placehold.it/200x200/C8C8C8/AAAAAA" media="(min-width:1400px)">
<source srcset="http://placehold.it/175x200/C8C8C8/AAAAAA" media="(min-width:1084px)">
<source srcset="http://placehold.it/271x200/C8C8C8/AAAAAA" media="(min-width:768px)">
<source srcset="http://placehold.it/192x200/C8C8C8/AAAAAA" media="(min-width:540px)">
<source srcset="http://placehold.it/270x150/C8C8C8/AAAAAA" media="(min-width:0)">
<img srcset="http://placehold.it/270x150/C8C8C8/AAAAAA" src="http://placehold.it/270x150/C8C8C8/AAAAAA" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 6 Item 8 - Title</h3>
<p class="c-subheading">Pattern 6 Item 8 - Subtitle</p>
</div>
</section>
</div>
<div class="theme-light" data-f-mosaic="f-vp1-whole f-height-small">
<section class="c-mosaic-placement f-background-neutral-10">
<picture>
<source srcset="http://placehold.it/425x215/E3E3E3/CCCCCC" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x200/E3E3E3/CCCCCC" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x200/E3E3E3/CCCCCC" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x200/E3E3E3/CCCCCC" media="(min-width:768px)">
<source srcset="http://placehold.it/384x200/E3E3E3/CCCCCC" media="(min-width:540px)">
<source srcset="http://placehold.it/540x150/E3E3E3/CCCCCC" media="(min-width:0)">
<img srcset="http://placehold.it/540x150/E3E3E3/CCCCCC" src="http://placehold.it/540x150/E3E3E3/CCCCCC" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 6 Item 9 - Title</h3>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
Pattern seven
Pattern 7 Item 2 - Title
<div class="m-mosaic">
<div class="c-mosaic">
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-90">
<picture>
<source srcset="http://placehold.it/425x425/171717/2F2F2F" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/171717/2F2F2F" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/171717/2F2F2F" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/171717/2F2F2F" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/171717/2F2F2F" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 7 Item 1 - Title</h3>
<p class="c-subheading">Pattern 7 Item 1 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-80">
<picture>
<source srcset="http://placehold.it/425x425/2F2F2F/222222" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/2F2F2F/222222" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/2F2F2F/222222" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/2F2F2F/222222" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/2F2F2F/222222" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/2F2F2F/222222" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/2F2F2F/222222" src="http://placehold.it/540x300/2F2F2F/222222" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 7 Item 2 - Title</h3>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-75">
<picture>
<source srcset="http://placehold.it/425x425/464646/333333" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/464646/333333" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/464646/333333" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/464646/333333" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/464646/333333" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/464646/333333" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/464646/333333" src="http://placehold.it/540x300/464646/333333" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 7 Item 3 - Title</h3>
<p class="c-subheading">Pattern 7 Item 3 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-65">
<picture>
<source srcset="http://placehold.it/425x425/5E5E5E/505050" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/5E5E5E/505050" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/5E5E5E/505050" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/5E5E5E/505050" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/5E5E5E/505050" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/5E5E5E/505050" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/5E5E5E/505050" src="http://placehold.it/540x300/5E5E5E/505050" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 7 Item 4 - Title</h3>
<p class="c-subheading">Pattern 7 Item 4 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
Pattern eight
Pattern 8 Item 2 - Title
<div class="m-mosaic">
<div class="c-mosaic">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-90">
<picture>
<source srcset="http://placehold.it/890x400/171717/2F2F2F" media="(min-width:1779px)">
<source srcset="http://placehold.it/800x400/171717/2F2F2F" media="(min-width:1400px)">
<source srcset="http://placehold.it/700x400/171717/2F2F2F" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
<source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 8 Item 1 - Title</h3>
<p class="c-subheading">Pattern 8 Item 1 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-80">
<picture>
<source srcset="http://placehold.it/425x425/2F2F2F" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/2F2F2F" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/2F2F2F" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/2F2F2F" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/2F2F2F" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/2F2F2F" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/2F2F2F" src="http://placehold.it/540x300/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 8 Item 2 - Title</h3>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-75">
<picture>
<source srcset="http://placehold.it/425x425/464646" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/464646" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/464646" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/464646" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/464646" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/464646" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/464646" src="http://placehold.it/540x300/464646" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 8 Item 3 - Title</h3>
<p class="c-subheading">Pattern 8 Item 3 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
Pattern nine
Navigation Label
<div class="m-mosaic">
<div class="c-mosaic">
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-80">
<div data-grid="col-12" class="m-hyperlink-group">
<div>
<h3 class="c-heading">Navigation Label</h3>
<ul class="c-list f-bare">
<li>
<a href="#" class="c-hyperlink">Hyperlink</a>
</li>
<li>
<a href="#" class="c-hyperlink">Hyperlink</a>
</li>
<li>
<a href="#" class="c-hyperlink">Hyperlink</a>
</li>
<li>
<a href="#" class="c-hyperlink">Hyperlink</a>
</li>
<li>
<a href="#" class="c-hyperlink">Hyperlink</a>
</li>
<li>
<a href="#" class="c-hyperlink">Hyperlink</a>
</li>
<li>
<a href="#" class="c-hyperlink">Hyperlink</a>
</li>
</ul>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-80">
<picture>
<source srcset="http://placehold.it/425x425/2F2F2F" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/2F2F2F" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/2F2F2F" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/2F2F2F" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/2F2F2F" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/2F2F2F" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/2F2F2F" src="http://placehold.it/540x300/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 9 Item 2 - Title</h3>
<p class="c-subheading">Pattern 9 Item 2 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-75">
<picture>
<source srcset="http://placehold.it/890x400/171717/2F2F2F" media="(min-width:1779px)">
<source srcset="http://placehold.it/800x400/171717/2F2F2F" media="(min-width:1400px)">
<source srcset="http://placehold.it/700x400/171717/2F2F2F" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x400/171717/2F2F2F" media="(min-width:768px)">
<source srcset="http://placehold.it/768x400/171717/2F2F2F" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/171717/2F2F2F" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/171717/2F2F2F" src="http://placehold.it/540x300/171717/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 9 Item 3 - Title</h3>
<p class="c-subheading">Pattern 9 Item 3 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
</div>
Pattern ten
Navigation Label
<div class="m-mosaic">
<div class="c-mosaic">
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-80">
<div data-grid="col-12" class="m-hyperlink-group">
<div>
<h3 class="c-heading">Navigation Label</h3>
<ul class="c-list f-bare">
<li>
<a href="#" class="c-hyperlink">Hyperlink</a>
</li>
<li>
<a href="#" class="c-hyperlink">Hyperlink</a>
</li>
<li>
<a href="#" class="c-hyperlink">Hyperlink</a>
</li>
<li>
<a href="#" class="c-hyperlink">Hyperlink</a>
</li>
<li>
<a href="#" class="c-hyperlink">Hyperlink</a>
</li>
<li>
<a href="#" class="c-hyperlink">Hyperlink</a>
</li>
<li>
<a href="#" class="c-hyperlink">Hyperlink</a>
</li>
</ul>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-80">
<picture>
<source srcset="http://placehold.it/425x425/2F2F2F" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/2F2F2F" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/2F2F2F" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/2F2F2F" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/2F2F2F" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/2F2F2F" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/2F2F2F" src="http://placehold.it/540x300/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 10 Item 2 - Title</h3>
<p class="c-subheading">Pattern 10 Item 2 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-75">
<picture>
<source srcset="http://placehold.it/425x425/464646" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/464646" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/464646" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/464646" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/464646" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/464646" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/464646" src="http://placehold.it/540x300/464646" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 10 Item 3 - Title</h3>
<p class="c-subheading">Pattern 10 Item 3 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-65">
<picture>
<source srcset="http://placehold.it/425x425/5E5E5E" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/5E5E5E" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/5E5E5E" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/5E5E5E" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/5E5E5E" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/5E5E5E" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/5E5E5E" src="http://placehold.it/540x300/5E5E5E" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 10 Item 4 - Title</h3>
<p class="c-subheading">Pattern 10 Item 4 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
</div>
</div>
Pattern 11
<div class="m-mosaic">
<div class="c-mosaic">
<div data-f-mosaic="f-vp1-whole f-vp4-half">
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-80">
<picture>
<source srcset="http://placehold.it/425x425/2F2F2F" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/2F2F2F" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/2F2F2F" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/2F2F2F" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/2F2F2F" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/2F2F2F" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/2F2F2F" src="http://placehold.it/540x300/2F2F2F" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 11 Item 1 - Title</h3>
<p class="c-subheading">Pattern 11 Item 1 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp2-half f-height-medium">
<section class="c-mosaic-placement f-background-neutral-75">
<picture>
<source srcset="http://placehold.it/425x425/464646" media="(min-width:1779px)">
<source srcset="http://placehold.it/400x400/464646" media="(min-width:1400px)">
<source srcset="http://placehold.it/350x400/464646" media="(min-width:1084px)">
<source srcset="http://placehold.it/542x400/464646" media="(min-width:768px)">
<source srcset="http://placehold.it/384x400/464646" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/464646" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/464646" src="http://placehold.it/540x300/464646" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 11 Item 2 - Title</h3>
<p class="c-subheading">Pattern 11 Item 2 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-height-medium">
<section class="c-mosaic-placement f-background-neutral-65">
<picture>
<source srcset="http://placehold.it/850x425/5E5E5E" media="(min-width:1779px)">
<source srcset="http://placehold.it/800x400/5E5E5E" media="(min-width:1400px)">
<source srcset="http://placehold.it/700x400/5E5E5E" media="(min-width:1084px)">
<source srcset="http://placehold.it/1084x400/5E5E5E" media="(min-width:768px)">
<source srcset="http://placehold.it/768x400/5E5E5E" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/5E5E5E" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/5E5E5E" src="http://placehold.it/540x300/5E5E5E" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 11 Item 3 - Title</h3>
<p class="c-subheading">Pattern 11 Item 3 - Title</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
<div class="theme-dark" data-f-mosaic="f-vp1-whole f-vp4-half f-height-large">
<section class="c-mosaic-placement f-background-neutral-90">
<picture>
<source srcset="http://placehold.it/890x800/171717" media="(min-width:1779px)">
<source srcset="http://placehold.it/800x800/171717" media="(min-width:1400px)">
<source srcset="http://placehold.it/700x800/171717" media="(min-width:1084px)">
<source srcset="http://placehold.it/1083x400/171717" media="(min-width:768px)">
<source srcset="http://placehold.it/768x400/171717" media="(min-width:540px)">
<source srcset="http://placehold.it/540x300/171717" media="(min-width:0)">
<img srcset="http://placehold.it/540x300/171717" src="http://placehold.it/540x300/171717" alt="Placeholder with grey background and dimension watermark without any imagery">
</picture>
<div>
<h3 class="c-heading">Pattern 11 Item 4 - Title</h3>
<p class="c-subheading">Pattern 11 Item 4 - Subtitle</p>
<div>
<a href="#" class="c-call-to-action c-glyph">
<span>CALL TO ACTION</span>
</a>
</div>
</div>
</section>
</div>
</div>
</div>