Quote cards

by andrewdavey

HTML

<div class="rfq">RFQ R1234</div>
<div class="row row-space">
    <div class="block">B1001
        <div class="block__instrument">SELL ASX200 CALL 15MAY14 E 100 CSH</div>
        <div class="block__ref-price"><span class="block__info-title">Ref Price</span> 5,428.0000 AUD</div>
        <div class="block__ref-price"><span class="block__info-title">Contracts</span> 874</div>
        <div class="block__ref-price"><span class="block__info-title">Notional</span> 4,744,072.00 AUD</div>
    </div>
    <div class="card">
        <div class="status status--quoted">Quoted</div>
        <div class="quote"><span class="quote-type">BID</span> 1.2345%</div>
        <div class="valid-for">Valid for: 10m 19s</div>
    </div>
    <div class="card best">
        <div class="status status--quoted">Best Quote</div>
        <div class="quote"><span class="quote-type">BID</span> 1.2345%</div>
        <div class="valid-for">Valid for: 10m 19s</div>
    </div>
    <div class="card">
        <div class="status status--quoted">Quoted</div>
        <div class="quote"><span class="quote-type">BID</span> 1.2345%</div>
        <div class="valid-for">Valid for: 10m 19s</div>
    </div>
    <div class="card">
        <div class="status status--sent">Sent</div>
        <div class="sent-info">Sent at: 11:30</div>
    </div>
</div>
<div class="row">
    <div class="block">B1002<div class="block__instrument">BUY ASX200 PUT 15MAY14 E 100 CSH</div>
        <div class="block__ref-price"><span class="block__info-title">Ref Price</span> 5,428.0000 AUD</div>
        <div class="block__ref-price"><span class="block__info-title">Contracts</span> 874</div>
        <div class="block__ref-price"><span class="block__info-title">Notional</span> 4,744,072.00 AUD</div>
    </div>
    <div class="card">
        <div class="status status--quoted">Quoted</div>
        <div class="quote"><span class="quote-type">ASK</span> 1.3345%</div>
        <div class="valid-for">Valid for: 10m 19s</div>
    </div>
    <div...

CSS

@import url(//fonts.googleapis.com/css?family=Open+Sans:400,700);
 body {
    background-color: #eee;
    font-family:'Open Sans';
    font-size: 14px;
}
.rfq {
    background-color: #f8f8f8;
    padding: 5px 15px;
    margin-top: 20px;
}
.row {
    clear: left;
    height: 130px;
    width: 1280px;
    background-color: #f8f8f8;
    padding: 15px 0 5px;
    border-top: solid 2px #eee;
}
.block {
    float: left;
    width: 200px;
    height: 120px;
    margin: 0px 5px 0;
    background-color: #f8f8f8;
    cursor: pointer;
    box-sizing: border-box;
    padding: 8px 10px;
}
.block__instrument {
    font-size: .8em;
    font-weight: 700;
    margin: 7px 0 5px 0;
}
.block__ref-price {
    font-size: .8em;
}
.block__info-title {
    color: #888;
    width: 60px;
    display: inline-block
}
.card {
    float: left;
    width: 170px;
    height: 120px;
    background-color: white;
    border-radius: 1px;
    box-shadow: 1px 1px 4px #888;
    margin: 0 10px 0;
    cursor: pointer;
}
.best {
    background-color: rgb(250,255,250);
}
.status {
    font-size: 1em;
    padding: 5px 10px;
}
.status--sent {
    color: #888;
    border-top: solid 3px #888;
}
.status--quoted {
    color: rgb(0, 128, 0);
    border-top: solid 3px rgb(0, 128, 0);
}
.best .status--quoted {
    font-weight: bold;
}
.sent-info {
    padding: 5px 10px;
    color: #888;
    font-size: .75em;
}
.quote-type {
    color: #ccc;
}
.best .quote-type {
    color: #696;
}
.quote {
    font-size: 1.4em;
    padding: 0 10px 5px 10px;
    vertical-align: top;
}
.best .quote {
    color: #080;
}
.valid-for {
    font-size: .75em;
    padding: 10px;
    color: #888;
}