Home

Welcome to the Bulma demo. Use the toggle to switch theme.

Text can be bold, italic, or strikethrough. There should be whitespace between paragraphs.

Typography

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraph text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam sed.

Blockquote:

This is a blockquote following a header. When something is important enough, you do it even if the odds are not in your favor.

Inline code like const x = 1 and a code block:

// Javascript code with syntax highlighting.
var fun = function lang(l) {
  dateformat.i18n = require('./lang/' + l);
  return true;
};

# Ruby code with syntax highlighting
GitHubPages::Dependencies.gems.each do |gem, version|
  s.add_dependency(gem, "= #{version}")
end

Horizontal rule

Lists

  • Unordered list item
  • Another item
  1. Ordered item
  2. Second item
Term
Definition explaining the term.

Nested list

  • level 1 item
    • level 2 item
    • level 2 item
      • level 3 item
      • level 3 item
  • level 1 item
    • level 2 item
    • level 2 item

Table

Feature Description Status
Typography Headings and body text Shown
Lists Unordered, ordered, and definitions Shown
Code blocks Rouge highlighting via theme Shown

Long code line (horizontal scroll)

ThisIsAnExcessivelyLongSingleLineCodeBlockThatShouldNotWrapAndInsteadScrollHorizontallyToDemonstrateOverflowBehaviorInTheHighlightContainer_ABCDEFGHIJKLMNOPQRSTUVWXYZ_abcdefghijklmnopqrstuvwxyz_0123456789

Buttons

Notifications

A primary notification.
An info notification.
A success notification.
A warning notification.
A danger notification.

Lists

  • Unordered list item
  • Another item
  1. Ordered item
  2. Second item

Cards

Card title

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Another card.
And one more.