R&D Pipeline Filtering
v0.0.1
…
Reset all filters
Therapeutic area
Phase
Technology
<!-- R D Pipeline Filtering -->
<div class="vi-rd-pipeline-filtering">
<!-- Button type: solid -->
<button type="button" class="vi-btn-solid vi-btn-solid--sm vi-btn-solid--no-pointer vi-btn-solid--accent-1 vi-btn">All medicines</button>
<!-- Button type: outline -->
<button type="button" class="vi-btn-outline vi-btn-outline--sm vi-btn-outline--no-pointer vi-btn-outline--accent-1 vi-btn">Innovative medicines</button>
<!-- Button type: outline -->
<button type="button" class="vi-btn-outline vi-btn-outline--sm vi-btn-outline--no-pointer vi-btn-outline--accent-1 vi-btn">Biosimilars</button>
<!-- Button type: solid -->
<button data-toggle="collapse" data-target="#id-2449" aria-controls="id-2449" aria-expanded="false" type="button" class="vi-rd-pipeline-filtering__filters-trigger vi-btn-solid vi-btn-solid--sm vi-btn-solid--no-pointer vi-btn-solid--accent-1 vi-btn"><!-- Icon filter (mods: --button-start) -->
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon vi-icon--button-start" aria-label="filter"><path d="m11.457.5-.187 2.244-3.74 2.991-.7 5.367-1.633-.49-.732-4.88L.73 2.744.543.5h10.914Z" stroke="currentColor" fill="none" fill-rule="evenodd"></path></svg>
<span>Show filters</span></button>
<div aria-expanded="false" class="vi-rd-pipeline-filtering__filters collapse" id="id-2449">
<span aria-controls="sg-e0e3b8" aria-label="Reset all filters" class="vi-rd-pipeline-filtering__filters-reset vi-rd-pipeline-filtering__filters-reset--disabled" href="#sg-24813a" onclick='alert("not implemented"); return false' role="button">Reset all filters</span>
<button aria-controls="id-2449" aria-expanded="false" aria-label="Close filters" class="vi-rd-pipeline-filtering__filters-close">
<!-- Icon cross-sign -->
<svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 16 16" sg-icons-dir="sg/components/icon/icons" role="img" class="vi-icon" aria-label="cross-sign" width="21" height="21"><path d="M14 3l-.8-.8-5.6 5.7L2 2.2l-.8.8 5.7 5.6-5.7 5.7.8.7 5.6-5.7 5.6 5.7.8-.7-5.7-5.7z"></path></svg>
</button>
<div class="vi-form vi-grid vi-form--accent">
<div class="vi-grid__row vi-grid__row--grid-30">
<div class="col-lg-4">
<div class="form-group">
<div class="form-group-title mb-10">
<strong>
Therapeutic area
</strong>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-68a423" name="name-776a9a" type="checkbox">
<label class="custom-control-label" for="control-68a423">
Respiratory
</label>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-de9367" name="name-878675" type="checkbox">
<label class="custom-control-label" for="control-de9367">
Migraine, Headache and Pain
</label>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-c1de96" name="name-135c30" type="checkbox">
<label class="custom-control-label" for="control-c1de96">
Neurodegenerative Conditions and Movement Disorders
</label>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-7860d3" name="name-1ce11d" type="checkbox">
<label class="custom-control-label" for="control-7860d3">
Oncology
</label>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<div class="form-group-title mb-10">
<strong>
Phase
</strong>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-6d4dd2" name="name-4b89ce" type="checkbox">
<label class="custom-control-label" for="control-6d4dd2">
Commercial Biosimilar product
</label>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-921a7d" name="name-846ee3" type="checkbox">
<label class="custom-control-label" for="control-921a7d">
Recent approval
</label>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-238766" name="name-1a9cb9" type="checkbox">
<label class="custom-control-label" for="control-238766">
Under regulatory review
</label>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-138be5" name="name-e65a88" type="checkbox">
<label class="custom-control-label" for="control-138be5">
Pre-submission
</label>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-7153b7" name="name-4bbd23" type="checkbox">
<label class="custom-control-label" for="control-7153b7">
Phase 3
</label>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-e1cc10" name="name-993bb4" type="checkbox">
<label class="custom-control-label" for="control-e1cc10">
Phase 2
</label>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-b45337" name="name-2082d1" type="checkbox">
<label class="custom-control-label" for="control-b45337">
Phase 1
</label>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-4145ea" name="name-90eedb" type="checkbox">
<label class="custom-control-label" for="control-4145ea">
Pre-clinical
</label>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="form-group">
<div class="form-group-title mb-10">
<strong>
Technology
</strong>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-9a5795" name="name-d88ec5" type="checkbox">
<label class="custom-control-label" for="control-9a5795">
Biosimilars
</label>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-d46d57" name="name-c5476e" type="checkbox">
<label class="custom-control-label" for="control-d46d57">
Novel Biologics
</label>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-16c3ad" name="name-04a130" type="checkbox">
<label class="custom-control-label" for="control-16c3ad">
Small Molecules
</label>
</div>
<div class="custom-checkbox custom-control custom-control--top">
<input class="custom-control-input" id="control-1c707b" name="name-96996e" type="checkbox">
<label class="custom-control-label" for="control-1c707b">
Additional Category
</label>
</div>
</div>
</div>
</div>
</div>
<!-- Separator (mods: --dotted) -->
<hr class="mb-0 vi-separator vi-separator--dotted">
</div>
</div>Stylesheets #
The following stylesheets are required to display this component.
Usage documentation #
Usage documentation can be found here.
Changelog #
Changelog
Fix
- 11 Sep 2024 - Removed seemingly unused flexbox styles
- 04 Sep 2024 - Close button inline direction issue.
- 23 Aug 2024 - Broken layout
- 23 Aug 2024 - Broken collapse
Added
- Initial draft