Preface Pattern

Preface groups together user notes about a work, collection, or challenge. Items that are grouped in preface include: summary, notes, end notes, FAQ, rules, about, description. On a work page, preface is inside #workskin, so it can be styled in work skins as well as site skins.

The preface style is declared in 14-group-preface.css.

Table of contents

• Rules
• Quick reference
• HTML diagram

Rules

A preface can be any block containing a child that can contain these blocks: h1—6, p, div, ul, ol, dl, blockquote. Normally it’s a div.

A preface always contains a blockquote.userstuff, although the blockquote may be logicked out (e.g. if a work doesn’t have a summary or note but does have associations).

A preface can have lots of child modules. You can have a preface with restricted children: table.preface, ol, ul, or dl.preface, so long as the block children are given the module class.

You can never have an inline preface, or a phrase element preface.

Quick reference

[...]

always included

{...}

sometimes included

[preface]
  {title heading} {byline heading}
  [block module]
    [heading] {span actions} [/heading]
    [blockquote userstuff]
    {p note} {ul actions}
  [block module]
[/preface]

HTML diagram

This diagram is taken from a challenge profile.

1. <div class="preface group">
   1. <div id="intro" class="module">
      1. <h3 class="landmark heading">
      2. <ul class="actions">
         1. <li>
            1. <a>
         2. <li>
      3. <h3 class="heading">
      4. <blockquote class="userstuff">
   2. <div id="faq" class="module">
      1. <h3 class="landmark heading">
      2. <ul class="actions">
      3. <h3 class="heading">
      4. <blockquote class="userstuff">
   3. <div id="rules" class="module">