Installation

Please see this section in the README:
Add Nimiq Style CSS to your project

Typography

Heading H1

Heading H2

Heading H3

Paragraph: Nimiq is the blockchain designed for simplicity. Nimiq aims to be the best performing and easiest-to-use decentralized payment protocol & ecosystem. The project is striving to combine state-of-the-art blockchain research and web technology. Nano clients synchronize in seconds. Nimiq is browser-based and installation-free.

I am a link

This is small text.

Label

Info notice.

Success notice.

Warning notice.

Error notice.

Tip:

You can also add the nq-style class to a container element to automatically apply heading, paragraph, link and list styles to its contents.

<h1 class="nq-h1">Heading H1</h1> <h2 class="nq-h2">Heading H2</h2> <h3 class="nq-h3">Heading H3</h3> <p class="nq-text">Contrary...</p> <a class="nq-link">I am a link</a> <p class="nq-text-s">This is small text.</p> <span class="nq-label">Label</span> <p class="nq-notice info">Info notice.</p> <p class="nq-notice success">Success notice.</p> <p class="nq-notice warning">Warning notice.</p> <p class="nq-notice error">Error notice.</p> <div class="nq-style">...</div>

Colors

Nimiq Blue

Nimiq Light Blue

Nimiq Gold

Nimiq Green

Nimiq Orange

Nimiq Red

Nimiq Purple

Nimiq Pink

Nimiq Light Green

Nimiq Brown

Nimiq Light Blue

Nimiq Red

<p class="nq-blue">Nimiq Blue</p> <p class="nq-light-blue">Nimiq Light Blue</p> <p class="nq-gold">Nimiq Gold</p> <p class="nq-green">Nimiq Green</p> <p class="nq-orange">Nimiq Orange</p> <p class="nq-red">Nimiq Red</p> <p class="nq-purple">Nimiq Purple</p> <p class="nq-pink">Nimiq Pink</p> <p class="nq-light-green">Nimiq Light Green</p> <p class="nq-brown">Nimiq Brown</p>

Blue

Light-Blue

Gold

Green

Orange

Red

<div class="nq-blue-bg">Blue</div> <div class="nq-light-blue-bg">Light-Blue</div> <div class="nq-gold-bg">Gold</div> <div class="nq-green-bg">Green</div> <div class="nq-orange-bg">Orange</div> <div class="nq-red-bg">Red</div>

Primary Buttons

<button class="nq-button">Min width</button> <button class="nq-button">Regular button</button> <button class="nq-button">Button with lots of text</button> <button class="nq-button" disabled>Disabled button</button> <button class="nq-button light-blue inverse">Inverse button</button> <button class="nq-button light-blue inverse" disabled>Inverse button</button>

<button class="nq-button light-blue">Light-blue button</button> <button class="nq-button green">Green button</button> <button class="nq-button orange">Orange button</button> <button class="nq-button red">Red button</button> <button class="nq-button gold">Gold button</button>

Small Buttons

<button class="nq-button-s">Small button</button> <button class="nq-button-s" disabled>Disabled small button</button> <button class="nq-button-s inverse">Inverse small button</button> <button class="nq-button-s inverse" disabled>Inverse disabled</button>

<button class="nq-button-s light-blue">Light-blue button</button> <button class="nq-button-s green">Green button</button> <button class="nq-button-s orange">Orange button</button> <button class="nq-button-s red">Red button</button> <button class="nq-button-s light-blue" disabled>Light-blue button</button> <button class="nq-button-s green" disabled>Green button</button> <button class="nq-button-s orange" disabled>Orange button</button> <button class="nq-button-s red" disabled>Red button</button>

Pill Buttons

<button class="nq-button-pill">Pill button</button> <button class="nq-button-pill light-blue">Light-blue button</button> <button class="nq-button-pill green">Green button</button> <button class="nq-button-pill orange">Orange button</button> <button class="nq-button-pill red">Red button</button> <button class="nq-button-pill gold">Gold button</button> <button class="nq-button-pill inverse">Inverse button</button> <button class="nq-button-pill light-blue inverse">Light-blue button</button> <button class="nq-button-pill green inverse">Green button</button> <button class="nq-button-pill orange inverse">Orange button</button> <button class="nq-button-pill red inverse">Red button</button> <button class="nq-button-pill gold inverse">Gold button</button>

Inputs

Regular

Without border (vanishing)

On dark background

Without border (vanishing)

Card Component

Card Header

Warning under the headline.

Card Body

Card Footer

Card Header

Card Body

<div class="nq-card"> <div class="nq-card-header"> <h1 class="nq-h1">Card Header</h1> <p class="nq-notice warning">Warning under the headline.</p> </div> <div class="nq-card-body"> <p>Card Body</p> </div> <div class="nq-card-footer"> <a>Card Footer</a> </div> </div> <div class="nq-card"> <div class="nq-card-header"> <h2 class="nq-h2">Card Header</h2> </div> <div class="nq-card-body"> <p>Card Body</p> </div> </div>

Icons

Hover over the icons to see their names. Then use them like this:

Contents

Heading H1

Heading H2

Heading H3

Tip:

Regular

Without border (vanishing)

On dark background

Without border (vanishing)

Card Header

Card Header