3 #Components Components
Cosmetic design patterns that are each only used for one functional purpose or a specific type of content.
- box effects (backgrounds, borders, opacity)
- typefaces and font weights/styles
- textual effects (letter-spacing, alignment, indentation, decoration, list-style, color)
- bells & whistles (transformations, overflows, shadows, filters, transitions, icons)
Example: a Pass component. It has the look and feel of a physical paper ticket. It wouldn’t make sense to use this component in any other context besides a conference pass.
Source:
kss-styleguide.scss
, line 34
3.1 #Components.Permalink The Permalink
The Permalink Component is added to the end of a heading of a section of a webpage. It is especially helpful in a documentation system, style guide, or pattern library. This Component is an internal link, and makes sections within a document easy to access.
Use with this project’s .h-Hidden
and
Xmeter’s .h-Inline
Helpers.
- author
- Chris Harvey
- updated
DOM:
const {xPermalink} = require('aria-patterns') document.querySelector('#section-title > h1').append( xPermalink.render({ id: 'section-title' }) )
Example
Section Title §
Markup: ../../test/out/x-permalink.test.html
<!--link rel="stylesheet" href="/node_modules/aria-patterns/x-permalink/css/dist/c-Permalink.css"/-->
<section id="section-title">
<h1>Section Title
<a class="c-Permalink h-Inline h-Hidden" href="#section-title" aria-label="permalink">§</a>
</h1>
</section>
Source:
c-Permalink.less
, line 7