Classification banner

Skip to page content

Show navigation section

Component demo

Interactive example

Web component

React

Show full code

<ic-classification-banner></ic-classification-banner>
<ic-classification-bannerclassification="official"></ic-classification-banner>
<ic-classification-bannerclassification="official-sensitive"></ic-classification-banner>
<ic-classification-bannerclassification="secret"></ic-classification-banner>
<ic-classification-bannerclassification="top-secret"></ic-classification-banner>

<IcClassificationBannerinline/>
<IcClassificationBannerclassification="official"/>
<IcClassificationBannerclassification="official-sensitive"/>
<IcClassificationBannerclassification="secret"/>
<IcClassificationBannerclassification="top-secret"/>

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name	Description	Default
Property additionalSelectors Attribute additional-selectors	The additional information that will be displayed after the classification. type: string - string \| undefined	""
Property classification Attribute classification	The classification level to be displayed - also determines the banner and text colour. type: IcProtectiveMarkings - "default" \| "official" \| "official-sensitive" \| "secret" \| "top-secret" \| undefined	"default"
Property country Attribute country	The optional text that will be displayed before classification to specify relevant country/countries. type: string - string \| undefined	"uk"
Property inline Attribute inline	If`true` , the banner will appear inline with the page, instead of sticking to the bottom of the page. type: boolean - boolean \| undefined	false
Property upTo Attribute up-to	If`true` , "Up to" will be displayed before the classification and country. type: boolean - boolean \| undefined	false

Property

additionalSelectors

Attribute

additional-selectors

The additional information that will be displayed after the classification.

type: string - string | undefined

Default: ""

Property

classification

Attribute

classification

The classification level to be displayed - also determines the banner and text colour.

Default: "default"

Property

country

Attribute

country

The optional text that will be displayed before classification to specify relevant country/countries.

type: string - string | undefined

Default: "uk"

Property

inline

Attribute

inline

Iftrue , the banner will appear inline with the page, instead of sticking to the bottom of the page.

type: boolean - boolean | undefined

Default: false

Property

upTo

Attribute

up-to

Iftrue , "Up to" will be displayed before the classification and country.

type: boolean - boolean | undefined

Default: false

CSS Custom Properties

Name	Description
--ic-z-index-classification-banner	z-index of classification banner

--ic-z-index-classification-banner z-index of classification banner

Variants

Up to, country and additional selectors

Interactive example

Web component

React

Show full code

<ic-classification-banner
classification="official"
up-to="true"country="us"
additional-selectors="ukic"
></ic-classification-banner>

<IcClassificationBanner
classification="official"
upTo="true"
country="us"
additionalSelectors="ukic"
/>

Last reviewed 31 May 2024 .