@cagov/ds-highlight-section v2.0.1
Highlight section component
Description:
Highlight section is a great way to showcase small bits of important information, and can be used to display services or features.
When and how to use it:
Use this to catch attention and highlight the top tasks or business priorities.
Structure:
Highlight section component consist of three parts: header with the main title, the body, and the footer. The body consists of two halves. First half contains concise a secondary title, and a subtitle, The second one has text description. The footer contains a call-to-action link.
Features:
Component is also incorporates full bleed background.
Screenshot
HTML
<cagov-highlight-section>
<article role="article" class="full-bleed bg-highlight-lightest">
<div class="container">
<header class="highlight-header">
<h2>Principles for people-centered digital services</h2>
</header>
<section class="highlight-body">
<div class="highlight-image bg-primary-lightest">
<img src="https://california.azureedge.net/cdt/statetemplate/5.6.0/images/color.png" alt="highlight section demo"/>
</div>
<div class="highlight-text">
<h3>Prioritize accessibility</h3>
<h4 class="mt-0">Principle 3</h4>
<p>Make your services accessible for all Californians. Think about people who have been traditionally excluded, like people who use screen readers or reside in low bandwidth regions.</p>
<div class="wp-button">
<a class="btn-primary-outline">See all the principles</a>
</div>
</div>
</section>
</div>
</article>
</cagov-highlight-section>Project installation
The instructions assume familiarity with npm package management tool and Sass.
- Include SCSS in your compiler.
- Add the sample markup from the component to your HTML.
- Modify with your own text, alt text, and image.
CDN installation
We recommend using a build system and bundling your CSS for faster performance. If you do not use a build system, you can include the code from our CDN with a link tag.
<link rel="stylesheet" href="https://cdn.designsystem.webstandards.ca.gov/components/ds-highlight-section/v2.0.1/dist/index.css">Expected variables
There are some colors that should be defined by the containing page.
Expected definition is:
:root {
--white: #ffffff;
--primary-100: #b3c9eb;
--primary-700: #165ac2;
--primary-900: #003588;
--accent2-100: #ffecc1;
--accent2-500: #ac8226;
--w-lg: 1176px;
--s-1: 0.5rem;
--s-2: 1rem;
--s-2: 1rem;
--s-3: 1.5rem;
--s-4: 2rem;
--font-size-2: 1.125rem;
--font-weight-6: 600;
--font-lineheight-3: 1.5;
--border-1: 1px;
--border-2: 2px;
--radius-2: 4px;
}