Safety Instruction

v0.0.0

The Safety Instruction shows required instructions inline before the footer or when scrolled up, fixed to the bottom of the viewport. When fixed only part of the content is visible when in collapsed state. Expanded the element takes up a larger part of the viewport and content inside is scrollable.

Content can be divided by using the Grid system.

The .vi-safety-instruction__column class added to the standard col- classes will override (undo) the grid column when the Safety Instruction is 'inline' or 'expanded'.

[this is a large spacer, please scroll down]

Important safety information

Do not use AJOVY if you are allergic to AJOVY or any of the ingredients in AJOVY.

AJOVY may cause allergic reactions, including itching, rash, and hives that can happen within hours and up to 1 month after receiving AJOVY. Call your healthcare provider or get emergency medical help right away if you have any symptoms of an allergic reaction: swelling of your face, mouth, tongue, throat, or if you have trouble breathing. Talk to your doctor about stopping AJOVY if you have an allergic reaction.

Tell your healthcare provider about all the medicines you take, and if you are pregnant, planning to become pregnant, or are breastfeeding.

Common side effects of AJOVY include injection site reactions.

Tell your healthcare provider if you have any side effect that bothers you or that does not go away. These are not all the possible side effects of AJOVY. For more information, ask your healthcare provider or pharmacist.

Call your doctor for medical advice about side effects. You are encouraged to report side effects to the FDA at 1-800-FDA-1088.

Approved use

AJOVY is a prescription medicine used for the preventive treatment of migraine in adults.

Please see Patient Information Leaflet within the full Prescribing Information.

<!-- Safety Instruction  -->
<div class="vi-safety-instruction">
  <div class="vi-safety-instruction__outer">
    <!-- Container (mods: --column) -->
    <div class="vi-container vi-container--column">
      <div class="vi-safety-instruction__scrollpane">
        <div class="vi-safety-instruction__inner">
          <div class="vi-grid">
            <div class="vi-grid__row vi-grid__row--grid-30">
              <div class="col-lg-6 vi-safety-instruction__column">
                <div class="vi-typesystem vi-typesystem--collapse-last">
                  <h5 class="h4">Important safety information</h5>
                  <p>Do not use AJOVY if you are allergic to AJOVY or any of the ingredients in AJOVY.</p>
                  <p>AJOVY may cause allergic reactions, including itching, rash, and hives that can happen within hours and up to 1 month after receiving AJOVY. Call your healthcare provider or get emergency medical help right away if you have any symptoms of an allergic reaction: swelling of your face, mouth, tongue, throat, or if you have trouble breathing. Talk to your doctor about stopping AJOVY if you have an allergic reaction.</p>
                  <p>Tell your healthcare provider about all the medicines you take, and if you are pregnant, planning to become pregnant, or are breastfeeding.</p>
                  <p>Common side effects of AJOVY include injection site reactions.</p>
                  <p>Tell your healthcare provider if you have any side effect that bothers you or that does not go away. These are not all the possible side effects of AJOVY. For more information, ask your healthcare provider or pharmacist.</p>
                  <p>Call your doctor for medical advice about side effects. You are encouraged to report side effects to the FDA at 1-800-FDA-1088.</p>
                </div>
              </div>
              <div class="col-lg-6 vi-safety-instruction__column">
                <div class="vi-typesystem vi-typesystem--collapse-last">
                  <h5 class="h4">Approved use</h5>
                  <p>AJOVY is a prescription medicine used for the preventive treatment of migraine in adults.</p>
                  <p><strong>Please see Patient Information Leaflet within the full <a href="#">Prescribing Information</a>.</strong></p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Stylesheets #

The following stylesheets are required to display this component.

JavaScript #

The following javascripts are required to display this component.

Usage documentation #

Usage documentation can be found here.

Usage Documentation

Changelog #

Changelog

Changed

  Reapplied the grid
  Reduce top space again.
  Reduce top space.
  To work cooperatively with scroll to top and navigation, changed mount parent.


Fix

  29 June 2022 - Keep Sticky notice inline when scrolled out of top viewport.
  28 June 2022 - Fix scrollparent detector
  Scroll ‘timing’ by dropping IE11 support.
  Overlap of scrollbar though to reducing space
  Scroll on focus (fix misplacement of intructions).
  Overlay incidentally not created on page load.
  Try to fix a none render of the safety instruction. (unable to recreate issue)


Added

  16 Dec 2024 - feat(safety-instruction): add minus-sign modifier --trigger-alt and update styleguide
  Initial draft