My Design System
This page serves as a showcase for the components used on my website, mainly used for visual testing.
Title elements are used to divide content into sections.
Ideally, text-heavy content should be divided up into bite-size chunks. "Walls of text" should be avoided.
Subsections can be divided even further.
If needed, bold text can also be used to introduce new content.
Section Title (Block)
The block modifier is useful for creating sections that are clearly identifiable and distinct. Generally, either all sections on a page should use this modifier, or none of them.
Subsection Title (Block)
The same can be applied to subsections. All subsections within a section should use this modifier, or none of them.
Further levels of headings can be used, but without a block modifier.
Bold text can be used as before.
Section breaks (as shown above) can be used to create an obvious break between sections, where headers alone are not sufficient.
Taglines should be used to provide a summary of the surrounding text, or to highlight a key point.
Block quotes should be used when quoting an external source.
Code blocks should be used to display blocks of code... Whitespace is preserved!
Shorter snippets can be written inline.
Lists are more or less unchanged from the browser defaults.
However, an alternative style is available for pros and cons lists.
Emphasised text can have further emphasis within it.
Use spoilers to hide content from view.
Use action links for prominent actions such as download buttons.Action Link
Images can be made to fill the page.
Alternatively, they can be made a little smaller.
Embedded videos will fill the page while preserving a 16:9 aspect ratio.
ChipsChip Chip Chip
Chips are used to convey small tidbits of information, such as tags.
Checkboxes are designed to be easy to click, without requiring the usual precision of the default browser checkboxes.
Finally, articles should end with a datestamp.