Page Title

Pattern

The Page Title pattern contains breadcrumbs, the title of the page and action bar components. These provide users with a comprehensive and intuitive navigation experience.

Breadcrumbs serve as a roadmap, guiding users through the hierarchical structure of the website or application, allowing them to easily backtrack or explore related content.

The Page Title provides a clear and concise summary of the page’s purpose or content, helping users quickly understand the context without the need for extensive exploration.

Furthermore, the inclusion of action bar components allows users to effectively interact with the page. Whether it’s through buttons for common actions, drop-down menus for sorting or filtering options.

• A: Desktop Variation;

• B: Tablet Variation;

• C: Mobile Variation;

• 1: Breadcrumbs;

• 2: Page Title;

• 3: Action Bar;

Used for:

Views with lists

When the user is in a list view with a dedicated page and actions, the Page Title pattern should be used.

Forms

When a user is inside a form with a dedicated page and actions, the Page Title pattern should be used.

Reports

When the user is inside a report view within a dedicated page and actions, the Page Title pattern should be used.

Don’t use for:

Dashboards

In the dashboard where no dedicated actions are available, the Page Title pattern should not be used.

Modals

In modals where the layout is managed differently, the Page Title pattern should not be used.

Flyouts

In flyouts where the layout is managed differently, the Page Title pattern should not be used.

Demo

Access the Figma file and inspect the element using Dev Mode.

What’s New

• Added device variations;
• Added pagination;

Related

Breadcrumbs

Breadcrumbs are a form of secondary navigation that display a series of links, showing users their current location within a …

Read More

Overflow Menu

An overflow menu is a UI component that houses secondary options or actions …

Read More

Buttons

Buttons are used to perform an action. Their labels tell the user what will happen when they interact with them …

Read More

Split button

A split button is a button with a main action and related secondary actions contained in a drop-down …

Read More

Variations

Desktop

.Desktop {
  background: var(--grey-1);
  bottom-stroke: var(--grey-5);
  breadcrumbs: var(--breadcrumbs-trimmed);
  pageTitle: var(--h6);
  pageTitle-icon: 20px;
  actionBar: var(--action-bar-desktop);
}

Tablet

.Tablet {
  background: var(--grey-1);
  bottom-stroke: var(--grey-5);
  pageTitle: var(--h6);
  pageTitle-icon: 20px;
  actionBar: var(--action-bar-tablet);
}

Mobile

.Mobile {
  background: var(--grey-1);
  bottom-stroke: var(--grey-5);
  pageTitle: var(--h6);
  pageTitle-icon: 20px;
  actionBar: var(--action-bar-mobile);
}

Size

Breadcrumbs on

.uniqueSize {
  height: 74px;
  padding: var(--spacement-8, --spacement-16);
  vertical-gap: var(--spacing-4);
  horizontal-gap: var(--spacing-16);
}

Breadcrumbs off

.uniqueSize {
  height: 52px;
  padding: var(--spacement-8, --spacement-16);
  vertical-gap: var(--spacing-4);
  horizontal-gap: var(--spacing-16);
}

Consult our Figma file to access our assets and inspect them in dev mode.

Figma Component

This component is or will be provided by the Polygon framework. See its documentation to learn more.

Polygon Framework

This element is in line with the guidelines of the CDS (Cegid Design System). Find out more.

Cegid DS

Behavior

Responsive

In order to maintain the best ratio and density of elements throughout the products, the three breakpoints present in our design system have their own specific variation, adapting the content showed.

Dos & Dont’s

Case Studies

Building a new Seamless User Experience

Using a design system is like having a set of building blocks for creating digital products. It ensures everything looks …

Read More

Discover the exciting features

Compose Design brings a host of thrilling and transformative new features designed to enhance your experience. Dive into our latest …

Read More

Benefits of a Design System

A design system is a collection of reusable components and guidelines that ensure consistency and efficiency in building digital products …

Read More