Front End Help

Index Pattern

Index is a very general class of list. You’ll most often see it containing blurbs, or as the content in a listbox, but it isn’t restricted to those. Index has very few rules; it’s a flexible grouping class.

It doesn’t have its own style sheet, but index styles are declared in the style sheet named 10-types-groups.css.

HTML structure

An index can be any of the three kinds of HTML list.

  1. dl.index
  2. ol.index
  3. ul.index

You can never have any other kind of index.

dl.index

dl.index is sometimes used to display simple paired data (e.g. on a translated news post), but it more often functions as a sort of brief alternative to showing a full blurb (or a full list of blurbs).

Instead of displaying a full work blurb on a user’s related works or subscriptions page, we use a dl.index to provide basic information and options, and we do the same instead of displaying each individual request blurb on a user’s assignments page.

While it’s less work to display these shorter blurbs, Archive users frequently express a preference for more information rather than less, and it is not uncommon for us to switch from an abbreviated dl.index to an index with a full li.blurb.

XHTML diagram of dl.index

The following diagram is taken from the assignments page a user can access from their dashboard.

  1. <dl class="assignment index group">
    1. <dt>
      1. <a>Assignment link
    2. <dd>
      1. <ul class="actions" role="menu">
        1. <li>
          1. <a role="button">Fulfill
        2. <li>
          1. <a role="button">Default
    3. <dt>
      1. <a>Assignment link
    4. <dd>
      1. <a>Work link
      2. <dl class="stats">
        1. <dt>
        2. <dd>