Home
Components
Figure Details

Figure Details

Figure Details is a figure element with several details elements in its caption. When any of the closed details elements are selected, the rest in the group will close and the image source will change accordingly.

This component requires the following JS assets to function properly. Read the documentation for information on how to import the assets for your application.

pit-viper.js

Example
A figure details component.

Rates Data.

No matter your technical skills or budget, we’ve made it easy for everyone to access over a trillion records of provider, payer, professional, drug, and device rates.

Learn More

Contracting.

Contracting is stuck in past, but you don’t have to be. We help anyone broker price-informed agreements, manage amendments, and meet new partners all in one place.

Learn More

Compliance.

We do all the work to help you give patients the readily-accessible information they want in the format CMS requires. You’re welcome.

Learn More

HTML

<pv-figure-details class="pv-text-inverse">
  <img src="/prototypes/assets/data.png" alt="" width="497" height="500">
  <div>
    <details id="data" data-image-url="/prototypes/assets/data.png" open>
      <summary class="pv-text-title-xl">Rates Data.</summary>
      <div class="pv-flow">
        <p>No matter your technical skills or budget, we’ve made it easy for everyone to access over a trillion records of provider, payer, professional, drug, and device rates.</p>
        <p><a href="" class="pv-text-inherit">Learn More</a></p>
      </div>
    </details>
    <details id="contracting" data-image-url="/prototypes/assets/contracting.png">
      <summary class="pv-text-title-xl">Contracting.</summary>
      <div class="pv-flow">
        <p>Contracting is stuck in past, but you don’t have to be. We help anyone broker price-informed agreements, manage amendments, and meet new partners all in one place.</p>
        <p><a href="" class="pv-text-inherit">Learn More</a></p>
      </div>
    </details>
    <details id="compliance" data-image-url="/prototypes/assets/compliance.png">
      <summary class="pv-text-title-xl">Compliance.</summary>
      <div class="pv-flow">
        <p>We do all the work to help you give patients the readily-accessible information they want in the format CMS requires. You’re welcome.</p>
        <p><a href="" class="pv-text-inherit">Learn More</a></p>
      </div>
    </details>
  </div>
</pv-figure-details>
<!-- import pit-viper.js as described in the PV usage instructions -->