Skip to content

Components: Banner

Andy Jones edited this page Jun 8, 2022 · 4 revisions

Banner

An orange panel which contains important content, displayed at the top of a content page.

Screenshot of the banner component

When to use it

When you need to display something important that the user needs to be aware of.

How to use it

Only use 1 per page and do not over-use it.

Place the code snippet immediately after the H1 of the page, leave an empty line before and after to improve readability of the code.

Code

The ruby extension accepts 2 parameters, title and content

<%= banner_panel("title","HTML content") %>

Example:

# The page title

<%= banner_panel("You'll be assessed on this", "You'll be asked to demonstrate how you meet this at <a href='#'>service assessments</a>") %>

The page body

When not to use it

  • Don't use for general content which doesn't bring importance to the page.
  • Don't repeat page content in the panel
  • Don't use it to display legal warning, use the warning component instead.