Typography

Microbe provides default styling for most typographic elements to allow easy creation of beautiful documents.

All styles are based on the em unit and will scale according to the surrounding font-size.

Headings

Use heading elements to establish a document's outline, from h1 for the primary title down to h6 for the least important sections, helping readers and assistive technology navigate the content.

Heading 1

Vestibulum venenatis neque nec iaculis viverra. Proin a odio ex.

Heading 2

Phasellus nec luctus dolor. Curabitur id facilisis diam.

Heading 3

Vivamus feugiat tempor tellus, vel consequat turpis gravida non.

Heading 4

Quisque tristique lobortis ligula id tempus.

Heading 5

Sed aliquet velit mauris, vel interdum diam mattis et.

Heading 6

Donec in lorem imperdiet, eleifend turpis eget, congue velit.

Heading group

Group a heading together with an introductory paragraph or tagline using hgroup, so assistive technology announces them together as a single unit rather than as two disconnected pieces of content.

Get inspired with CSS

How to use CSS to add glam to your Website?

Inline text

Microbe supports the standard inline text-level elements for indicating meaning within a sentence or phrase, such as emphasis, deletions, insertions, abbreviations, and keyboard input.

Abbreviation Citation Code Deleted Definition Emphasised Idiomatic Inserted Ctrl + S Highlighted Strikethrough Samp Small Xsub Xsup Strong Underlined Var

Horizontal ruler

Use hr to signal a thematic break between paragraphs or sections, indicating that the topic or scene has shifted.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper blandit ultricies. Etiam non suscipit felis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Proin feugiat purus hendrerit sapien condimentum, eu facilisis ex eleifend. Sed lobortis est a urna accumsan vestibulum. Curabitur iaculis sem lacus, id molestie eros ultrices eu. Nullam justo nulla, sollicitudin sed mi pretium, consequat varius erat. Phasellus sed eros dictum, congue enim in, dictum ante. Sed condimentum ut elit eu vehicula.

Fusce congue nec massa id eleifend. Donec id luctus ligula. In pellentesque diam eu magna interdum, a tristique arcu dignissim. In eu lacinia nisl. Phasellus eu nisi vitae enim aliquam rutrum. Suspendisse fringilla tortor et tincidunt vulputate. Nam a urna a purus ornare gravida non sit amet risus. Morbi in justo quis velit elementum fermentum. Etiam tristique diam nunc, quis suscipit velit suscipit non.

Blockquote

Use blockquote to quote text from another source, optionally combined with a footer and cite to attribute the quote to its author.

"Be the change that you wish to see in the world."
— Mahatma Gandhi

Code block

Combine pre with code to display a multi-line, preformatted snippet of code or other text whose whitespace and line breaks must be preserved exactly as written.

console.log('Hello world!');