Nimiq Style

The Nimiq CSS framework



Include via NPM

yarn add @nimiq/style
@import 'node_modules/@nimiq/style/nimiq-style.min.css';

Include via CDN

<link href="" rel="stylesheet">


To use Nimiq's default 'Muli' font, include it from Google Fonts:

<link href=",600,700" rel="stylesheet">

To display account numbers in Nimiq's 'Fira Mono' font, include the subset from Google Fonts:

<link href="" rel="stylesheet">

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.



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> <div class="nq-style">...</div>

Nimiq Blue

Nimiq Light Blue

Nimiq Gold

Nimiq Green

Nimiq Orange

Nimiq Red

Nimiq Purple

Nimiq Pink

Nimiq Light Green

Nimiq Brown

<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>
Text on colored background is white.
Text on colored background is white.
Text on colored background is white.
Text on colored background is white.
Text on colored background is white.
Text on colored background is white.
Text on colored background is white.
Text on colored background is white.
Text on colored background is white.
Text on colored background is white.
<div class="nq-blue-bg">Nimiq Blue</div> <div class="nq-light-blue-bg">Nimiq Light Blue</div> <div class="nq-gold-bg">Nimiq Gold</div> <div class="nq-green-bg">Nimiq Green</div> <div class="nq-orange-bg">Nimiq Orange</div> <div class="nq-red-bg">Nimiq Red</div> <div class="nq-purple-bg">Nimiq Purple</div> <div class="nq-pink-bg">Nimiq Pink</div> <div class="nq-light-green-bg">Nimiq Light Green</div> <div class="nq-brown-bg">Nimiq Brown</div>
<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 inverse">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-s">Small button</button> <button class="nq-button-s" disabled>Disabled small button</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>

Card Header

Card Body

Card Header

Card Body

<div class="nq-card"> <div class="nq-card-header"> <h1 class="nq-h1">Card Header</h1> </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>

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

<svg class="nq-icon"> <use xlink:href="./nimiq-style.icons.svg#nq-icon-name"/> </svg>