A WordPress theme that gives your content breathing room.

Style Guide

This style guide demonstrates the default presentation of elements in Koji. The page can also be used as a blueprint for how to present content within the theme in an effective way.

This page is created with the new Gutenberg content editor, which will be included in WordPress 5.0. You’ll need to use Gutenberg to replicate all of the elements on the page.


Heading one

Heading two

Heading three

Heading four

Heading five
Heading six

Quotes

The quote block can be used to display a quote from a person or from another site. It can be as long or as short as you like, and it is displayed like this:

“Among the numerous luxuries of the table…coffee may be considered as one of the most valuable. It excites cheerfulness without intoxication; and the pleasing flow of spirits which it occasions…is never followed by sadness, languor or debility.”

Benjamin Franklin

Gutenberg also included a pullquote block with a slightly different formatting. Pullquotes need some content to look proper, so let’s add some lorem ipsum filler text. 

This is a quote. I am quoting things.

Ernest Hemingway

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

Yet another pullquote. They work best with small amounts of text.

Benjamin Franklin

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.


Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3

Unordered List

  • List Item 1
  • List Item 2
  • List Item 3

Mixed List

  1. List Item 1
    • List Item 1
    • List Item 2
      1. List Item 1
      2. List Item 2
        • List Item 1
        • List Item 2
        • List Item 3
      3. List Item 3
    • List Item 3
  2. List Item 2
  3. List Item 3

Table Styles

Table Header 1Table Header 2Table Header 3
Division 1Division 2Division 3
Division 1Division 2Division 3
Division 1Division 2Division 3

Post Media

Cover block

The cover block displays text on top of an image. You can see this in practice below.

This is an example of a cover block.

Nice, right?

Left aligned

A left aligned typewriter.
A left aligned typewriter.

This is an image of a typewriter, aligned to the left. It also has a small caption. On smaller screen sizes, the image (and the caption) will clear the content and be centered in the content container. For the floated image to look good, the surrounding text will need to be of a certain length. That’s why I’m writing this filler text: A typewriter is a mechanical or electromechanical machine for writing in characters similar to those produced by printer’s movable type by means of keyboard-operated types striking a ribbon to transfer ink or carbon impressions onto the paper.

Right aligned

A right aligned typewriter.
A right aligned typewriter.

This is an image of a typewriter, aligned to the right. It also has a small caption. On smaller screen sizes, the image (and the caption) will clear the content and be centered in the content container. For the floated image to look good, the surrounding text will need to be of a certain length. That’s why I’m writing this filler text: Typically one character is printed per keypress. The machine prints characters by making ink impressions of type elements similar to the sorts used in movable type letterpress printing.

Center aligned

A right aligned typewriter.
A center aligned typewriter.

This is a center aligned image. It also has a small caption. After their invention in the 1860s, typewriters quickly became indispensable tools for practically all writing other than personal correspondence. They were widely used by professional writers, in offices, and for business correspondence in homes.

Full-width image

When you really want to get your point across, turn to an image block set to be full-width.


Gallery

This is an example of how the Gallery block in Gutenberg can be used to display multiple images in a nicely laid out grid. The images come from Unsplash.