ProductHead

The wrapping with paddings. Not responsive (so far), but can be dragged.

import ProductHead from '@semcore/ui/product-head';
<ProductHead />;

ProductHead.Row

The header is divided into lines with components. They are divided from each other with equal paddings – my={2}.

import ProductHead from '@semcore/ui/product-head';
<ProductHead.Row />;

ProductHead.Links

The component for setting the paddings between the links.

import ProductHead from '@semcore/ui/product-head';
<ProductHead.Links />;

ProductHead.Buttons

The component for setting the paddings between the buttons.

import ProductHead from '@semcore/ui/product-head';
<ProductHead.Buttons />;

Title

The header’ heading component

import { Title } from '@semcore/ui/product-head';
<Title />;

HeaderTitleProps

& {...}

Name	Type	Description
toolName	React.ReactNode	A tool name that appears as part of the header title

Info

The component for output of the information on the project and the global filters of the report. The information is divided with a vertical line.

import { Info } from '@semcore/ui/product-head';
<Info />;

Info.Item

One unit with the information on the project or global filter.

import { Info } from '@semcore/ui/product-head';
<Info.Item />;

InfoItemProps

& {...}

Name	Type	Description
label	React.ReactNode	A label content that appears before the main item content