BX Swiss Component Library

Box: Highlight

The box component is used to visually seperate a content section from other sections on a page and to create a visual hierarchy of the content.

Default

By default the box component has a thick border. It’s mainly used to indicate a section on a page and may contain nested boxes with the box–minimal class.

Box Minimal

A minimal box has a thin border and is usually nested within a box component.

Anchor Box

When the box class is applied to a link element, the border and text color will change to the main brand color, indicating that this element can be clicked.

<div class="box box--highlight">
    Additional details (will not be published)
</div>
 
<{{#if hasAnchor}}a href="#"{{else}}div{{/if}} class="box {{modifier}}">
   {{label}}
</{{#if hasAnchor}}a{{else}}div{{/if}}>
 
{
  "label": "Additional details (will not be published)",
  "modifier": "box--highlight"
}