• Nimiq CSS

Utilities ​

A set of CSS utility classes for the most common use cases.

Source code

Usage in Native CSS ​

Make sure to add the utilities.css file to your project.

Learn more about the Native CSS integration here. But in short, you can include the utilities in your project by adding one of the following lines to your CSS file:

css
@import url('nimiq-css/css/utilities.css') @layer nq-utilities;
css
/* Imports all the important nimiq-css layers. */
@import url('nimiq-css/css/index.css');

Usage in UnoCSS ​

Set up the Nimiq CSS preset in your UnoCSS project and enable the utilities option.

ts
import { presetNimiq } from 'nimiq-css'
import { defineConfig } from 'unocss'

export default defineConfig({
  presets: [
    presetNimiq({ 
      utilities: true, 
    }), 
  ],
})
ts
import { presetNimiq } from 'nimiq-css'
import { defineConfig, presetAttributify } from 'unocss'

export default defineConfig({
  presets: [
    presetAttributify(),
    presetNimiq({ 
      utilities: true, 
      attributifyUtilities: true, 
    }), 
  ],
})

Utilities ​

nq-label ​

nq-arrow ​

nq-subline ​

A subheading or subtitle text

nq-arrow-back ​

nq-pill variants ​

nq-ghost-btn ​

nq-close-btn ​

nq-switch ​

nq-curtain-y ​

Content that scrolls with a fade effect at top and bottom

nq-card-lg ​

Card Title

Card content

nq-input-box ​

nq-focusable ​

nq-card ​

Simple Card

Card content

nq-hoverable ​

Hoverable Card

Hover to see effect

nq-hoverable-cta ​

Hoverable Card with CTA

Hover to see the CTA

Scrollbar Utilities ​

Content with hidden scrollbar
Content with custom scrollbar
Content with small custom scrollbar

Combining utilities ​

The power of utility-based CSS is in combining classes to create complex components. Here are some examples:

Pill with arrow ​

Card with close button ​

Card with close button

This card features a button that can be customized for different actions.

Changelog