Mosaic

Mosaic showcases components as a graphic montage. It always extends the full content area.

Example

Surface cases — Mosaic for Surface containing images and a mosaic placement using the dark theme

Surface accessories — Mosaic for Surface containing images and a mosaic placement using the dark theme

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.

Also known as

Gallery

Image
Content placement
Product placement

Options

Mosaics follow several predefined patterns as outlined below.
Use the class theme-dark for dark images or theme-light for light images to control the text color. This class can be set at the data-f-mosaic level or on the c-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

Placeholder with grey background and dimension watermark without any imagery

Pattern 1 Item 1 - Title

Pattern 1 Item 1 - Subtitle

Example

Accessories

Best practices

Do

Don’t

Also known as

Related

Options

Specifications

Development

Pattern 1 Item 1 - Title

Pattern 1, Item 2 - Title

Pattern 2 Item 1 - Title

Pattern 2 Item 2 - Title

Pattern 2 Item 3 - Title

Pattern 2 Item 4 - Title

Pattern 3 Item 1 - Title

Pattern 3 Item 2 - Title

Pattern 3 Item 3 - Title

Pattern 3 Item 4 - Title

Pattern 3 Item 5 - Title

Pattern 3 Item 6 - Title

Pattern 3 Item 7 - Title

Pattern 4 Item 1 - Title

Pattern 4 Item 2 - Title

Pattern 4 Item 3 - Title

Pattern 4 Item 4 - Title

Pattern 4 Item 5 - Title

Pattern 4 Item 6 - Title

Pattern 5 Item 1 - Title

Pattern 5 Item 2 - Title

Pattern 5 Item 3 - Title

Pattern 5 Item 4 - Title

Pattern 5 Item 5 - Title

Pattern 5 Item 6 - Title

Pattern 5 Item 7 - Title

Pattern 5 Item 8 - Title

Pattern 6 Item 1 - Title

Pattern 6 Item 2 - Title

Pattern 6 Item 3 - Title

Pattern 6 Item 4 - Title

Pattern 6 Item 5 - Title

Pattern 6 Item 6 - Title

Pattern 6 Item 7 - Title

Pattern 6 Item 8 - Title

Pattern 6 Item 9 - Title

Pattern 7 Item 1 - Title

Pattern 7 Item 2 - Title

Pattern 7 Item 3 - Title

Pattern 7 Item 4 - Title

Pattern 8 Item 1 - Title

Pattern 8 Item 2 - Title

Pattern 8 Item 3 - Title

Navigation Label

Pattern 9 Item 2 - Title

Pattern 9 Item 3 - Title

Navigation Label

Pattern 10 Item 2 - Title

Pattern 10 Item 3 - Title

Pattern 10 Item 4 - Title

Pattern 11 Item 1 - Title

Pattern 11 Item 2 - Title

Pattern 11 Item 3 - Title

Pattern 11 Item 4 - Title