Visa Product Design System Nova HTML+CSS library
npm install @visa/nova-styles- About
- Security
- Background
- Install
- Usage
- Why Nova styles?
- Testing
- Maintainers
- Thanks
- Contributing
- License
> Accessible Visa Product Design System components built for styles
Nova styles is a comprehensive library of accessible components designed to align with the Visa Product Design System. It provides developers with a set of reusable UI elements that can be easily integrated into applications. With Nova styles, developers can quickly build visually consistent and user-friendly interfaces that adhere to accessibility best practices.
- Wide range of components: Includes buttons, form elements, navigation menus, and more.
- Customizable: Allows extensive theming and customization.
- Accessibility: Adheres to accessibility best practices to ensure inclusive user experiences.
Whether you are building a small project or a large-scale application, Nova styles offers a robust foundation for creating visually appealing and accessible user interfaces.
Our package follows security best practices and ensures the safety of user data. It relies on a minimal number of dependencies, minimizing potential vulnerabilities.
Available through the NPM.
NPM:
``sh`
npm install @visa/nova-styles
PNPM:
`sh`
pnpm install @visa/nova-styles
Yarn:
`sh`
yarn add @visa/nova-styles
Bun:
`sh`
bun add @visa/nova-styles
View our package.json for the most up-to-date dependencies, including peer dependencies and dev dependencies.
Reference our install guidelines.
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.
`html`
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
`sh`
npm install @visa/nova-icons-svg
#### Installing @visa/nova-icons-sprite
`sh`
npm install @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.
`html`
width="16"
height="16"
viewBox="0 0 16 16"
xmlns="http://www.w3.org/2000/svg"
>
fill-rule="evenodd"
clip-rule="evenodd"
d="M13.7205 3.29397C13.3331 2.90266 12.7519 2.90266 12.3644 3.29397L5.97141 9.75049L3.64668 7.40266C3.25923 7.01136 2.67805 7.01136 2.29059 7.40266C1.90314 7.79397 1.90314 8.38092 2.29059 8.77223L5.1965 11.707C5.58396 12.0983 6.16514 12.0983 6.55259 11.707L13.6236 4.56571C14.108 4.27223 14.108 3.58744 13.7205 3.29397Z"
/>
#### 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.
`html``
height="16px"
width="16px"
>
After adding icons, you’re ready to use styles components by copying and pasting the example code into your application. Check out any of our components to give it a try.
We've reduced our library to basic markup components and functional hooks for a lighter, simpler, and more flexible experience.
No more waiting on feature requests. We provide the building blocks for you to easily create and customize your own components.
Nova styles is sleek and unobtrusive. Our beautifully designed components allow any developer to create stunning apps with ease.
We conduct rigorous testing using Jest to ensure our components are accessible and meet our high standards. We use Axe for comprehensive accessibility testing and snapshot testing to minimize regression. Each component undergoes individual unit testing based on its API, followed by integration testing using examples to ensure seamless interaction.
Our goal is to achieve 100% test coverage for all components. Our pipeline safeguards against merging any code that fails our tests. While we have hundreds of tests providing us with full code coverage, we recognize that there is always room for improvement. We are constantly working to improve our testing suite.
This project is maintained by the Visa Product Design System engineering team. If you need to get in touch please reach out to us via any of our options on our support page.
Thanks to all those who have contributed and to the Visa Product Design team for all of the hours and thought that have gone into making the design system as easy to use as possible.
SEE CONTRIBUTING.md
SEE LICENSE IN LICENSE