BX Swiss Component Library

Typography

The majority of the text on the BX Swiss website is displayed in Helvetica if it’s present on the device of the user. If not the text will be displayed in Arial.

The larger headings are displayed in a custom font, Neue Haask Grotesk, which will be downloaded to the device of the user upon first visiting the BX Swiss website. If it fails to load it will try to fall back to Helvetica if available, otherwise if will fall back to Arial

Code examples will be shown in the default Monospace font of the user’s device.

<p>This is a paragraph. Off course, paragraphs <a href="#">can contain hyperlinks</a>. There is the possibility to place an <q>inline quotation</q>. <small>Smaller text is also possible.</small> You can also put <em>emphasis</em> on certein parts of the
    text.
    <p>

        <h1>This is the first heading</h1>

        <h2>This is the second heading</h2>

        <h3>This is the third heading</h3>

        <h4>This is the fourth heading</h4>

        <h5>This is the fifth heading</h5>

        <h6>This is the sixth heading</h6>

        <blockquote>This is a blockquote</blockquote>

        <code>This is a code block</code>

        <hr>
 
<p>This is a paragraph. Off course, paragraphs <a href="#">can contain hyperlinks</a>. There is the possibility to place an <q>inline quotation</q>. <small>Smaller text is also possible.</small> You can also put <em>emphasis</em> on certein parts of the text.<p>

<h1>This is the first heading</h1>

<h2>This is the second heading</h2>

<h3>This is the third heading</h3>

<h4>This is the fourth heading</h4>

<h5>This is the fifth heading</h5>

<h6>This is the sixth heading</h6>

<blockquote>This is a blockquote</blockquote>

<code>This is a code block</code>

<hr>
 
/* No context defined for this component. */