How to build
a brochure site

This page showcases and documents the use of Vanilla framework to build a brochure site.

All the sections of the page should be implemented using one of the grid layouts demonstrated below. By default all content should be inside the containers that use 25% of the full width (3 columns out of 12 column grid on large screens) or multiplication of it.

The grid layout should also be responsive, making sure that relative size is preserved on medium screen as much as possible (for details check the individual documentation of each split). On small screens all columns should take whole width of the page and appear in sequence (as by default Vanilla behaviour).


In the sections below we demonstrate how to implement the available layouts using standard Vanilla grid.

50/50 split

Use 50/50 split for standard section with a heading and some content.

The 50/50 split should be preserved on large and medium screen sizes.


Become a customer

For enterprices to cover their Ubuntu estate - servers and workstations.
See Ubuntu Pro pricing

Free for personal use

Anyone can use Ubuntu Pro for free on up to 5 machines, or 50 if you are an officialUbuntu Community member.

Trial at no extra cost for existing Ubuntu Advantage customers

If you were an active customer before January 26th, 2023 you can try Ubuntu Pro for up to 1 year - until the end of your current contract. At the end of the trial, you can choose to upgrade to full Pro (at extra cost), or remain with your current plan.

25/25/50 split

Use 25/25/50 split on section with 3 columns where 2 columns have less content than the last large column.

On medium screens it becomes 2 rows of 50/50 + 100 split.

To achieve that use row--25-25-50 class name on the row and col on the column.


Derry Cheng
Product Manager for Compute Engine

“For the last decade, Google has partnered with Canonical to promote the adoption of open-source software.

By offering Ubuntu Pro on Google Compute Engine, together we help customers enhance the security and compliance for their production workloads.”

Robert Huber
Chief Security Officer

“Tenable and Canonical collaborate to provide timely, accurate and actionable vulnerability alerts.

Ubuntu Pro offers security patch assurance for a broad spectrum of open-source software. Together, we give customers a foundation for the trustworthy open source. ”

25/75 split

Use 25/75 split on sections with narrow first column (usually a heading) followed by large content area that isn't split into smaller columns.

On medium screens the 25/75 split is adjusted to be 33/66 (2 columns and 4 columns)

On small screens it becomes 2 rows of 100 + 100 split.

To achieve that use row--25-75 class name on the row and col on the columns.


Our mission

Seamless consumption of open source across the compute spectrum

Join an intense global mission - to deliver the world's best open source experience, from platform to platform.

25/75 split on large

Use the 25/75 split on large screens for sections with a narrow first column (usually a heading), followed by a large content area that can be split into smaller nested grid if needed.

On medium and small screens, columns will be stacked.

To achieve that, use the row--25-75-on-large class name on the row and col on the columns.

We’re Canonical




The future is already here, as open source. Canonical delivers it to the world. We play a critical role in broadening the benefits of open source to more people and more industries than ever before. This means bringing new work opportunities to people regardless of their location too.

(25)/75 offset split

Use (25)/75 split with offset when first column is empty and the rest of the content is to be aligned with other 75% section of the page.

To achieve that use row--25-75 class name and only one col child.


Company culture

We believe that talent is evenly distributed around the world.  Diversity is part of our strength. What unifies us isn’t our background,  it’s our mission to amplify open source.

25/25/25/25 split

Use 25/25/25/25 for a section with 4 columns split.

On medium screens it becomes 2 rows of 50/50 + 50/50 split.

To achieve that use row--25-25-25-25 on the row and col class names on all the columns.