Stylesheet

The following page works as a quick visual demo of how we render common HTML elements using our stylesheet.

h1

h2

h3

h4

h2 with code

th th2
td td 2

bold

underline

code

Linked code

code block

link

Unordered List:

  • ul1
  • ul2
  • ul3

Ordered List:

  1. ol1
  2. ol2
  3. ol3

When an ordered list has <p> tags (in markdown, multiple linebreaks between items), it gets custom styles:

  1. This is an ordered list with paragraph, useful for step-by-step instructions.

  2. Testing out how this works.

Shortcodes

diagram shortcode

Diagrams from rr.red-dove.com/ui:

FULL LEFT RIGHT OUTER INNER

note shortcode

NOTE: This is a note.

tip shortcode

💡 Tip: This is a tip.

warning shortcode

WARNING! This is a warning.

private-preview shortcode

PREVIEW This is a private preview notice. is in private preview. It is under active development and may have stability or performance issues. It isn't subject to our backwards compatibility guarantees.

To enable this feature in your Materialize region, contact our team.

public-preview shortcode

PREVIEW This is a public preview notice. is in public preview. It is under active development and may have stability or performance issues. It isn't subject to our backwards compatibility guarantees.

cta shortcode

This is a CTA button This is a “full_width” CTA button

callout shortcode

Used for prominent messages. Optionally can include a primary and secondary CTA button using primary_url, primary_text, secondary_url, secondary_text in shortcode params.

Primary Only:

Header

Some text and the closing button is specified in the shortcode top.

Get Started

Primary and Secondary:

Header

This example has two buttons!

Primary Secondary

Used to render categorized lists of links, most helpful for “routing” pages like the homepage.

Linkbox One

Group multiple linkboxes together to form a grid:

Linkbox One
Linkbox Two
Linkbox Three
Linkbox Four

tabs shortcode

    block1 Tab1
    block1 Tab2
      block2 Tab1
      Block2 Tab2
      Back to top ↑