BX Swiss Component Library

Orderbook: Default

An order book is an electronic list of buy and sell orders for a specific security or financial instrument, organized by price level. The order book lists the number of shares being bid or offered at each price point, or market depth. The order book is is part of hte instrument detail page.

<div class="box">
    <h2>Order book</h2>
    <div class="grid">
        <div class="cell cell--1 cell--small-1/2 direction-rtl direction-rtl--small">
            <h3>Bids</h3>
            <div class="table-wrapper">
                <table>
                    <thead>
                        <tr>
                            <th class="direction-ltr text-right">Price</th>
                            <th class="direction-ltr text-right">Volume</th>
                            <th colspan="2">&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td class="direction-ltr text-right">16.06</td>
                            <td class="direction-ltr text-right">13&#x27;536</td>
                            <td class="text-right--small">
                                <svg height="8px" width="7%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td class="direction-ltr"></td>
                        </tr>
                        <tr>
                            <td class="direction-ltr text-right">16.05</td>
                            <td class="direction-ltr text-right">71&#x27;132</td>
                            <td class="text-right--small">
                                <svg height="8px" width="40%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td class="direction-ltr"></td>
                        </tr>
                        <tr>
                            <td class="direction-ltr text-right">16.04</td>
                            <td class="direction-ltr text-right">52&#x27;649</td>
                            <td class="text-right--small">
                                <svg height="8px" width="30%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td class="direction-ltr"> <span class="label">5</span></td>
                        </tr>
                        <tr>
                            <td class="direction-ltr text-right">16.03</td>
                            <td class="direction-ltr text-right">55&#x27;028</td>
                            <td class="text-right--small">
                                <svg height="8px" width="31%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td class="direction-ltr"></td>
                        </tr>
                        <tr>
                            <td class="direction-ltr text-right">16.02</td>
                            <td class="direction-ltr text-right">45&#x27;299</td>
                            <td class="text-right--small">
                                <svg height="8px" width="25%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td class="direction-ltr"></td>
                        </tr>
                        <tr>
                            <td class="direction-ltr text-right">16.01</td>
                            <td class="direction-ltr text-right">55&#x27;250</td>
                            <td class="text-right--small">
                                <svg height="8px" width="31%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td class="direction-ltr"></td>
                        </tr>
                        <tr>
                            <td class="direction-ltr text-right">16.00</td>
                            <td class="direction-ltr text-right">174&#x27;244</td>
                            <td class="text-right--small">
                                <svg height="8px" width="99%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td class="direction-ltr"></td>
                        </tr>
                        <tr>
                            <td class="direction-ltr text-right">15.99</td>
                            <td class="direction-ltr text-right">39&#x27;877</td>
                            <td class="text-right--small">
                                <svg height="8px" width="22%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td class="direction-ltr"></td>
                        </tr>
                        <tr>
                            <td class="direction-ltr text-right">15.98</td>
                            <td class="direction-ltr text-right">27&#x27;551</td>
                            <td class="text-right--small">
                                <svg height="8px" width="16%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td class="direction-ltr"></td>
                        </tr>
                        <tr>
                            <td class="direction-ltr text-right">15.97</td>
                            <td class="direction-ltr text-right">16&#x27;036</td>
                            <td class="text-right--small">
                                <svg height="8px" width="16%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td class="direction-ltr"></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="cell cell--1 cell--small-1/2">
            <h3>Asks</h3>
            <div class="table-wrapper">
                <table class="text-right">
                    <thead>
                        <tr>
                            <th>Price</th>
                            <th>Volume</th>
                            <th colspan="2">&nbsp;</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>16.07</td>
                            <td>14&#x27;408</td>
                            <td class="text-left">
                                <svg height="8px" width="8%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>16.08</td>
                            <td>53&#x27;000</td>
                            <td class="text-left">
                                <svg height="8px" width="30%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>16.09</td>
                            <td>44&#x27;637</td>
                            <td class="text-left">
                                <svg height="8px" width="26%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>16.10</td>
                            <td>51&#x27;532</td>
                            <td class="text-left">
                                <svg height="8px" width="29%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>16.11</td>
                            <td>49&#x27;766</td>
                            <td class="text-left">
                                <svg height="8px" width="28%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td> <span class="label">7</span></td>
                        </tr>
                        <tr>
                            <td>16.12</td>
                            <td>40&#x27;122</td>
                            <td class="text-left">
                                <svg height="8px" width="23%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>16.13</td>
                            <td>28&#x27;188</td>
                            <td class="text-left">
                                <svg height="8px" width="16%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>16.14</td>
                            <td>32&#x27;145</td>
                            <td class="text-left">
                                <svg height="8px" width="18%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>16.15</td>
                            <td>45&#x27;629</td>
                            <td class="text-left">
                                <svg height="8px" width="25%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td></td>
                        </tr>
                        <tr>
                            <td>16.16</td>
                            <td>17&#x27;947</td>
                            <td class="text-left">
                                <svg height="8px" width="10%" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
                            </td>
                            <td></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
 
<div class="box">
	<h2>{{ title }}</h2>
	<div class="grid">
		<div class="cell cell--1 cell--small-1/2 direction-rtl direction-rtl--small">
			<h3>{{ bidsTitle }}</h3>
			<div class="table-wrapper">
				<table>
					<thead>
						<tr>
							<th class="direction-ltr text-right">{{ price }}</th>
							<th class="direction-ltr text-right">{{ volume }}</th>
							<th colspan="2">&nbsp;</th>
						</tr>
					</thead>
					<tbody>
						{{#each buyOrder}}
						<tr>
							<td class="direction-ltr text-right">{{ this.price }}</td>
							<td class="direction-ltr text-right">{{ this.volume }}</td>
							<td class="text-right--small">
								<svg height="8px" width="{{ this.volumeWidth }}" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
							</td>
							<td class="direction-ltr">{{#if this.multipleOrders }} <span class="label">{{ this.numberOfOrders }}</span>{{/if}}</td>
						</tr>
						{{/each}}
					</tbody>
				</table>
			</div>
		</div>
		<div class="cell cell--1 cell--small-1/2">
			<h3>{{ asksTitle }}</h3>
			<div class="table-wrapper">
				<table class="text-right">
					<thead>
						<tr>
							<th>{{ price }}</th>
							<th>{{ volume }}</th>
							<th colspan="2">&nbsp;</th>
						</tr>
					</thead>
					<tbody>
						{{#each sellOrder}}
						<tr>
							<td>{{ this.price }}</td>
							<td>{{ this.volume }}</td>
							<td class="text-left">
								<svg height="8px" width="{{ this.volumeWidth }}" viewBox="0 0 1 1" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">
									<rect x="0" y="0" height="1" width="1" />
								</svg>
							</td>
							<td>{{#if this.multipleOrders }} <span class="label">{{ this.numberOfOrders }}</span>{{/if}}</td>
						</tr>
						{{/each}}
					</tbody>
				</table>
			</div>
		</div>
	</div>
</div>
 
{
  "title": "Order book",
  "latestPrice": {
    "key": "Latest price",
    "value": "16.06"
  },
  "latestVolume": {
    "key": "Latest volume",
    "value": "13'536"
  },
  "latestSpread": {
    "key": "Latest spread",
    "value": "-0.05"
  },
  "timeTraded": {
    "key": "Time traded",
    "value": "12:52:25"
  },
  "bidsTitle": "Bids",
  "asksTitle": "Asks",
  "time": "Time",
  "volume": "Volume",
  "price": "Price",
  "buyOrder": [
    {
      "price": "16.06",
      "volume": "13'536",
      "volumeWidth": "7%",
      "time": "12:52:53"
    },
    {
      "price": "16.05",
      "volume": "71'132",
      "volumeWidth": "40%",
      "time": "12:52:27"
    },
    {
      "multipleOrders": true,
      "price": "16.04",
      "volume": "52'649",
      "volumeWidth": "30%",
      "time": "12:52:28",
      "numberOfOrders": "5"
    },
    {
      "price": "16.03",
      "volume": "55'028",
      "volumeWidth": "31%",
      "time": "12:52:28"
    },
    {
      "price": "16.02",
      "volume": "45'299",
      "volumeWidth": "25%",
      "time": "12:52:54"
    },
    {
      "price": "16.01",
      "volume": "55'250",
      "volumeWidth": "31%",
      "time": "12:52:25"
    },
    {
      "price": "16.00",
      "volume": "174'244",
      "volumeWidth": "99%",
      "time": "12:40:55"
    },
    {
      "price": "15.99",
      "volume": "39'877",
      "volumeWidth": "22%",
      "time": "12:51:25"
    },
    {
      "price": "15.98",
      "volume": "27'551",
      "volumeWidth": "16%",
      "time": "12:42:35"
    },
    {
      "price": "15.97",
      "volume": "16'036",
      "volumeWidth": "16%",
      "time": "12:52:25"
    }
  ],
  "sellOrder": [
    {
      "price": "16.07",
      "volume": "14'408",
      "volumeWidth": "8%",
      "time": "12:52:25"
    },
    {
      "price": "16.08",
      "volume": "53'000",
      "volumeWidth": "30%",
      "time": "12:51:41"
    },
    {
      "price": "16.09",
      "volume": "44'637",
      "volumeWidth": "26%",
      "time": "12:51:23"
    },
    {
      "price": "16.10",
      "volume": "51'532",
      "volumeWidth": "29%",
      "time": "12:52:24"
    },
    {
      "multipleOrders": true,
      "price": "16.11",
      "volume": "49'766",
      "volumeWidth": "28%",
      "time": "12:52:54",
      "numberOfOrders": "7"
    },
    {
      "price": "16.12",
      "volume": "40'122",
      "volumeWidth": "23%",
      "time": "12:52:25"
    },
    {
      "price": "16.13",
      "volume": "28'188",
      "volumeWidth": "16%",
      "time": "12:46:55"
    },
    {
      "price": "16.14",
      "volume": "32'145",
      "volumeWidth": "18%",
      "time": "12:51:21"
    },
    {
      "price": "16.15",
      "volume": "45'629",
      "volumeWidth": "25%",
      "time": "12:51:21"
    },
    {
      "price": "16.16",
      "volume": "17'947",
      "volumeWidth": "10%",
      "time": "12:51:21"
    }
  ]
}