Elements

Sample Content

This page is a reference of every UI component the template provides. Use it as a quick visual guide when writing your notes — copy the markup you need into your post pages.

Layout helpers

The grid system (.row, .col-*) and helpers like .box, .actions and .pagination are available out of the box.

Reusable components

Buttons, forms, tables, blockquotes, preformatted code and image helpers all follow the same visual language. Swap the placeholder text for your own content.

Code blocks

Use <pre><code> for SPL queries and scripts.

Lists

Use <ul>, <ol> and <dl> for structured notes.

Tables

Use <table> for comparison matrices and reference data.

Elements

Text

This is bold and this is strong. This is italic and this is emphasized. This is superscript text and this is subscript text. This is underlined and this is code: for (;;) { ... }. Finally, this is a link.

Heading Level 2

Heading Level 3

Heading Level 4

Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan varius montes viverra nibh in adipiscing blandit tempus accumsan.

Lists

Unordered

  • Dolor etiam magna etiam.
  • Sagittis lorem eleifend.
  • Felis dolore viverra.

Alternate

  • Dolor etiam magna etiam.
  • Sagittis lorem eleifend.
  • Felis feugiat viverra.

Ordered

  1. Dolor etiam magna etiam.
  2. Etiam vel lorem sed viverra.
  3. Felis dolore viverra.
  4. Dolor etiam magna etiam.
  5. Etiam vel lorem sed viverra.
  6. Felis dolore viverra.

Icons

Definition

Term

Definition text goes here. Use this structure for glossary-style notes, e.g. defining "SIEM", "SOC", "SPL".

Another term

Another definition. Keep terms short and definitions clear.

Actions

Pagination

Blockquote

This is a blockquote. Use it to pull out a key quote, a warning, or a tip from your note — something you want the reader to notice immediately.

Table

Default

Name Description Price
Item1 Short description of the item. 29.99
Item2 Another short description. 19.99
Item3 Replace this with your own row. 29.99
Item4 More data for the example table. 19.99
Item5 Final example row. 29.99
100.00

Alternate

Name Description Price
Item1 Short description of the item. 29.99
Item2 Another short description. 19.99
Item3 Replace this with your own row. 29.99
Item4 More data for the example table. 19.99
Item5 Final example row. 29.99
100.00

Buttons

  • Primary
  • Default

Form

Image

Fit

Left & Right

Wrap text around an image by placing it inside the paragraph. The image floats left (or right) and the paragraph text flows beside it — handy for short side notes.

Use the same pattern with .image right to float an image on the other side. Swap the placeholder image for your own screenshot or diagram.

Box

A box is a simple bordered container. Use it to highlight a definition, a warning, or a short summary that should stand out from the surrounding text.

Preformatted

i = 0;

while (!deck.isInOrder()) {
    print 'Iteration ' + i;
    deck.shuffle();
    i++;
}

print 'It took ' + i + ' iterations to sort the deck.';