Start building with Nova styles

Step 1: Install Nova styles

You can use NPM, PNPM, or Yarn to install Nova styles, depending on your preference or your project’s requirements. Choose one of the following package managers for the installation.

Step 2: Import Nova styles

Once Nova styles is installed, you need to import it in your project. This process might look different depending on whether you’re using HTML, React, or Angular. Follow the instructions for your setup below.

HTML

If you’re working with standard HTML, add a link to the Nova styles CSS file in your HTML file by replacing the actual path where the Nova styles files are located.

Step 3: Add icons (optional)

You can use Nova CSS to add Icons to your web applications. Use individual SVGs for specific icons or SVG sprites to efficiently load and reuse a full set of icons across your app.

Installing @visa/nova-icons-svg

Installing @visa/nova-icons-sprite

SVGs

SVG stands for Scalable Vector Graphics, which is an image format based on XML for creating two-dimensional graphics. The key feature of SVGs is their scalability, allowing them to be resized without losing quality. This makes them ideal for the web, where images need to look good on various screen sizes and resolutions. Additionally, SVGs are often much smaller in size compared to JPEGs and PNGs.

SVG sprites

A sprite is a collection of SVG icons combined into a single file. This method is commonly used to enable a single server request for all icons, making it the most efficient way to access a large number of icons, especially if many are likely to be used during a session.

Using SVG sprites

Import and use icons sprite from @visa/nova-icons-sprite. This will add all of the icons as a sprite into your project and then reference them as needed. It’s up to you if you’d like to use the Visa sprite, the Generic sprite, or both.

Step 4: Use the components

After importing Nova styles and adding icons, you’re ready to use its components by copying and pasting the example code into your application. Check out Button to give it a try.

Need help?

If you experience any issues while getting set up with Nova Styles, visit Support or create an issue .