Core Component: Teasers

Teasers are a core component which feature a Title, Description, Image, and one or more Buttons. They can be linked 

Futuristic spartan soldiers ready for action

Default Teaser Components

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Geometric design of Microsoft Game Dev, which can help you find the right mix of tools and services to fit your game development needs.

Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title Icon Title

Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle Icon Subtitle 

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side. The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teaser Components Without Images

With Pretitle

Pattern Library

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

Container Components

The Core "Container" component allows for the creation of logical page sections which house nested components. Container sections are combined to build up pages, while providing functionality such as content alignment, background coloring, and background imagery.

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This is often times referred to as a "Card", "Highlight", or "Teaser" in design systems.

Card Teaser Components

Teasers can have a pretitle

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

Teasers can have a pretitle

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This version has no style selections applied, and the layout system is forcing two teasers side by side.

Futuristic spartan soldiers ready for action

"Card" class for Teaser Components Without Images

With Pretitle

Pattern Library

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

Container Components

The Core "Container" component allows for the creation of logical page sections which house nested components. Container sections are combined to build up pages, while providing functionality such as content alignment, background coloring, and background imagery.

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This is often times referred to as a "Card", "Highlight", or "Teaser" in design systems.

"Card" class for Teaser Components With 1:1 Square Image

With Pretitle

Pattern Library

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

Futuristic spartan soldiers ready for action

Container Components

The Core "Container" component allows for the creation of logical page sections which house nested components. Container sections are combined to build up pages, while providing functionality such as content alignment, background coloring, and background imagery.
Futuristic spartan soldiers ready for action

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This is often times referred to as a "Card", "Highlight", or "Teaser" in design systems.
Futuristic spartan soldiers ready for action

"Card" class for Teaser Components With 2:3 Box Art Image

With Pretitle

Pattern Library

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

Futuristic spartan soldiers ready for action

Container Components

The Core "Container" component allows for the creation of logical page sections which house nested components. Container sections are combined to build up pages, while providing functionality such as content alignment, background coloring, and background imagery.
Futuristic spartan soldiers ready for action

Teaser Components

The Core "Teaser" Component can show an image, a title, rich-text, and optionally link to further content. This is often times referred to as a "Card", "Highlight", or "Teaser" in design systems.
Futuristic spartan soldiers ready for action

Teaser Components + Image Alignment

Default Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Pretitle

Explicit Right Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Pretitle

Explicit Left Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Pretitle

Left Image

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Pretitle

Right Image

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Teaser Components + Image Alignment (1:1)

Default Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Squre + Right Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Squre + Left Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Default Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Default Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Teaser Components + Image Alignment (2:3)

Default Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

2:3 Right Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

2:3 Left Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Default Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Default Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Card Teaser Components + Image Alignment

Default Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Pretitle

Explicit Right Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Pretitle

Explicit Left Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Pretitle

Left Image

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Pretitle

Right Image

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Teaser Components + Image Alignment (1:1)

Default Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Squre + Right Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Squre + Left Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Default Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Default Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Card Teaser Components + Image Alignment (2:3)

Box Art Default Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Box Art + Right Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Box Art + Left Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Box Art + Left Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books

Box Art + Right Image Placement

The Pattern Library is a dumping ground for all sorts of components, their configurations, and demonstrations. This serves as a way to illustrate various patterns in content re-use.

A curved bookshelf featuring many unidentifiable books