Universal banner - carbon-design-system/carbon-for-ibm-dotcom-website GitHub Wiki

Core Layout component

A Universal banner is the only component allowed to show up above the Masthead, and should be used exclusively for global and critical announcements (e.g. THINK global event, COVID 19 messages etc).

There are a lot of similarities between this component and the Content group banner. Can these features be absorbed into that, or can Content group banner depend on this component or vice versa?

---

Table of contents

• 1. Image
• 2. Heading
• 3. Copy
• 4. CTA

Dependencies (3)

• Image
• CTA
• Markdown utility

Resources

• r1: Box folder

---

	condition	description
0.0.1	content overflows	If the content extends beyond the component's fixed height than the content should be cut off.
0.0.2	@sm	Entire banner becomes clickable.

optional component

An optional Image component at various sizes.

	condition	description
1.0.1	@sm @md	Image is hidden

	name	description
1.1.1	md	4 columns	default
1.1.2	lg	8 columns

See Image for more information.

Back to top

optional string

An optional String of text that indicates the main point of the banner.

See design specs ^r1 for changes.

Back to top

optional markdown

An optional String of text formatted using Markdown utility with a limited scope.

All other options should be ignored.

	props	description
3.0.1	*italic*	The italic option should be included.
3.0.2	**bold**	The bold option should be included.
3.0.3	<p>new line</p>	The new line paragraph feature should be included.

See Markdown utility for more information.

See design specs ^r1 for changes.

Back to top

optional component

An optional CTA that helps navigate users to more information about this notice.

	props	values
4.0.1	type	local
4.0.2	style	See logic below

	condition	description
4.0.3	@sm	CTA style is text
4.0.4	@md @lg @xlg @max	CTA style is button tertiary

See CTA for more information.

Back to top