Design Pattern: meta

Meta is a definition list in a wrapper div. We use meta at the start of a work, a series listing, a user profile or collection or prompt. 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.

The present meta style is declared in meta.css. It's a group

meta HTML Structure

Quick Ref: [always] {sometimes}

[div wrapper]
  [dl meta]
    [dt {tag class}]
    [dd] {ul tags} [/dd]
    [dd] {blockquote userstuff} [/dd]
    {dt stats}
    {dd stats} [dl stats] [dt] [dd] [/dl] [div clear] {/dd}


Meta is always a dl wrapped in a div.

You can never have any other kind of meta.

The dds may contain anything, but normally contains dates and times, lists of tags, lists of mods or owners or other associations like Part X of Series Y, and a stats block at the end. Stats always comes at the end.

meta XHTML Diagram (example)

  1. <div class="wrapper">
    1. <dl class="meta">
      1. <dt class="rating">Rating </dt>
      2. <dd class="rating">Mature </dd>
      3. <dt class="warning">Warning </dt>
      4. <dd class="warning">
        1. <ul class="tags commas">
          1. <li> <a class="tag href="/..</a></li>
          2. <li> <a class="tag href="/..</a></li>
      5. <dt class="stats">Stats </dt>
      6. <dd class="stats">
        1. <dl>
          1. <dt>Word Count</dt>
          2. <dd>1234</dd>
        2. <div class="clear"></div>


It's important to always remember to clear a stats pattern in a meta pattern. You can look for the recurring issues on this in google code, if you're interested. If you need to turn that clear off, the path is: .meta .stats .clear {clear:none;}


Return to the documentation index.