{"id":30683286,"url":"https://github.com/visa/nova-styles","last_synced_at":"2026-02-10T22:38:32.781Z","repository":{"id":287427753,"uuid":"958923945","full_name":"visa/nova-styles","owner":"visa","description":"Visa Product Design System - Nova HTML/CSS Styles library","archived":false,"fork":false,"pushed_at":"2025-09-29T18:38:27.000Z","size":2100,"stargazers_count":6,"open_issues_count":0,"forks_count":0,"subscribers_count":6,"default_branch":"main","last_synced_at":"2025-09-29T20:42:23.446Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"SCSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/visa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":"NOTICE","maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-04-02T01:38:52.000Z","updated_at":"2025-09-29T18:36:30.000Z","dependencies_parsed_at":"2025-09-29T20:38:48.175Z","dependency_job_id":null,"html_url":"https://github.com/visa/nova-styles","commit_stats":null,"previous_names":["visa/nova-styles"],"tags_count":2,"template":false,"template_full_name":null,"purl":"pkg:github/visa/nova-styles","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visa%2Fnova-styles","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visa%2Fnova-styles/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visa%2Fnova-styles/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visa%2Fnova-styles/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/visa","download_url":"https://codeload.github.com/visa/nova-styles/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/visa%2Fnova-styles/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29319698,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-10T20:44:44.282Z","status":"ssl_error","status_checked_at":"2026-02-10T20:44:43.393Z","response_time":65,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-09-01T19:46:06.397Z","updated_at":"2026-02-10T22:38:32.763Z","avatar_url":"https://github.com/visa.png","language":"SCSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!--\n *              © 2025 Visa\n *\n * Licensed under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License.\n * You may obtain a copy of the License at\n *\n *         http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software\n * distributed under the License is distributed on an \"AS IS\" BASIS,\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\n * See the License for the specific language governing permissions and\n * limitations under the License.\n *\n --\u003e\n# Visa Product Design System - Nova styles\n\n- [About](#about)\n- [Security](#security)\n- [Background](#background)\n- [Install](#install)\n- [Usage](#usage)\n- [Why Nova styles?](#why-nova-styles)\n- [Testing](#testing)\n- [Maintainers](#maintainers)\n- [Thanks](#thanks)\n- [Contributing](#contributing)\n- [License](#license)\n\n## \u003ca name=\"about\"\u003e\u003c/a\u003eNova styles\n\u003e Accessible Visa Product Design System components built for styles\n\nNova 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.\n\n### Key Features\n- **Wide range of components**: Includes buttons, form elements, navigation menus, and more.\n- **Customizable**: Allows extensive theming and customization.\n- **Accessibility**: Adheres to accessibility best practices to ensure inclusive user experiences.\n\nWhether 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.\n\n## \u003ca name=\"security\"\u003e\u003c/a\u003eSecurity\n\nOur package follows security best practices and ensures the safety of user data. It relies on a minimal number of dependencies, minimizing potential vulnerabilities.\n\n## \u003ca name=\"install\"\u003e\u003c/a\u003eInstall\n\nAvailable through the [NPM](https://www.npmjs.com/).\n\n**NPM:**\n\n```sh\nnpm install @visa/nova-styles\n```\n\n**PNPM:**\n\n```sh\npnpm install @visa/nova-styles\n```\n\n**Yarn:**\n\n```sh\nyarn add @visa/nova-styles\n```\n\n**Bun:**\n\n```sh\nbun add @visa/nova-styles\n```\n\n### Dependencies\nView our package.json for the most up-to-date dependencies, including peer dependencies and dev dependencies.\n\n## \u003ca name=\"usage\"\u003e\u003c/a\u003eUsage\n\n### Step 1: Install Nova styles\nReference our [install guidelines](#install).\n\n### Step 2: Import Nova styles\nOnce 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.\n\n#### HTML\nIf 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.\n\n```html\n\u003clink rel=\"stylesheet\" href=\"path/to/nova-styles/styles.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"path/to/nova-styles/themes/visa-light/index.css\" /\u003e\n```\n\n### Step 3: Add icons (optional)\nYou 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.\n\n#### Installing @visa/nova-icons-svg\n```sh\nnpm install @visa/nova-icons-svg\n```\n\n#### Installing @visa/nova-icons-sprite\n```sh\nnpm install @visa/nova-icons-sprite\n```\n\n#### SVGs\nSVG 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.\n\n```html\n\u003csvg \t\n       class=\"v-icon v-icon-generic v-icon-tiny v-icon-checkmark\"\n       width=\"16\" \t\n       height=\"16\" \t\n       viewBox=\"0 0 16 16\" \t\n       xmlns=\"http://www.w3.org/2000/svg\" \n\u003e\n       \u003cpath\n            class=\"v-icon-primary\"\n            fill-rule=\"evenodd\"\n            clip-rule=\"evenodd\"\n            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\"\n        /\u003e\n\u003c/svg\u003e\n```\n\n#### SVG sprites\nA 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.\n\n##### Using SVG sprites\nImport 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.\n\n```html\n\u003csvg class=\"v-icon v-icon-generic v-icon-tiny v-icon-calendar\" height=\"16px\"\nwidth=\"16px\"\u003e \n     \u003cuse href=\"#calendar--tiny\" xlink:href=\"#calendar--tiny\"/\u003e\n\u003c/svg\u003e\n```\n\n### Step 4: Use the components\nAfter 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.\n\n## \u003ca name=\"why-nova-styles\"\u003e\u003c/a\u003eWhy Nova styles?\n\n### Light Weight\n\nWe've reduced our library to basic markup components and functional hooks for a lighter, simpler, and more flexible experience.\n\n### Building Blocks\n\nNo more waiting on feature requests. We provide the building blocks for you to easily create and customize your own components.\n\n### Built For Developers\n\nNova styles is sleek and unobtrusive. Our beautifully designed components allow any developer to create stunning apps with ease.\n\n## \u003ca name=\"testing\"\u003e\u003c/a\u003eTesting\n\n### Our Approach\n\nWe 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.\n\nOur 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.\n\n## \u003ca name=\"maintainers\"\u003e\u003c/a\u003eMaintainers\n\nThis 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.\n\n## \u003ca name=\"thanks\"\u003e\u003c/a\u003eThanks\n\nThanks 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.\n\n## \u003ca name=\"contributing\"\u003e\u003c/a\u003eContributing\n\nSEE CONTRIBUTING.md\n\n## \u003ca name=\"license\"\u003e\u003c/a\u003eLicense\n\nSEE LICENSE IN LICENSE","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisa%2Fnova-styles","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvisa%2Fnova-styles","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvisa%2Fnova-styles/lists"}