Content blocks
Disclosure
Legal and participation terms in their own quiet 14px band, after the FAQ and before the CTA band.
- Block
.hs-disclosure- CSS
components/disclosure.css(in/brand.css)- JS
- None
- Status
- Built, open to change
- Decided in
- Components round 3
- Markdown
- /components/disclosure.md
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.
- A status or a risk the reader must act on: use Callout.
- Questions and answers: use FAQ.
- The pitch or body copy: use Prose.
Rules
- Put the disclosure in its own band, after the FAQ and before the CTA band, under a normal band head (eyebrow,
h2with 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
h2names the terms. Never open the disclosure with anh3that repeats it. - Copy every paragraph. Never cut or shorten legal text.
- Mark labels with
<strong>("No purchase necessary."). Group titles areh3(orh4), 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
h3under the band'sh2, 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.
Preview on white
Scholarships referenced on this site are competitive, subject to eligibility criteria, and not guaranteed.
No purchase necessary. No purchase or payment is required to apply for Honor Society® scholarships.
Honor Society® 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.
For the terms that govern our programs and website, read the Terms of Service.
<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® scholarships.</p>
<p>Honor Society® 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>