6 #Components Components
Components are collections of classes used to construct a user interface element.
src/css/screen.scss, line 161
6.2 #Components.get-started Get Started
The Get Started call-to-action provides a large guiding prompt for a person who is interested in learning about accessibility, but may not know where to begin.
Markup
<p class="c-cta-get-started">
<a class="c-cta-get-started__link" href="">How do I get started?</a>
</p>src/css/components/_c-cta-get-started.scss, line 1
6.3 #Components.Headings Headings
Headings are used to identify sections of content. They are incredibly important for assistive technology. Heading component classes are used to control the visual presentation of heading elements, while preserving an accessible document structure.
src/css/components/_c-headings.scss, line 1
We quickly seized the black axle and just saved it from going past him
Markup
<h2 class="c-heading-smaller">
We quickly seized the black axle and just saved it from going past him
</h2>src/css/components/_c-headings.scss, line 129
While making deep excavations we found some quaint bronze jewelry
Markup
<h2 class="c-heading-smallest">
While making deep excavations we found some quaint bronze jewelry
</h2>src/css/components/_c-headings.scss, line 143
6.3.3.1 #Components.Headings.heading-titanic .c-heading-titanic { } Titanic Heading
The largest of the headings. Used for big announcements and other attention-grabbing content.
Six javelins thrown by the quick savages whizzed forty paces beyond the mark
Markup
<h2 class="c-heading-titanic">
Six javelins thrown by the quick savages whizzed forty paces beyond the mark
</h2>src/css/components/_c-headings.scss, line 25
The explorer was frozen in his big kayak just after making queer discoveries
Markup
<h2 class="c-heading-largest">
The explorer was frozen in his big kayak just after making queer discoveries
</h2>src/css/components/_c-headings.scss, line 42
The July sun caused a fragment of black pine wax to ooze on the velvet quilt
Markup
<h2 class="c-heading-larger">
The July sun caused a fragment of black pine wax to ooze on the velvet quilt
</h2>src/css/components/_c-headings.scss, line 67
The public was amazed to view the quickness and dexterity of the juggler
Markup
<h2 class="c-heading-large">
The public was amazed to view the quickness and dexterity of the juggler
</h2>src/css/components/_c-headings.scss, line 84
While Suez sailors wax parquet decks, Afghan Jews vomit jauntily abaft
Markup
<h2 class="c-heading-medium">
While Suez sailors wax parquet decks, Afghan Jews vomit jauntily abaft
</h2>src/css/components/_c-headings.scss, line 99
Six big juicy steaks sizzled in a pan as five workmen left the quarry
Markup
<h2 class="c-heading-small">
Six big juicy steaks sizzled in a pan as five workmen left the quarry
</h2>src/css/components/_c-headings.scss, line 114
6.4 #Components.hero Hero
The Hero is a large box area used to showcase something important. On the homepage it displays the A11Y Banner component.
src/css/components/_c-hero.scss, line 1
src/css/components/_c-homepage-card.scss, line 1
src/css/components/_c-homepage-feature.scss, line 1
src/css/components/_c-linkroll.scss, line 1
6.8 #Components.lip Header Cap
The Header cap provides a "lip" area that sticks out below the header, provided the browser can support CSS Grid.
src/css/components/_c-lip.scss, line 1
6.9 #Components.logo Logo
The logo is used to identify the website for branding purposes. It is made up of two parts: the Icon and the Wordmark. Both the Icon and the Wordmark are made out of inlined SVG.
The Icon is a standalone graphic that can be used for things like the website's favicon, or for social media avatars. The Wordmark is the name of the website, with a branded treatment. Both the Icon and the Wordmark can be used in isolation, depending on the context it is supposed to be used for.
On the website, the Wordmark is set to disappear when the viewport is narrow. This is to provide more room for the primary navigation, until the viewport is so narrow that a menu treatment must be used.
The Icon will always be displayed, so it has a title element applied to
its SVG. The Wordmark's presence is removed from assistive technology, so as
to avoid redundant announcements when both it and the Icon are present.
TODO: Add links
Markup
<div id="logo" class="c-logo">
<a class="c-logo__link" href="index.html">
<svg class="c-logo__icon" role="img" width="51" height="51" xmlns="http://www.w3.org/2000/svg">
<title>The A11Y Project</title>
<path d="M25.5 0C11.417 0 0 11.417 0 25.5S11.417 51 25.5 51 51 39.583 51 25.5 39.583 0 25.5 0zm-.385 5.064a3.3 3.3 0 0 1 3.307 3.291 3.304 3.304 0 0 1-3.307 3.306 3.3 3.3 0 0 1-3.29-3.306 3.29 3.29 0 0 1 3.29-3.291zm14.289 10.652l-9.809 1.24.005 9.817 4.755 15.867a1.85 1.85 0 0 1-1.344 2.252c-.989.25-2.003-.3-2.252-1.298l-4.87-14.443h-1.498l-4.48 14.742c-.374.964-1.448 1.404-2.407 1.03-.954-.37-1.533-1.454-1.158-2.418l4.115-15.572v-9.978l-9.04-1.228c-.928-.075-1.558-.89-1.483-1.818.07-.934.914-1.628 1.838-1.554l10.982.944h4.815l11.69-.963a1.68 1.68 0 0 1 1.749 1.623c.04.924-.68 1.718-1.608 1.758z" />
</svg>
<svg class="c-logo__wordmark" aria-hidden="true" focusable="false" width="180" height="20" xmlns="http://www.w3.org/2000/svg">
<path d="M6.973 15H3.945V3.242H.068V.722H10.85v2.52H6.973V15zM24.746 15H21.73V8.838h-5.655V15h-3.027V.723h3.027v5.595h5.654V.723h3.018V15zM36.582 15h-8.223V.723h8.223v2.48h-5.195v3.135h4.834v2.48h-4.834V12.5h5.195V15zM53.506 15l-1.035-3.398h-5.205L46.23 15h-3.262L48.008.664h3.701L56.768 15h-3.262zm-1.758-5.938c-.957-3.079-1.497-4.82-1.621-5.224a16.453 16.453 0 0 1-.254-.957c-.215.833-.83 2.894-1.846 6.181h3.721zM64.756 15h-3.018V6.738v-.605l.02-.742c.013-.26.023-.521.03-.782.012-.26.022-.498.028-.713-.032.04-.088.098-.166.176l-.263.264-.303.283a5.13 5.13 0 0 1-.303.264L59.141 6.2l-1.465-1.816 4.6-3.662h2.48V15zM75.772 15h-3.018V6.738v-.605l.02-.742c.013-.26.022-.521.029-.782.013-.26.023-.498.029-.713-.032.04-.088.098-.166.176l-.264.264-.302.283a5.162 5.162 0 0 1-.303.264L70.157 6.2 68.69 4.385l4.6-3.662h2.48V15zM85.049 6.602l2.978-5.88h3.262l-4.736 8.721V15h-3.008V9.541L78.809.723h3.28l2.96 5.879zM101.309 7.441h.996c.931 0 1.627-.182 2.09-.546.462-.372.693-.909.693-1.612 0-.71-.195-1.234-.586-1.572-.384-.339-.99-.508-1.816-.508h-1.377v4.238zm6.836-2.265c0 1.536-.482 2.711-1.446 3.525-.957.814-2.321 1.22-4.092 1.22h-1.298V15h-3.028V.723h4.561c1.732 0 3.047.374 3.945 1.123.905.742 1.358 1.852 1.358 3.33zM113.867 7.06h.977c.957 0 1.663-.159 2.119-.478.456-.319.683-.82.683-1.504 0-.677-.234-1.159-.703-1.445-.462-.287-1.181-.43-2.158-.43h-.918v3.858zm0 2.461V15h-3.027V.723H115c1.94 0 3.376.354 4.307 1.064.931.703 1.396 1.774 1.396 3.213 0 .84-.231 1.589-.693 2.246-.462.651-1.117 1.162-1.963 1.533L122.246 15h-3.359l-3.408-5.479h-1.612zM137.002 7.842c0 2.363-.586 4.18-1.758 5.449-1.172 1.27-2.851 1.904-5.039 1.904-2.187 0-3.867-.635-5.039-1.904-1.172-1.27-1.758-3.092-1.758-5.469 0-2.376.586-4.19 1.758-5.44 1.178-1.256 2.865-1.884 5.059-1.884s3.87.632 5.029 1.895c1.165 1.263 1.748 3.079 1.748 5.449zm-10.42 0c0 1.595.303 2.796.908 3.603.606.808 1.511 1.211 2.715 1.211 2.415 0 3.623-1.605 3.623-4.814 0-3.216-1.201-4.824-3.603-4.824-1.205 0-2.113.406-2.725 1.22-.612.808-.918 2.009-.918 3.604zM138.467 19.2c-.684 0-1.279-.072-1.787-.216v-2.52c.521.131.996.196 1.425.196.665 0 1.14-.208 1.426-.625.287-.41.43-1.055.43-1.933V.722h3.027v13.36c0 1.667-.381 2.936-1.142 3.809-.762.872-1.888 1.308-3.379 1.308zM154.805 15h-8.223V.723h8.223v2.48h-5.196v3.135h4.834v2.48h-4.834V12.5h5.196V15zM163.857 3.037c-1.139 0-2.021.43-2.646 1.29-.625.852-.938 2.043-.938 3.573 0 3.184 1.195 4.776 3.584 4.776 1.003 0 2.217-.25 3.643-.752v2.539c-1.172.488-2.48.732-3.926.732-2.077 0-3.665-.628-4.765-1.885-1.101-1.263-1.651-3.072-1.651-5.43 0-1.484.27-2.782.811-3.896.54-1.12 1.315-1.976 2.324-2.568 1.016-.599 2.204-.898 3.564-.898 1.387 0 2.78.335 4.18 1.005l-.976 2.461a16.127 16.127 0 0 0-1.612-.664 4.806 4.806 0 0 0-1.592-.283zM176.055 15h-3.028V3.242h-3.877V.722h10.782v2.52h-3.877V15z" />
</svg>
</a>
</div>src/css/components/_c-logo.scss, line 1
6.11 #Components.post Post
A post component contains all content and information used for The A11Y project's blog posts.
Eleventy, the software that is used to generate this site, uses Markdown to
convert blog post content into HTML code. Because of this, we use the class
c-post as namespace that allows to easily create blog content-specific
styling.
This allows site authors to continue to write in Markdown without having to worry about using both HTML markup and learning and applying site-specific styling classes. It also ensures that future styling work is decoupled from content.
Markup
<div
id="short-answer"
class="l-post__content c-content"
itemprop="articleBody">
…
</div>src/css/components/_c-post.scss, line 5
src/css/components/content/_inline-content.scss, line 30
src/css/components/content/_inline-content.scss, line 108
src/css/components/content/_embedded.scss, line 3
src/css/components/content/_cms.scss, line 3
src/css/components/content/_lists.scss, line 87
src/css/components/content/_inline-content.scss, line 72
6.11.7 #Components.post.h2 Second-level Heading
This is the first content sectioning element to use, as the post's title
uses a h1 element. Second-level heading styling is controlled using the
heading-beta() mixin.
How to navigate a website with a keyboard
Markup
<h2>How to navigate a website with a keyboard</h2>src/css/components/content/_headings.scss, line 21
6.11.8 #Components.post.links Links
Links navigate to other pages, or parts of the current page. There are two visual treatments for links, depending on if someone is browsing with a expressed preference for a reduced motion experience or not.
Markup
<a href="URL">Link text</.>src/css/components/content/_links.scss, line 3
src/css/components/content/_lists.scss, line 15
src/css/components/content/_inline-content.scss, line 90
src/css/components/content/_inline-content.scss, line 121
src/css/components/content/_embedded.scss, line 12
src/css/components/content/_lists.scss, line 53
src/css/components/content/_embedded.scss, line 21