Nimiq Style

The Nimiq CSS framework

Contents

Installation

Include via NPM

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

Include via CDN

<link href="https://cdn.jsdelivr.net/npm/@nimiq/style@v0.6.4/nimiq-style.min.css" rel="stylesheet">

Font

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

<link href="https://fonts.googleapis.com/css?family=Muli:400,600,700" rel="stylesheet">

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

<link href="https://fonts.googleapis.com/css?family=Fira+Mono&text=0123456789ABCDEFGHJKLMNPQRSTUVXY" 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.

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>

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


Purple


Pink


Light-Green


Brown


<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> <div class="nq-purple-bg">Purple</div> <div class="nq-pink-bg">Pink</div> <div class="nq-light-green-bg">Light-Green</div> <div class="nq-brown-bg">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 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-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> <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>

Regular







Without border (vanishing)



<input class="nq-input"> <input class="nq-input" placeholder="I am a placeholder..."> <input class="nq-input" value="I have a value"> <input class="nq-input vanishing" placeholder="I am a placeholder..."> <input class="nq-input vanishing" value="I have a value">

On dark background







Without border (vanishing)



<input class="nq-input"> <input class="nq-input" placeholder="I am a placeholder..."> <input class="nq-input" value="I have a value"> <input class="nq-input vanishing" placeholder="I am a placeholder..."> <input class="nq-input vanishing" value="I have a value">

Card Header

Warning under the headline.

Card Body

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>

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>