.box class creates a padded box with a border.
Boxes use the border and background color of the colorway.
Warning: If you're putting something in a box, make sure to clarify why it is in a box in some other way. For example, this box has "Warning" in bold, in addition to being yellow. This makes your page clearer and prevents accessibility failures.
The above box, in addition to being an example, is also a genuine warning.
<dialog> elements share their
appearance with the
.titlebar: A titlebar for a
<sub-title> custom element or the
class is a subtitle for a heading.
§ Section permalinks
Many pages, including these docs, have links that can be used to jump to a
section that appear when the heading is hovered. Missing.css provides this
.tool-bar is a horizontally laid-out collection of controls.
.sidebar-layout class to create a sidebar/main layout.
Put the sidebar in a
<header> element directly inside it, and the next
element will house the rest of the page. See this example:
.breadcrumbs to a
<nav> element. Use an
links inside. Don't forget to add an
Add the attribute
aria-current=page to the link representing the current page
<chip> class, or the
.chip class, creates a
rounded chip, like what you might use for a tag list or contacts.
A navbar has the
.navbar class --- see the following for a markup
To make your navbar expand/collapsible on smaller screens, you can use Missing.js § Expand/collapse navbar.
When you have multiple
<nav> elements on a page, it's a good idea to put
aria-label attributes on them. This is because many assistive programs have
a feature to jump to the navigation part of a page, which does not work well if
the user can't tell which nav is which.
§ Icon Button
.iconbutton creates a bare icon.