# Disclosure

> Legal and participation terms in their own quiet 14px band, after the FAQ and before the CTA band.

- Block class: `.hs-disclosure`
- CSS: `components/disclosure.css` (also inside https://brand.honorsociety.org/brand.css)
- JS: none
- Status: built, open to change
- Decision record: https://brand.honorsociety.org/decisions/components-round-3.html
- Variants: Disclosure
- HTML page: https://brand.honorsociety.org/components/disclosure/

## What it is

Legal and participation terms, in their own band after the FAQ and before the CTA band, under a normal band head. 14px/1.6 slate, filling the container; bold labels and h3 in ink 600 Mukta. Copy every paragraph: legal text is never cut.

## When to use

- Scholarship terms, such as "No purchase necessary".
- Dues terms and disclaimers.
- Any legal text that the page must show in full.

## When not to use

- A short condition, source or "as of" line: use [Fine print](/components/fine-print/).
- A status or a risk the reader must act on: use [Callout](/components/callout/).
- Questions and answers: use [FAQ](/components/faq/).
- The pitch or body copy: use [Prose](/components/prose/).

## Rules

- Put the disclosure in its own band, after the FAQ and before the CTA band, under a normal band head (eyebrow, `h2` with rule).
- Markup: `<div class="hs-disclosure">` with `<p>` and `<ul>` inside, and `<h3>` only for a second group of terms. Paste terms as they are: element selectors style them with no classes.
- The band `h2` names the terms. Never open the disclosure with an `h3` that repeats it.
- Copy every paragraph. Never cut or shorten legal text.
- Mark labels with `<strong>` ("No purchase necessary."). Group titles are `h3` (or `h4`), in Mukta, never Didot.
- Write links inline as plain `<a>`. They take a 1px underline in the text colour and turn navy on hover. No gold: gold is for the action.

## Accessibility

- Body text is slate: 6.2:1 on white, 5.9:1 on soft. Labels and group titles are ink.
- The text fills the container, like all body text. The 1.6 line height keeps long legal lines readable at 14px.
- A link keeps an underline, so it does not depend on colour.
- Group titles are `h3` under the band's `h2`, so the heading outline stays correct.
- The disclosure needs no JavaScript and has no motion.

## Variants

### Disclosure

Element selectors, so pasted terms need no classes. The band h2 above it names the terms, so the disclosure starts with the first paragraph.

```html
<div class="hs-disclosure">
  <p>Scholarships referenced on this site are competitive, subject to eligibility criteria, and not guaranteed.</p>
  <p><strong>No purchase necessary.</strong> No purchase or payment is required to apply for Honor Society&reg; scholarships.</p>
  <p>Honor Society&reg; is a privately operated membership organization and does not operate as a nonprofit. Membership fees are not charitable contributions, are not tax-deductible, and do not guarantee receipt of any scholarship or financial award.</p>
  <p>For the terms that govern our programs and website, read the <a href="/terms">Terms of Service</a>.</p>
</div>
```