To maintain consistency across applications, use the following formats and guidelines.
time |
10:00 AM |
military time |
22:00:15 |
short date |
Jan 11 |
long date |
Apr 23, 2010 |
condensed long date |
MM/DD/YYYY, DD/MM/YYYY, or YYYY/MM/DD |
short date and time |
Feb 5, 8:00 AM |
long date and time |
Feb 8, 2014, 1:00 PM |
day of week and time |
Mon, 7:30 AM |
day of week, short date and time |
Mon, Mar 15, 3:25 PM |
The condensed version of the long date format has 3 variations:
MM/DD/YYYY (05/12/2015)DD/MM/YYYY (12/05/2015)YYYY/MM/DD (2015/12/05)MM/DD/YYYY is the format most used in the US, whereas DD/MM/YYYY is used most outside the US. Depending on the date, the format, and the geographical location or customs of the user, a date has the potential for being misinterpreted if the format is not what the user is expecting. The only non-ambiguous format is YYYY/MM/DD.
Depending on your target audience, determine which format makes the most sense for your application.
For dates/times associated with user generated data (e.g., notes, documents), use the smart format, which changes relative to the current date.
If the date is in the past or future on the current day, format as time only |
10:00 AM |
If the date is in the past or future within the current calendar year, format as short date |
Jan 11 |
If the date is in the past or future outside the current calendar year, format as long date |
Apr 23, 2010 |
| For reminders or appointments, show both time and date | Jun 8, 8:00 AM Today, 8:00 AM |
| Separate ranges with an en-dash without a space | Jun 15–Jun 16 Dec 20, 2014–Jan 2, 2015 |
| If a time range shares a common AM/PM, append only on the end of the range | 10:00–11:00 AM 10:00 AM–12:30 PM |
<ul>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3
<ul>
<li>Nested list item 1 </li>
<li>Nested list item 2 </li>
</ul>
</li>
</ul><ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3
<ol>
<li>Nested list item 1 </li>
<li>Nested list item 2 </li>
</ol>
</li>
</ol>The metadata pattern can be used for showing label/value pairs.
Do
# or number in labelsUseful for shorter labels/values.
<div class="row">
<div class="col-sm-4">
<dl>
<dt>BOL Type</dt>
<dd>B - Booking</dd>
<dt>MOT</dt>
<dd>11 - Vessel(Containerized)</dd>
<dt>Carrier</dt>
<dd>JONN</dd>
<dt>Conveyance</dt>
<dd>REG O BOL B2</dd>
<dt>Voyage/Trip/Flight</dt>
<dd>0512A000001</dd>
</dl>
</div>
<div class="col-sm-4">
<dt>Entry Number (Type)</dt>
<dd>BVA-01070040 (01)</dd>
<dt>Bill Number (Type)</dt>
<dd>JONN-150512MC0202 (B)</dd>
<dt>Entry Type/dt>
<dd>01 - Consumption: Free and Dutiable</dd>
<dt>Port of Entry</dt>
<dd>
<a href="">
5206 <i class="fa fa-external-link"></i>
</a>
</dd>
<dt>Importer</dt>
<dd>--</dd>
</div>
<div class="col-sm-4">
<dl>
<dt>Bond Type</dt>
<dd>9 - Single Transaction</dd>
<dt>Entry Filing Date</dt>
<dd>07/17/2015 13:40:22</dd>
<dt>Status</dt>
<dd>1</dd>
<dt>Shipment</dt>
<dd>
<a href="">
5004672569 <i class="fa fa-external-link"></i>
</a>
</dd>
</dl>
</div>
</div>Useful for longer labels/values.
<div class="row">
<div class="col-md-4">
<dl class="dl-horizontal">
<dt>BOL Type</dt>
<dd>B - Booking</dd>
<dt>MOT</dt>
<dd>11 - Vessel(Containerized)</dd>
<dt>Carrier</dt>
<dd>JONN</dd>
</dl>
</div>
<div class="col-md-4">
<dl class="dl-horizontal">
<dt>Entry Type (Type)</dt>
<dd>01 - Consumption: Free and Dutiable</dd>
<dt>Port of Entry</dt>
<dd>
<a href="">
5206
<i class="fa fa-external-link"></i>
</a>
</dd>
<dt>Importer</dt>
<dd>--</dd>
</dl>
</div>
<div class="col-md-4">
<dl class="dl-horizontal">
<dt>Bond Type</dt>
<dd>9 - Single Transaction</dd>
<dt>Entry Filing Date</dt>
<dd>07/17/2015 13:40:22</dd>
<dt>Conveyance</dt>
<dd>REG O BOL B2</dd>
<dt>Voyage/Trip/Flight</dt>
<dd>0512A000001</dd>
</dl>
</div>
</div>