BX Swiss Component Library

Box

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 ">
    Established in 1884, BX Swiss AG is a Swiss regulated stock exchange under the supervision of FINMA.
</div>
 
<{{#if hasAnchor}}a href="#"{{else}}div{{/if}} class="box {{modifier}}">
   {{label}}
</{{#if hasAnchor}}a{{else}}div{{/if}}>
 
{
  "label": "Established in 1884, BX Swiss AG is a Swiss regulated stock exchange under the supervision of FINMA."
}