BX Swiss Component Library

Latest Trade

There are no notes for this item.

<dl class="list-group list-group--dotted">
    <div class="grid">
        <div class="cell cell--1/2 cell--medium-1/4">
            <div class="box box--minimal">
                <dt>Latest price</dt>
                <dd class="heading heading--large heading--compact">16.06</dd>
            </div>
        </div>

        <div class="cell cell--1/2 cell--medium-1/4">
            <div class="box box--minimal">
                <dt>Latest volume</dt>
                <dd class="heading heading--large heading--compact">13&#x27;536</dd>
            </div>
        </div>

        <div class="cell cell--1/2 cell--medium-1/4">
            <div class="box box--minimal">
                <dt>Date traded</dt>
                <dd class="heading heading--large heading--compact">22-01-2018</dd>
            </div>
        </div>

        <div class="cell cell--1/2 cell--medium-1/4">
            <div class="box box--minimal">
                <dt>Time traded</dt>
                <dd class="heading heading--large heading--compact">12:52:25</dd>
            </div>
        </div>
    </div>
</dl>
 
<dl class="list-group list-group--dotted">
	<div class="grid">
		<div class="cell cell--1/2 cell--medium-1/4">
			<div class="box box--minimal">
				<dt>{{ latestPrice.key }}</dt>
				<dd class="heading heading--large heading--compact">{{ latestPrice.value }}</dd>
			</div>
		</div>

		<div class="cell cell--1/2 cell--medium-1/4">
			<div class="box box--minimal">
				<dt>{{ latestVolume.key }}</dt>
				<dd class="heading heading--large heading--compact">{{ latestVolume.value }}</dd>
			</div>
		</div>

		<div class="cell cell--1/2 cell--medium-1/4">
			<div class="box box--minimal">
				<dt>{{ dateTraded.key }}</dt>
				<dd class="heading heading--large heading--compact">{{ dateTraded.value }}</dd>
			</div>
		</div>

		<div class="cell cell--1/2 cell--medium-1/4">
			<div class="box box--minimal">
				<dt>{{ timeTraded.key }}</dt>
				<dd class="heading heading--large heading--compact">{{ timeTraded.value }}</dd>
			</div>
		</div>
	</div>
</dl>
 
{
  "title": "Order book",
  "latestPrice": {
    "key": "Latest price",
    "value": "16.06"
  },
  "latestVolume": {
    "key": "Latest volume",
    "value": "13'536"
  },
  "dateTraded": {
    "key": "Date traded",
    "value": "22-01-2018"
  },
  "timeTraded": {
    "key": "Time traded",
    "value": "12:52:25"
  },
  "bidsTitle": "Bids",
  "asksTitle": "Asks",
  "time": "Time",
  "volume": "Volume",
  "price": "Price"
}
  • Handle: @latest-trade
  • Preview:
  • Filesystem Path: Source\components\09-patterns\latest-trade\latest-trade.hbs