An exclusions list that is as visible as the inclusions

Why this block is harder than it looks

Exclusions are always set smaller and lower than inclusions, and that is exactly backwards for the reader most likely to be affected. The layout problem is that an exclusions list must be visually parallel to the inclusions list, so the two can be read as a pair, while remaining clearly the negative of it. Doing that with a colour or an icon fails on paper. Doing it by shrinking the type turns the exclusions into small print, which is the appearance the document should be avoiding.

The decisions that make it work

Reasons rather than a description of the code. Each of these is a choice that has a wrong answer, and the wrong answer is usually the default.

• Set the exclusions at the same type size and in the same list style as the inclusions. If one is smaller, it is the one that will be disputed.
• Put them adjacent, in two columns or in two blocks one after the other, with matching headings, so the pair reads as one statement about scope.
• Do not use colour or an icon to signal the negative. Use the heading, which survives greyscale, photocopying and being read aloud.
• Phrase each entry as a complete statement rather than a fragment, so an item read in isolation still says what is excluded.
• Keep each entry together with break-inside: avoid, and keep the heading with the first entry using break-after: avoid.
• Where the list is long, say how many there are in the heading. Twelve exclusions is a different document from three, and the count tells the reader before they start.

The fragment

Markup and the CSS it needs, and nothing else. It expects a document that already has a page rule and a base stylesheet, so paste it into one rather than opening it on its own.

<section class="scope">
  <div class="col">
    <h3>Included in this quotation</h3>
    <ul>
      <li>Survey of the ground floor and its structural elements.</li>
      <li>A written report with photographic record.</li>
    </ul>
  </div>
  <div class="col">
    <h3>Not included (4 items)</h3>
    <ul>
      <li>Any inspection requiring the lifting of fixed floor coverings.</li>
      <li>Testing of services, including electrical and gas installations.</li>
    </ul>
  </div>
</section>

<style>
  .scope {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10mm;
    align-items: start;
    margin: 12pt 0;
  }
  .scope h3 {
    break-after: avoid;
    margin: 0 0 4pt;
    font-size: 9.5pt;                 /* identical on both sides */
    font-weight: 700;
  }
  .scope ul { margin: 0; padding-left: 14pt; }
  .scope li {
    break-inside: avoid;
    margin-bottom: 3pt;
    font-size: 9pt;                   /* same size as the inclusions */
    line-height: 1.4;
  }
</style>

What breaks when it is built the obvious way

Setting the exclusions two points smaller at the foot of the page under a heading like Notes. It is the layout that produces the argument later, because the customer's honest answer is that they did not see it, and the document agrees with them.

How to prove it survived pagination

Photocopy the page and hand it to somebody who has not read it. Ask what is not included. If they have to hunt, or if they find the inclusions first and stop, the two lists are not parallel enough.

Where it sits in a finished document

This page is one block. The document it belongs to has a page rule, a base stylesheet, a header and everything else around it, and repeating all of that here would make thirty pages that say the same thing. The quotation template is a complete file with this block already in it, so take that and change the fragment rather than assembling one from parts. The property doing most of the work here is covered on its own page, with the support caveats that belong there rather than here.

Frequently asked

Other parts of a document

The blocks that sit next to this one, and one from the next group along so you are not sealed inside a single kind of problem.