Style & Elements

Colors:

Primary
Secondary
Gradient
Success
Error
Text
Text acc 1
Text acc 2
Text acc 3
Text reverse
Bg
Bg acc 1
Bg acc 2
Bg acc 3
Bg reverse

Headings:

All HTML headings, <h1> through <h6>, are available.

H1. Heading example

H2. Heading example

H3. Heading example

H4. Heading example

H5. Heading example
H6. Heading example

List Types

Ordered List

An unordered list starts with the <ol> tag. Each list item starts with the <li> tag. The list items will be marked with numbers by default:

  1. List Item 1
  2. List Item 2
  3. Nested list item A
  4. Nested list item B
  5. List Item 3

Unordered List

An unordered list starts with the <ul> tag. Each list item starts with the <li> tag. The list items will be marked with bullets by default:

  • List Item a
  • List Item b
  • Nested list item 1
  • Nested list item 2
  • Double Nested item 1
  • Double Nested item 2
  • List Item 3

You can also remove the default styling by adding the class list--unstyled. This only applies to immediate children list items, meaning you will need to add the class for any nested lists as well.

Example:

<ul class="list--unstyled">
  <li>Lorem ipsum dolor sit amet</li>
  <li>Consectetur adipiscing elit</li>
  <li>Integer molestie lorem at massa</li>
  <li>Facilisis in pretium nisl aliquet</li>
</ul>
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet

Blockquotes & alert boxes

Blockquotes

For quoting blocks of content from another source within your document.
Single line blockquote:

Stay hungry. Stay foolish.

Multi line blockquote:

People think focus means saying yes to the thing you’ve got to focus on. But that’s not what it means at all. It means saying no to the hundred other good ideas that there are. You have to pick carefully. I’m actually as proud of the things we haven’t done as the things I have done. Innovation is saying no to 1,000 things. - Biron Themes

Alert boxes

You can create the following content boxes using the markdown editor.

Default

<div class="alert">
...
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Info

<div class="alert info">
...
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Warning

<div class="alert warning">
...
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Error

<div class="alert error">
...
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Success

<div class="alert success">
...
</div>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

HTML Tags

Code

Code can be presented inline, like <?php bloginfo('stylesheet_url'); ?>, or within a <pre> block. Because we have more specific typographic needs for code, we'll specify Consolas and Monaco ahead of the browser-defined monospace font.

#container {
    float: left;
    margin: 0 -240px 0 0;
    width: 100%;
}

Here are a few examples of code highlighting:

HTML markup:

<!DOCTYPE html>
<html>
<body>

<h2>The title attribute</h2>

<p title="I'm a tooltip">
Check out the title attribute as a tooltip.
</p>

</body>
</html>

CSS code:

body { 
   background-color: #FFFFF0; 
   font-family: Arial, Verdana, sans-serif; 
   font-size: 18px; 
   color: #00008B;
}

Javascript code:

var x, y, z;
x = 5;
y = 6;
z = x + y;
document.getElementById("demo").innerHTML = z;

Inline code

<inline> and <code>

Text-level semantics

Styling for common inline HTML5 elements.

The a element example.s
The abbr element and abbr element with title examples
The b element example
The cite element example
The code element example
The del element example
The dfn element and dfn element with title examples
The em element example
The i element example
The ins element example
The kbd element example
The mark element example
The q element inside a q element example
The s element example
The samp element example
The small element example
The span element example
The strong element example
The sub element example
The sup element example
The var element example
The u element example
The <details> element:

Details Summary

Details content. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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, sunt in culpa qui officia deserunt mollit anim id est laborum.


Buttons

Colors

<button class="btn m-b">Default</button>
<button class="btn btn--primary m-b">Primary</button>
<button class="btn btn--secondary m-b">Secondary</button>
<button class="btn btn--success m-b">Success</button>
<button class="btn btn--error m-b">Error</button>
<button class="btn btn--warning m-b">Warning</button>
<button class="btn btn--bordered m-b">Bordered</button>
<button class="btn btn--bordered btn--primary m-b">Bordered Primary</button>
<button class="btn btn--bordered btn--secondary m-b">Bordered Secondary</button>
<button class="btn btn--primary is-loading m-b">Loading</button>

Sizes

<button class="btn btn--sm m-b">Small Button</button>
<button class="btn m-b">Default Button</button>
<button class="btn btn--lg m-b">Large Button</button>
<button class="btn btn--xl m-b">Huge Button</button>
<button class="btn btn--full m-b">Full Width Button</button>

Notifications


Tables

# Table_Header_1 Table_Header_2 Table_Header_3 Table_Header_4 Table_Header_5 Table_Header_6 Table_Header_7 Table_Header_8
1 Division 1 Division 2 Division 3 Division 4 Division 5 Division 6 Division 7 Division 8
2 Division 1 Division 2 Division 3 Division 4 Division 5 Division 6 Division 7 Division 8
3 Division 1 Division 2 Division 3 Division 4 Division 5 Division 6 Division 7 Division 8
# Table_Header_1 Table_Header_2 Table_Header_3
1 Division 1 Division 2 Division 3
2 Division 1 Division 2 Division 3
3 Division 1 Division 2 Division 3

Bookmark Card

Premium Ghost Themes
Premium Ghost Themes for your Ghost Publication. We offer modern, clean, fast and beautiful Ghost Themes with great support and regular updates. Get the best Ghost theme to give a professional look to your website or blog.
Best Premium Ghost Themes
Nikko - Membership & Newsletter Ghost Theme
Nikko is a Newsletter and Blog Ghost Theme, ideal for a membership and newsletter site and great Substack alternative. It comes with clean design and a modern look, you can be easily change the settings to match your style. It comes with different home pages, custom post types, and custom pages.
Nikko Ghost Theme
Nikko Changelog
Nikko Theme Changelog. Release notes and details about versions, change description and list of changed files.
Nikko Changelog
Ghost: The #1 open source headless Node.js CMS
The world’s most popular modern open source publishing platform. A headless Node.js CMS used by Apple, Sky News, Tinder and thousands more. MIT licensed, with 30k+ stars on Github.
Ghost CMS

Images

Image from unsplash
Normal Image / Unsplash
image from unsplash
Wide Image / Unsplash
Image from unsplash
Full Width Image / Unsplash

Image Gallery

Embeds

Youtube
Vimeo
Twitter
View this post on Instagram

So much heroic work being done at labs around the world often gets overlooked; that hasn’t been the case this year, when global eyes have been focused on scientists doing life-saving research to create tests and vaccines to combat COVID-19. We drew back the curtain on some other designed solutions in Season 2 of @abstractdesign on @netflix, when we profiled the work of bio-architect Neri Oxman. The tenured professor walked us through her lab and talked about its significance; there hadn’t been a place for science and art to mingle at MIT until the Media Lab opened. We’re thrilled that the Museum of Modern Art is opening Neri Oxman: Material Ecology, which explores the influence of nature on Neri’s design and production processes, online starting May 11 (@themuseumofmodernart). As for this dish, we couldn’t possibly explain what’s brewing in it, but we were struck by the role that art can play in the progress of science and culture. Rarely has the work of scientists felt more vital. #abstractnetflix #abstractseason2 #abstracttheartofdesign #nerioxman #moma #nature #setlife #tbt

A post shared by Abstract (@abstractdesign) on

Instagram
Codepen
Spotify
Soundcloud
Great! You’ve successfully signed up.
Welcome back! You've successfully signed in.
You've successfully subscribed to Nikko.
Your link has expired.
Success! Check your email for magic link to sign-in.
Success! Your billing info has been updated.
Your billing was not updated.
Customize Nikko:
Buy Nikko