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/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

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

Nimiq Blue

Nimiq Light Blue

Nimiq Gold

Nimiq Green

Nimiq Orange

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>
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>
<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>

To use icons, you have to include a second CSS file:

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