Big round patterned links to distinguish between therapeutic areas.
<div class="vi-grid">
<div class="vi-grid__row vi-grid__row--grid-30">
<div class="col-sm-6 col-lg-3">
<!-- Area Link -->
<div class="vi-area-link vi-pattern vi-pattern--random-gradient-moment">
<a class="vi-area-link__wrapper" href="#">
<div class="vi-area-link__title">Selvage gentrify tacos flannel.</div>
</a>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<!-- Area Link -->
<div class="vi-area-link vi-pattern vi-pattern--random-gradient-moment">
<a class="vi-area-link__wrapper" href="#">
<div class="vi-area-link__title">Whatever humblebrag hashtag thundercats meggings.</div>
</a>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<!-- Area Link -->
<div class="vi-area-link vi-pattern vi-pattern--random-gradient-moment">
<a class="vi-area-link__wrapper" href="#">
<div class="vi-area-link__title">Selfies fixie loko.</div>
</a>
</div>
</div>
<div class="col-sm-6 col-lg-3">
<!-- Area Link -->
<div class="vi-area-link vi-pattern vi-pattern--random-gradient-moment">
<a class="vi-area-link__wrapper" href="#">
<div class="vi-area-link__title">Banjo cronut vegan.</div>
</a>
</div>
</div>
</div>
</div>
The following stylesheets are required to display this component.
The following javascript is required to display this component.
Usage documentation can be found here.
Changelog
Fix
- A11y outline issue button-element not receiving focus outline
- Safari ‘mouseover shows square’ issue.
Changed
- PBS support
- Accessibility: Update outline width to 2.5px;
- Accessibility: focus display in specific color #0D3360
- Accessibility: focus display
Added
- Initial draft