Meta Pattern

Meta is a definition list inside a wrapper div. We use meta in places such as the start of a work, a series listing, or a user profile. It shows metadata: all the tags, associations, and stats we hold on that object. Sometimes it includes a brief note, but normally it’s tags and stats and status type data.

Meta is part of the group supertype and is styled in 12-group-meta.css.

Table of contents

Rules

Meta is one of our simplest design patterns and has few rules.

  • Meta is always a definition list (<dl>)
  • Meta is always wrapped in <div class="wrapper">

The child <dd> elements may contain anything, but they normally contain dates and times, lists of tags, lists of mods or owners or other associations like Part X of Series Y, and a stats block (which always comes at the end!).

Quick reference

[...]
always included
{...}
sometimes included
[div wrapper]
  [dl meta]
    [dt {tag class}]
    [dd] {ul tags} [/dd]
    [dt]
    [dd] {blockquote userstuff} [/dd]
    {dt stats}
    {dd stats} [dl stats] [dt] [dd] [/dl] {/dd}
  [/dl]
[/wrapper]

HTML diagram

The work header is the most familiar example of the meta pattern.

  1. <div class="wrapper">
    1. <dl class="work meta group">
      1. <dt class="rating tags">
      2. <dd class="rating tags">
      3. <dt class="warning tags">
      4. <dd class="warning tags">
      5. ...
      6. <dt class="stats">
      7. <dd class="stats">
        1. <dl class="stats">
          1. ...