BX Swiss Component Library

Box: Anchor

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.

<a href="#" class="box ">
   Find instruments to add to the watchlist
</a>
 
<{{#if hasAnchor}}a href="#"{{else}}div{{/if}} class="box {{modifier}}">
   {{label}}
</{{#if hasAnchor}}a{{else}}div{{/if}}>
 
{
  "label": "Find instruments to add to the watchlist",
  "hasAnchor": true
}