BX Swiss Component Library

Sidebar

A sidebar shows additional content besides the main content of a page. Although the sidebar can be used with any content, it is mostly used for showing alerts and/or notifications.

The sidebar can be seen on the reporting tool section of the BX Swiss website.

<div class="sidebar">
    <div class="sidebar__identifier">Logged in as: 1234567 (VI Company)</div>

    <div class="sidebar__header">
        <div class="sidebar__title heading heading--huge">Alerts <span class="badge">1</span>
        </div>
        <div class="sidebar__timer">36m</div>
        <button class="sidebar__toggle"><svg viewBox="0 0 24 24" class="icon icon--m ">
		<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/icons/sprite.svg#collapse"></use>
	</svg></button>
    </div>

    <div class="sidebar__actions">
        <div class="field">
            <input id="field-id" type="checkbox" name="field-name">
            <label for="field-id" class="">Select all</label>
        </div>

        0 alerts selected:

        <button class="button button--ghost is-disabled">Confirm</button>
        <button class="button button--ghost is-disabled">Deny</button>
    </div>

    <form class="form">
        <ol class="unstyled">
            <li>
                <div class="box box--minimal sidebar__box">
                    <input id="field-id" type="checkbox" name="field-name">
                    <label for="field-id" class="text-muted">2 hours, 34 minutes ago</label>

                    <p class="text-bold">VI Company has marked you or your company as a counterparty in a two-sided trade</p>

                    NL0000009165 (Heineken NV)

                    <dl class="inline">
                        <dt>Report ID:</dt>
                        <dd>123</dd>
                        <dt>Buy:</dt>
                        <dd>99 pieces</dd>
                        <dt>CHF:</dt>
                        <dd>100</dd>
                    </dl>

                    <div class="form__action">
                        <button class="button button--primary">Confirm</button>
                        <button class="button button--primary">Deny</button> &nbsp; (36 min. left)
                    </div>
                </div>
            </li>
        </ol>
    </form>
</div>
 
<div class="sidebar">
    <div class="sidebar__identifier">Logged in as: 1234567 (VI Company)</div>

    <div class="sidebar__header">
        <div class="sidebar__title heading heading--huge">Alerts {{> "@badge" label="1"}}</div>
        <div class="sidebar__timer">36m</div>
        <button class="sidebar__toggle">{{{icon "collapse" size="m"}}}</button>
    </div>


    <div class="sidebar__actions">
        <div class="field">
	        {{> @input type="checkbox"}}
	        {{> @form-label text="Select all"}}
        </div>

        0 alerts selected:

        {{> @button modifier="button--ghost is-disabled" label="Confirm"}}
        {{> @button modifier="button--ghost is-disabled" label="Deny"}}
    </div>

    <form class="form">
        <ol class="unstyled">
            <li>
                <div class="box box--minimal sidebar__box">
                    {{> @input type="checkbox"}}
                    {{> @form-label text="2 hours, 34 minutes ago" class="text-muted"}}

                    <p class="text-bold">VI Company has marked you or your company as a counterparty in a two-sided trade</p>

                    NL0000009165 (Heineken NV)

                    <dl class="inline">
                        <dt>Report ID:</dt>
                        <dd>123</dd>
                        <dt>Buy:</dt>
                        <dd>99 pieces</dd>
                        <dt>CHF:</dt>
                        <dd>100</dd>
                    </dl>

                    <div class="form__action">
                        {{> @button modifier="button--primary" label="Confirm"}}
                        {{> @button modifier="button--primary" label="Deny"}}
                        &nbsp; (36 min. left)
                    </div>
                </div>
            </li>
        </ol>
    </form>
</div>
 
/* No context defined for this component. */