new-tab

### HTML Grid Layout Example Source: https://pitviper.turquoise.health/utilities/grid Demonstrates how to implement a responsive grid layout using Pit Viper's CSS classes. It utilizes custom properties to control the minimum width of grid items and the spacing between them. This example shows a basic setup for arranging multiple card elements. ```html

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

``` -------------------------------- ### Search Input Examples (HTML) Source: https://pitviper.turquoise.health/components/forms Showcases the `pv-input-search` component, which includes a search icon. Examples cover a basic search input and a more complex version with a popover for filtering options. ```html Input Label ``` ```html ``` -------------------------------- ### HTML Action Bar Examples Source: https://pitviper.turquoise.health/components/action-bar Demonstrates the structure and styling of Pit Viper action bars using HTML. Includes examples for the default action bar and a white-styled action bar, showcasing different button types and layouts within the `.pv-action-bar-container`. ```html

2 Selected

``` -------------------------------- ### Install Pit Viper NPM Package Source: https://pitviper.turquoise.health/index Install the Pit Viper design system as an npm package for use in your project. This is the recommended method for managing dependencies. ```bash npm install @turquoisehealth/pit-viperCopy ``` -------------------------------- ### HTML Clickable Cards (Button and Overlay Link) Source: https://pitviper.turquoise.health/components/cards Demonstrates two ways to create clickable cards using Pit Viper classes. The first example uses a `

Aetna

Healthcare Price Transparency Could Save $1 Trillion

Description Label
02/21/25

``` -------------------------------- ### Floating Action Button HTML Examples Source: https://pitviper.turquoise.health/components/buttons Examples demonstrating the 'pv-button-floating' and 'pv-button-floating-on-dark' classes for creating floating action buttons. A parent container must have 'pv-relative' for proper positioning. Custom properties like --bottom and --right can adjust spacing. ```html

``` -------------------------------- ### HTML Popover List Example Source: https://pitviper.turquoise.health/components/popovers This HTML snippet illustrates the usage of a popover list within a popover. It utilizes the 'pv-popover-list' class for styling and includes the 'role="list"' attribute to ensure proper semantic structure and remove default list styling. The example features list items with anchor tags, and one item is highlighted using the 'data-active' attribute. ```html ``` -------------------------------- ### HTML Document Structure (HTML) Source: https://pitviper.turquoise.health/pv-components/intro This is the basic HTML structure for the Pit Viper Vue Browser Example. It sets the language to English and includes meta charset information. The title indicates the purpose of the page. ```html Pit Viper Vue Browser Example Off by default On by default Disabled Small Off by default Small On by default ``` -------------------------------- ### HTML Banner Component Examples Source: https://pitviper.turquoise.health/components/banner This HTML code demonstrates the structure for creating primary, secondary, and tertiary banners. It includes examples of how to display a banner label with an optional icon and one or two call-to-action buttons. The structure utilizes specific CSS classes for styling and layout. ```html ``` -------------------------------- ### Small Tab List with Links and Buttons (HTML) Source: https://pitviper.turquoise.health/components/tabs Illustrates the `.pv-tab-list-small` variant for creating compact tab lists. This version reduces vertical padding, suitable for space-constrained interfaces. It includes examples using both links and buttons. ```html

``` -------------------------------- ### Apply Dashed Border Utility in HTML Source: https://pitviper.turquoise.health/utilities/visual This HTML example demonstrates applying a dashed border style to a button element using the `pv-border-dashed` utility class. This utility changes the border from solid to dashed. ```html ``` -------------------------------- ### HTML Highlights: Default, Category, and Tag Source: https://pitviper.turquoise.health/components/tags This snippet demonstrates how to implement different highlight styles in HTML. It includes examples for a default highlight, a category-specific highlight, and a tag-specific highlight, using distinct CSS classes. ```HTML

Project Clarity Supported

Consultative and preventative care

Common

``` -------------------------------- ### Text Input Examples (HTML) Source: https://pitviper.turquoise.health/components/forms Demonstrates the usage of `pv-input-text` for various input types like text, date, and password. Requires a corresponding `label` with a `for` attribute matching the input's `id` for accessibility. ```html Input Label Input Label Input Label ``` -------------------------------- ### HTML Pagination Component Implementation Source: https://pitviper.turquoise.health/components/pagination This snippet demonstrates the HTML structure for the Pit Viper Pagination component. It includes examples for both regular and small sizes, showcasing the use of disabled attributes and aria-current attributes for accessibility and state indication. ```html

``` -------------------------------- ### HTML: Inline Flex Layout for Element Grouping Source: https://pitviper.turquoise.health/utilities/flex Demonstrates the `pv-flex-inline` utility, which changes the display to `inline-flex` for block-level elements. This example shows its application in creating an inline tag with an icon and text, setting the default gap to 0. ```html 23 ``` -------------------------------- ### Vue Application Entry Point (src/main.js) Source: https://pitviper.turquoise.health/pv-components/intro This JavaScript file serves as the main entry point for the Vue 3 application. It imports the 'createApp' function from Vue and the main 'Sandbox' component, then mounts the application to the '#app' element in the HTML. ```javascript import { createApp } from 'vue'; import Sandbox from './Sandbox.vue'; createApp(Sandbox).mount('#app'); ``` -------------------------------- ### Initialize Pit Viper Data Grid with AG Grid Options (HTML, JavaScript) Source: https://pitviper.turquoise.health/components/data-grid This example demonstrates how to initialize the `pv-data-grid` web component using provided grid options. It requires Pit Viper and AG Grid Enterprise JS assets. The `createGrid` method on the element handles the AG Grid initialization with Pit Viper styling, including loading states and icon styling. ```html