Skip to content




ProductHead is a composed component, which contains all common controls, CTA's and filters for filtering data in the product's reports.

It's always placed under the main Semrush header and searchbar.

Component composition

The report header includes the following:

  • breadcrumbs;
  • additional links, placed at the top right of the header;
  • name of the product and the project;
  • additional controls customizing the product or making any additional actions (placed at - the right on the level of the product name);
  • line with global filters and/or additional information.

Margins and paddings

If there is a Notice in the header, it has 8px margin-bottom to the elements in ProductHead.

Margins between the elements


  • Breadcrumbs and additional links are center aligned.
  • Links have 14px size.
  • The margin between the links is 20 px.

Heading and main controls

  • Heading, buttons and labels are center aligned regard to each other.
  • For title use text with 20px size (--fs-400, --lh-400).
  • For the text color use color: var(--text-primary), for project's name – color: var(--text-secondary).
  • The size of the nearby icons – M. For icon color use --icon-secondary-neutral token.
  • The icons are aligned by the title's basic line.
  • Button has M size.

Filters and/or additional information

  • All elements are center aligned.
  • For text use 14px size (--fs-200, --lh-200) and color: var(--text-primary) color.
  • Icons have M size.

ProductHead variants

Maximum set of elements inside

When the names of the domain and/or project are too long and don't fit in the intended place, collapse them into ellipsis. If you have controls on the right, add them a “protective” left margin of 24px.

Global filters or additional information

No global filters, additional information or tabs

In these cases the margin between the row with product's title and the TabLine/Divider is 16px.