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.

1. Include SCSS in your compiler.
2. Add the sample markup from the component to your HTML.
3. 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;

}

Contributor/developer documentation

• Component information

• Unit tests