Do
Create contrast by using a range of light and dark values.
Portal Guideline Card Styles
Portal Guideline Card (Do)
<section class="grid margin-btm--48">
<article class="grid__col--12 grid__col-sm--6 guideline-card">
<div class="guideline-card__img">
</div>
<div class="guideline-card--green">
</div>
<div class="guideline-card--guide margin-btm--12">
<span>Do</span>
</div>
<span class="grid__col--12 grid__col-sm--6">
<p>Create contrast by using a range of light and dark values.</p>
</span>
</article>
</section>
Portal Guideline Card (Don't)
Don't
Don’t use general verbs that are ambigious and lack specificity.
<section class="grid margin-btm--48">
<article class="grid__col--12 grid__col-sm--6 guideline-card">
<div class="guideline-card__img">
</div>
<div class="guideline-card--green">
</div>
<div class="guideline-card--guide margin-btm--12">
<span>Don't</span>
</div>
<span class="grid__col--12 grid__col-sm--6">
<p>Don’t use general verbs that are ambigious and lack specificity.</p>
</span>
</article>
</section>
Guideline Card Documentation
Use
Only used in portal for examples of component usage
Background Image
Background image should be center focused to match all screen sizes.