Typography

<h1>

Level 1 heading

<h2>

Level 2 heading

<h3>

Level 3 heading

<h4>

Level 4 heading

<h5>
Level 5 heading
<h6>
Level 6 heading
<p>

The p HTML element represents a paragraph. Paragraphs are usually represented in visual media as blocks of text separated from adjacent blocks by blank lines and/or first-line indentation, but HTML paragraphs can be any structural grouping of related content, such as images or form fields.

Followin paragraph. Aute sit adipisicing nisi aute eiusmod ut aliquip in. Quis ea in commodo ex qui. Non elit et nisi ad est quis sunt qui anim commodo reprehenderit adipisicing aute enim.

<address>
241-4710 Rue Saint-Ambroise
Montréal QC H4C 2C7
Canada
<BlockquoteComponent> (includes <blockquote> + <figcaption> + <cite>)
The blockquote HTML element indicates that the enclosed text is an extended quotation. Usually, this is rendered visually by indentation (see Notes for how to change it). A URL for the source of the quotation may be given using the cite attribute, while a text representation of the source can be given using the cite element.
— Unknown
, https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote
<DetailsComponent>
Summary

The details HTML element creates a disclosure widget in which information is visible only when the widget is toggled into an open state. A summary or label must be provided using the summary element.

<a>
Base Link
Pill button style link
<IComponent>The i HTML element represents a range of text that is set off from the normal text for some reason, such as idiomatic text, technical terms, taxonomical designations, among others. Historically, these have been presented using italicized type, which is the original source of the i naming of this element.
<PreComponent>
The pre HTML element represents preformatted text which is to be presented exactly as written in the HTML file. The text is typically rendered using a non-proportional, or monospaced, font. Whitespace inside this element is displayed as written.
<QComponent>The q HTML element indicates that the enclosed text is a short inline quotation. Most modern browsers implement this by surrounding the text in quotation marks. This element is intended for short quotations that don't require paragraph breaks; for long quotations use the blockquote element.
<SComponent>The s HTML element renders text with a strikethrough, or a line through it. Use the s element to represent things that are no longer relevant or no longer accurate. However, s is not appropriate when indicating document edits; for that, use the del and ins elements, as appropriate.
<SampComponent>The samp HTML element is used to enclose inline text which represents sample (or quoted) output from a computer program. Its contents are typically rendered using the browser's default monospaced font (such as Courier or Lucida Console).
<SmallComponent>The small HTML element represents side-comments and small print, like right and legal text, independent of its styled presentation. By default, it renders text within it one font-size smaller, such as from small to x-small.
<StrikeComponent>The strike HTML element places a strikethrough (horizontal line) over text.
<StrongComponent>The strong HTML element indicates that its contents have strong importance, seriousness, or urgency. Browsers typically render the contents in bold type.
<SubComponent>The sub HTML element specifies inline text which should be displayed as subscript for solely typographical reasons. Subscripts are typically rendered with a lowered baseline using smaller text.
<SummaryComponent>The summary HTML element specifies a summary, caption, or legend for a details element's disclosure box. Clicking the summary element toggles the state of the parent details element open and closed.
<SupComponent>The sup HTML element specifies inline text which is to be displayed as superscript for solely typographical reasons. Superscripts are usually rendered with a raised baseline using smaller text.
<TtComponent>The tt HTML element creates inline text which is presented using the user agent default monospace font face. This element was created for the purpose of rendering text as it would be displayed on a fixed-width display such as a teletype, text-only screen, or line printer.
<UComponent>The u HTML element represents a span of inline text which should be rendered in a way that indicates that it has a non-textual annotation. This is rendered by default as a simple solid underline, but may be altered using CSS.
<VarComponent>The var HTML element represents the name of a variable in a mathematical expression or a programming context. It's typically presented using an italicized version of the current typeface, although that behavior is browser-dependent.

Colours

Primary Colours
Secondary Colours

Structural

<IframeComponent>
<MenuComponent>The menu HTML element is a semantic alternative to ul. It represents an unordered list of items (represented by li elements), each of which represents a link or other command that the user can activate.
<NavComponent>
<ImgComponent>The img HTML element embeds an image into the document.
ewool-grey-background
<NobrComponent>The nobr HTML element prevents the text it contains from automatically wrapping across multiple lines, potentially resulting in the user having to scroll horizontally to see the entire width of the text.
<OlComponent>
    The ol HTML element represents an ordered list of items — typically rendered as a numbered list.
<SectionComponent>
The section HTML element represents a generic standalone section of a document, which doesn't have a more specific semantic element to represent it. Sections should always have a heading with very few exceptions.
<SpanComponent>The span HTML element is a generic inline container for phrasing content, which does not inherently represent anything. It can be used to group elements for styling purposes (using the class or id attributes), or because they share attribute values, such as lang. It should be used only when no other semantic element is appropriate. span is very much like a div element, but div is a block-level element whereas a span is an inline element.
<TitleComponent>The title HTML element defines the document's title that is shown in a Browser's title bar or a page's tab. It only contains text; tags within the element are ignored.

Utility

<hr>The hr HTML element represents a thematic break between paragraph-level elements: for example, a change of scene in a story, or a shift of topic within a section.
<LiComponent>
  • The li HTML element is used to represent an item in a list. It must be contained in a parent element: an ordered list (ol), an unordered list (ul), or a menu (menu). In menus and unordered lists, list items are usually displayed using bullet points. In ordered lists, they are usually displayed with an ascending counter on the left, such as a number or letter.
    • <MainComponent>
    The main HTML element represents the dominant content of the body of a document. The main content area consists of content that is directly related to or expands upon the central topic of a document, or the central functionality of an application.
    <PictureComponent>The picture HTML element contains zero or more source elements and one img element to offer alternative versions of an image for different display/device scenarios.
    <ScriptComponent>
    <StyleComponent>
    <UlComponent>
      The ul HTML element represents an unordered list of items, typically rendered as a bulleted list.

    Form

    <Button>
    <FieldsetComponent>
    The fieldset HTML element is used to group several controls as well as labels (label) within a web form.
    <FormComponent>
    The form HTML element represents a document section containing interactive controls for submitting information.
    <LegendComponent>The legend HTML element represents a caption for the content of its parent fieldset.
    <OptgroupComponent>The optgroup HTML element creates a grouping of options within a select element.
    <OptionComponent>
    <ProgressComponent>The progress HTML element displays an indicator showing the completion progress of a task, typically displayed as a progress bar.
    <SelectComponent>
    <TextareaComponent>
    <TimeComponent>

    Misc

    <VideoComponent>The video HTML element embeds a media player which supports video playback into the document. You can use video for audio content as well, but the audio element may provide a more appropriate user experience.
    <MapComponent>The map HTML element is used with area elements to define an image map (a clickable link area).
    <SvgComponent>The svg element is a container that defines a new coordinate system and viewport. It is used as the outermost element of SVG documents, but it can also be used to embed an SVG fragment inside an SVG or HTML document.
    <TemplateComponent>