Layout
Page Header

Page Header

Page header with optional elements for high-level information about the subject of the page or actions for the page.

Usage

import { PageHeader } from "@skyltmax/ds9"

Examples

Basic

Simple title with a border separating from the rest of the page.

Signs

Code

Subtitle

Additional subtitle to explain the page.

Signs

Manage signs displayed on product pages.

Code

Actions

Actions applicable to the whole page.

Signs

Manage signs displayed on product pages.

Code

Menu

Menu that aligns nicely to the title.

Signs

Manage signs displayed on product pages.

Code

Details

Display detail lists relating to the object of the page.

12341

Item number
B00123
Locale
sv-SE
Orders
12
Products
5
Creator
S
Skellyton
Age
-
Code

Nav Links

Display navigation tabs along the bottom edge with active indicator.

Signs

Code

Back Link

Display back link that points to a page of your choosing.

The link can read state from browser history API so you are able to pass params to the link from the previous page by using the state prop on React Router Link components.

Signs

← Back
Code

Decoration

Show a badge or some other status indicator next to the title.

Signs
Unlisted

← Back
Code
IconsContainer