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 stylesheet, but index styles are declared in the stylesheet named 10-types-groups.css. Index is part of the group supertype
Table of contents
HTML structure
An index can be any of the three kinds of HTML list.
- dl.index
- ol.index
- ul.index
You can never have any other kind of index.
HTML classes
An index usually has an object type class: work index group, assignment index group, reading index group.
These class names should almost always be singular. The main exception to this is tags: tags index group.
If you find a plural other than tags, it’s probably a mistake that needs to be corrected.
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. 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, 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.
HTML diagram of dl.index
The following diagram is taken from the assignments page a user can access from their dashboard.
-
<dl class="assignment index group">-
<dt>-
<a>Assignment link
-
-
<dd>-
<ul class="actions">-
<li>-
<a>Fulfill
-
-
<li>-
<a>Default
-
-
-
-
<dt>-
<a>Assignment link
-
-
<dd>-
<a>Work link -
<dl class="stats">-
<dt> -
<dd>
-
-
-
ol.index and ul.index
Refer to the Blurb Design Pattern page for a digram of an ol.index.