Banner - Canvas Design System

When to Use

Use Banner when: Site-wide announcements, promotions, new feature launches, or time-limited notices that should appear at the very top of a page.

Don't use when: Inline feedback or status messages — use Alert instead. Landing page headers — use Hero instead.

Variants

Five colour variants for different contexts.

<?= ws_banner('Default announcement.') ?>
<?= ws_banner('Brand message!', ['variant' => 'brand', 'icon' => 'auto_awesome']) ?>
<?= ws_banner('Success message.', ['variant' => 'success', 'icon' => 'check_circle']) ?>
<?= ws_banner('Warning message.', ['variant' => 'warning', 'icon' => 'schedule']) ?>
<?= ws_banner('Dark banner.', ['variant' => 'dark', 'icon' => 'local_offer']) ?>

With Action

Add an action link to direct users somewhere.

<?= ws_banner('New feature announcement.', [
    'variant' => 'brand',
    'icon' => 'slideshow',
    'action' => 'Try it now',
    'href' => '/planner/',
]) ?>

Dismissible

Add a close button so users can dismiss the banner.

<?= ws_banner('Dismissible banner.', [
    'variant' => 'warning',
    'icon' => 'construction',
    'dismissible' => true,
]) ?>

Left Aligned

Set centered to false for left-aligned text.

<?= ws_banner('Left-aligned banner.', [
    'centered' => false,
    'action' => 'Learn more',
    'href' => '/docs/',
]) ?>

Parameters

Parameter	Type	Default	Description
`$message`	string	—	Banner text (supports inline HTML)
`variant`	string	`'default'`	`default` \| `brand` \| `success` \| `warning` \| `dark`
`icon`	string	`''`	Material icon name
`action`	string	`''`	Action link text
`href`	string	`'#'`	Action link URL
`onclick`	string	`''`	JS onclick handler for the action
`dismissible`	bool	`false`	Show close button
`centered`	bool	`true`	Center-align content
`id`	string	`''`	Element ID
`class`	string	`''`	Additional CSS classes

Anatomy

.ws-banner — Outer wrapper with background colour

.ws-banner__inner — Centred flex container (max-width 1200px)

.ws-banner__icon — Optional leading icon

.ws-banner__message — Text content

.ws-banner__action — Optional CTA link with arrow

.ws-banner__close — Optional dismiss button

CSS Classes

Class	Purpose
`.ws-banner`	Base wrapper
`.ws-banner--default`	Light neutral background
`.ws-banner--brand`	Brand gradient background
`.ws-banner--success`	Green tint background
`.ws-banner--warning`	Amber tint background
`.ws-banner--dark`	Dark background
`.ws-banner--centered`	Centre-align inner content

Files

File	Purpose
`includes/components/helpers.php`	`ws_banner()` helper function
`includes/components/banner.php`	Banner template
`includes/components/components.css`	Banner CSS