Title Wrappers

Learn about title wrappers, and how to best use them in the Base System

1.0 Title Wrappers

The Title Wrapper is a utility class used to wrap and style titles on a webpage. The primary purposes of a Title Wrapper are to apply consistent styling, enhance the visual hierarchy of your content, and ensure that titles are displayed prominently and attractively.

Browse the starting utility classes and their properties in the table below.

2.0 Title Center Classes

Explore the default classes and properties below. You can customize these to fit your needs or create a new custom class tailored to your style preferences.

Class Name	Flex	Max Width	Margin Bottom
Title Column Small	Vertical	580px	44px
Title Column Regular	Vertical	740px	62px
Title Column Large	Vertical	960px	92px
{Custom} Title Column	{Custom}	{Custom}	Auto

Containers are generally centered on the page and use a margin auto to position them in the middle of your web page.

3.0 General Usage

3.1 Element Type

Grid classes are applied to the Grid Element in Webflow, and are bundled with some simple styles for columns and column gap. These styles can be adjusted to suit your own requirements.

3.2 Class Naming

Class naming for spacing follows a similiar approach to other structure elements. You can learn more about the general philosophy of class naming here.

• Sections: Default sections use descriptive names based on the top and bottom padding.

  • Example: Grid One Column, Grid Three Column, Grid Five Column

• Custom Sections: Use section as a suffix to the parent category

  • Example: Testmonial Grid, Pricing Card Grid