Jiaxin's Homepage
styleguide

Dumbarton Style Guide

By Tyler Butler

Markdown

Heading #

Heading ##

Heading###

Heading ####

Heading#####

italics *italics*
Bold **Bold**

Code Highlighting

def my_function():
  print("Hello from a function")

my_function()

Block Quote

Tables

Syntax Description Test Text
Header Title Here’s this
Paragraph Text And more

Here’s a simple footnote,1 and here’s a longer one.2

Bootstrap

This theme uses Bootstrap 4 CDN. In addition to markdown, you can use raw bootstrap HTML to format posts and pages. For a full list of options, check out the Documentation page.

Example heading New

Example heading New

Example heading New

Example heading New

Example heading New
Example heading New

Dropdown link Dropdown link
...
Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card link Another link
Action Another action Something else here
Separated link
Radios
Checkbox
@
@example.com

https://example.com/users/
$
.00
With textarea

Hello, world!

This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.

It uses utility classes for typography and spacing to space content out within the larger container.

Learn more
  • Cras justo odio 14
  • Dapibus ac facilisis in 2
  • Morbi leo risus 1
  • ...
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • ...
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
  • ...
    List-based media object
    Cras sit amet nibh libero, in gravida nulla. Nulla vel metus scelerisque ante sollicitudin. Cras purus odio, vestibulum in vulputate at, tempus viverra turpis. Fusce condimentum nunc ac nisi vulputate fringilla. Donec lacinia congue felis in faucibus.
Modal title

Modal body text goes here.

...
...
...
...

This paragraph will be entirely selected when clicked by the user.

This paragraph has the default select behavior.

This paragraph will not be selectable when clicked by the user.

...
...

Links using markdown are normal and styled like this …

A link

But if you use the right class, it can look like this…

read more

Making Charts with Chart.js

  1. This is the first footnote. ↩

  2. Here’s one with multiple paragraphs and code.

    Indent paragraphs to include them in the footnote.

    { my code }

    Add as many paragraphs as you like. ↩