New This website is new, your feedback will help us to improve it.

Lists

Lists

The BAS Style Kit inherits the layout features provided by Tailwind.

Unordered list

  • High Frequency (HF) — Field radios
  • VHF Radio (marine band - FM) — Base station and handheld mobile units
  • VHF Radio (aeronautical band - AM) — Base station and handheld mobile units
  • Iridium satellite system — Base station and handheld mobile units
  • Very Small Aperture Terminal (VSAT) Satellite system (main communication system)
  • Voice over IP (VoIP) Telephone system
<ul>
  <li>High Frequency (HF) &mdash; Field radios</li>
  <li>VHF Radio (marine band - FM) &mdash; Base station and handheld mobile units</li>
  <li>VHF Radio (aeronautical band - AM) &mdash; Base station and handheld mobile units</li>
  <li>Iridium satellite system &mdash; Base station and handheld mobile units</li>
  <li>Very Small Aperture Terminal (VSAT) Satellite system (main communication system)</li>
  <li>Voice over IP (VoIP) Telephone system</li>
</ul>

Ordered list

  1. check eligibility and requirements
  2. submit a Preliminary request for Antarctic logistic support
  3. submit a funding proposal - Deadline 19th July 2016 16:00 BST
<ol>
  <li>check eligibility and requirements</li>
  <li>submit a Preliminary request for Antarctic logistic support</li>
  <li>submit a funding proposal - Deadline <strong>19th July 2016 16:00 BST</strong></li>
</ol>

Unstyled list

Use the .list-unstyled class to remove the default list-style and margin left margin. Useful for things which semantically are lists, but shouldn't be styled as such.

This only applies to immediate list items. I.e. this style won't be used by any nested lists.

  • unstyled list item
  • unstyled list item
    1. not an unstyled ordered list item
    2. not an unstyled ordered list item
    • not an unstyled unordered list item
    • not an unstyled unordered list item
  • 2012 — Present: Head of Information Services (Band 4), BAS
  • 2006 — 2012: Senior Geoscience Data Manager (Band 5), BAS
  • 2002 — 2006: Geology Data Manager (Band 6), BAS
<ul class="list-unstyled">
<li>unstyled list item</li>
<li>unstyled list item</li>
<li>
  <ol>
    <li>not an unstyled ordered list item</li>
    <li>not an unstyled ordered list item</li>
  </ol>
</li>
<li>
  <ul>
    <li>not an unstyled unordered list item</li>
    <li>not an unstyled unordered list item</li>
  </ul>
</li>
</ul>

<ul class="list-unstyled">
  <li>2012 &mdash; Present: Head of Information Services (Band 4), BAS</li>
  <li>2006 &mdash; 2012: Senior Geoscience Data Manager (Band 5), BAS</li>
  <li>2002 &mdash; 2006: Geology Data Manager (Band 6), BAS</li>
</ul>

Inline list

Use the .list-inline class to place all list items on a single line.

  • Information Services
  • Polar Data Centre
  • MAGIC
<ul class="flex space-x-6 list-inline">
  <li>Information Services</li>
  <li>Polar Data Centre</li>
  <li>MAGIC</li>
</ul>

Definition list

A list of terms with associated definitions.

HF
High Frequency
VFH Radio
Very High Frequency Radio
VSAT
Very Small Aperture Terminal
VoIP
Voice over IP
<dl>
  <dt><b>HF</b></dt>
  <dd>High Frequency</dd>
  <dt><b>VFH Radio</b></dt>
  <dd>Very High Frequency Radio</dd>
  <dt><b>VSAT</b></dt>
  <dd>Very Small Aperture Terminal</dd>
  <dt><b>VoIP</b></dt>
  <dd>Voice over IP</dd>
</dl>

Horizontal definition list

Add the .dl-horizontal class combined with display and spacing classes to show terms and definitions side-by-side (or stacked at smaller sizes).

HF
High Frequency
VFH Radio
Very High Frequency Radio
VSAT
Very Small Aperture Terminal
VoIP
Voice over IP
<dl class="dl-horizontal grid grid-cols-[auto_1fr] gap-x-4 gap-y-2">
  <dt><b>HF</b></dt>
  <dd>High Frequency</dd>
  <dt><b>VFH Radio</b></dt>
  <dd>Very High Frequency Radio</dd>
  <dt><b>VSAT</b></dt>
  <dd>Very Small Aperture Terminal</dd>
  <dt><b>VoIP</b></dt>
  <dd>Voice over IP</dd>
</dl>

Large definition list

Add the .dl-lg class to apply additional padding.

HF
High Frequency
VFH Radio
Very High Frequency Radio
VSAT
Very Small Aperture Terminal
VoIP
Voice over IP
<dl class="dl-lg">
  <dt><b>HF</b></dt>
  <dd>High Frequency</dd>
  <dt><b>VFH Radio</b></dt>
  <dd>Very High Frequency Radio</dd>
  <dt><b>VSAT</b></dt>
  <dd>Very Small Aperture Terminal</dd>
  <dt><b>VoIP</b></dt>
  <dd>Voice over IP</dd>
</dl>

Large horizontal definition list

Use the .dl-lg class and the .dl-horizontal class, combined with Tailwind CSS 4 classes for a large horizontal defintion list.

HF
High Frequency
VFH Radio
Very High Frequency Radio
VSAT
Very Small Aperture Terminal
VoIP
Voice over IP
<dl class="dl-lg dl-horizontal grid grid-cols-[auto_1fr] gap-x-2 gap-y-2">
  <dt><b>HF</b></dt>
  <dd>High Frequency</dd>
  <dt><b>VFH Radio</b></dt>
  <dd>Very High Frequency Radio</dd>
  <dt><b>VSAT</b></dt>
  <dd>Very Small Aperture Terminal</dd>
  <dt><b>VoIP</b></dt>
  <dd>Voice over IP</dd>
</dl>

Striped definition list

Add .dl-striped to apply additional styling to terms.

HF
High Frequency
VFH Radio
Very High Frequency Radio
VSAT
Very Small Aperture Terminal
VoIP
Voice over IP
<dl class="dl-striped">
  <dt><b>HF</b></dt>
  <dd>High Frequency</dd>
  <dt><b>VFH Radio</b></dt>
  <dd>Very High Frequency Radio</dd>
  <dt><b>VSAT</b></dt>
  <dd>Very Small Aperture Terminal</dd>
  <dt><b>VoIP</b></dt>
  <dd>Voice over IP</dd>
</dl>

Striped horizontal definition list

The .dl-striped class can be combined with .dl-horizontal, or .dl-lg.

HF
High Frequency
VFH Radio
Very High Frequency Radio
VSAT
Very Small Aperture Terminal
VoIP
Voice over IP
<dl class="dl-lg dl-horizontal dl-striped grid grid-cols-[auto_1fr] gap-x-2 gap-y-2">
  <dt><b>HF</b></dt>
  <dd>High Frequency</dd>
  <dt><b>VFH Radio</b></dt>
  <dd>Very High Frequency Radio</dd>
  <dt><b>VSAT</b></dt>
  <dd>Very Small Aperture Terminal</dd>
  <dt><b>VoIP</b></dt>
  <dd>Voice over IP</dd>
</dl>