Full Width Example

This page demonstrates the use of the fullWidth: true parameter in the frontmatter. Unlike regular pages that have their content wrapped in a container with a maximum width of 1200px, this page’s content spans the full width of the browser window.

How to Implement Full Width

To make a page use the full width of the browser window, add the following parameter to the page’s frontmatter:

---
title: "Your Page Title"
description: "Your page description"
fullWidth: true
---

This parameter tells the template to render the page without the container that normally limits the content width.

When to Use Full Width

The full width layout is useful for:

1. Pages with large tables that need more horizontal space
2. Galleries or image collections that benefit from using the entire screen
3. Custom layouts where you want to control the width yourself
4. Data visualization or charts that need more space

Comparison

To see the difference, compare this page with the Design Components page, which uses the default container layout.

Example of Wide Content