ProductHead

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.

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.

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

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

• 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.

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

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.

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