BX Swiss Component Library

Home Header

The home-header component is only used on the homepage of the BX Swiss website.

<div class="container">
    <div class="home-header">
        <div class="grid">
            <div class="cell cell--1 cell--small-1/2">
                <div class="box">
                    <h1 class="heading heading--huge">
                        Worldwide trade
                    </h1>
                </div>

            </div>
            <div class="cell cell--1 cell--small-1/2 cell--large-1/4">
                <a href="#" class="box">
                    <h2 class="heading heading--large">
                        Trading 09:00 – 17:00 Swiss time
                    </h2>
                </a>
            </div>
            <div class="cell cell--1 cell--small-1/2 cell--large-1/4">
                <a href="#" class="box">
                    <span class="heading heading--large">
                        1’223
                    </span>
                    <span class="heading ">
                        Shares
                    </span>
                </a>

                <a href="#" class="box box--minimal">
                    <span class="heading heading--large">
                        463
                    </span>
                    <span class="heading ">
                        Funds
                    </span>
                </a>
            </div>
        </div>
    </div>
</div>
 
<div class="container">
    <div class="home-header">
        <div class="grid">
            <div class="cell cell--1 cell--small-1/2">
                <div class="box">
                    {{> "@heading" label="Worldwide trade" modifier="heading--huge" }}
                </div>

            </div>
            <div class="cell cell--1 cell--small-1/2 cell--large-1/4">
                <a href="#" class="box">
                    {{> "@heading" tagName="h2" label="Trading 09:00 – 17:00 Swiss time" modifier="heading--large" }}
                </a>
            </div>
            <div class="cell cell--1 cell--small-1/2 cell--large-1/4">
                <a href="#" class="box">
                    {{> "@heading" tagName="span" label="1’223" modifier="heading--large" }}
                    {{> "@heading" tagName="span" label="Shares" }}
                </a>

                <a href="#" class="box box--minimal">
                    {{> "@heading" tagName="span" label="463" modifier="heading--large" }}
                    {{> "@heading" tagName="span" label="Funds" }}
                </a>
            </div>
        </div>
    </div>
</div>
 
/* No context defined for this component. */