Universal banner

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

---

Logic

	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.

1. Image

optional component

An optional Image component at various sizes.

Logic

	condition	description
1.0.1	@sm @md	Image is hidden

Sizes

	name	description
1.1.1	md	4 columns	default
1.1.2	lg	8 columns

See Image for more information.

Back to top

2. Heading

optional string

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

See design specs ^r1 for changes.

Back to top

3. Copy

optional markdown

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

Only include

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

4. CTA

optional component

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

Properties and values

	props	values
4.0.1	type	local
4.0.2	style	See logic below

Logic

	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