BX Swiss Component Library

Instrument: Default

Default

The instrument component contains a summary of instrument and its details. Through the use of JavaScript it can be enhanced to show live performance updates.

Suspended

Suspended instruments should be easy to recognize in a list of instruments. Adding the is-suspended class will display the instrument in a muted fashion that sets them apart from active instruments.

<div class="instrument ">
    <div class="instrument__wrapper">
        <div class="instrument__header">
            <a href="#">
                <span class="label">Fund</span>
                <span class="heading heading--small heading--compact">
                    XDND IE00BH361H73
                </span>
                <svg viewBox="0 0 24 24" class="icon icon--s ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#bx-swiss"></use>
	</svg> listed on BX Swiss
                <h2 class="heading heading--large">
                    C.FD.S.-DB-X-TR.MS.N.AM.H.Y.I. REGISTERED SHARES 1C O.N.
                </h2>
            </a>
        </div>
        <div class="instrument__meta">
            <a href="#"><svg viewBox="0 0 24 24" class="icon icon--s ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#follow"></use>
	</svg></a>
            <svg viewBox="0 0 24 24" class="icon icon--s ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#up"></use>
	</svg> <span class="heading ">
    0.54%
</span>

        </div>
    </div>
    <div class="instrument__wrapper">
        <div class="instrument__meta">
            <span class="heading heading--small">
                Bid
            </span>
            <span class="small">CHF</span>
            <span class="heading ">
                29.880
            </span>
        </div>
        <div class="instrument__meta">
            <span class="heading heading--small">
                Ask
            </span>
            <span class="small">CHF</span>
            <span class="heading ">
                30.170
            </span>
        </div>
        <div class="instrument__meta">
            <span class="heading heading--small">
                NAV
            </span>
            <span class="small">CHF</span>
            <span class="heading ">
                -
            </span>
        </div>
        <div class="instrument__meta">
            <span class="heading heading--small">
                TER
            </span>
            <span class="small">CHF</span>
            <span class="heading ">
                -%
            </span>
        </div>
    </div>
</div>
 
<div class="instrument {{modifier}}">
    <div class="instrument__wrapper">
        <div class="instrument__header">
            <a href="#">
                {{> "@label" text="Fund"}}
                {{> "@heading" label=symbol modifier="heading--small heading--compact" tagName="span"}}
                {{{icon "bx-swiss"}}} listed on BX Swiss
                {{> "@heading" label=title modifier="heading--large" tagName="h2"}}
            </a>
        </div>
        <div class="instrument__meta">
            <a href="#">{{{icon 'follow'}}}</a>
            {{{icon 'up'}}} {{> "@heading" label="0.54%" tagName="span"}}
        </div>
    </div>
    <div class="instrument__wrapper">
        <div class="instrument__meta">
            {{> "@heading" label="Bid" modifier="heading--small" tagName="span"}}
            <span class="small">CHF</span>
            {{> "@heading" label="29.880" tagName="span"}}
        </div>
        <div class="instrument__meta">
            {{> "@heading" label="Ask" modifier="heading--small" tagName="span"}}
            <span class="small">CHF</span>
            {{> "@heading" label="30.170" tagName="span"}}
        </div>
        <div class="instrument__meta">
            {{> "@heading" label="NAV" modifier="heading--small" tagName="span"}}
            <span class="small">CHF</span>
            {{> "@heading" label="-" tagName="span"}}
        </div>
        <div class="instrument__meta">
            {{> "@heading" label="TER" modifier="heading--small" tagName="span"}}
            <span class="small">CHF</span>
            {{> "@heading" label="-%" tagName="span"}}
        </div>
    </div>
    {{#if isSuspended}}
        <div class="text-bold">
            {{{icon "suspended"}}} Instrument Suspended 09:00:03 CET
        </div>
    {{/if}}
</div>
 
{
  "title": "C.FD.S.-DB-X-TR.MS.N.AM.H.Y.I. REGISTERED SHARES 1C O.N.",
  "symbol": "XDND IE00BH361H73"
}