Committee status indicators provide users with a quick way to determine whether a committee is active or terminated. These indicators appear on committee profile pages and reflect the committee’s status for each two-year period. They also appear in the global search and provide one quick way for users to distinguish between two similarly named committees.

When to use

  • Users need to determine a committee’s active or terminated status.
  • Space is limited.

When to consider something else

  • If the user needs in depth information about the committee’s creation or termination date, or other information about why the committee was terminated.

GitHub issues

<header class="main">
    <h1 class="entity__name content__section--narrow">DCCC</h1>
    <div class="heading--section">
        <span class="t-data t-bold entity__type">
            <span class="is-active-status">Active</span>
        </span>
        <span class="t-data t-bold entity__type">
            Party - Qualified
        </span>
        <span class="t-data t-bold entity__type">ID: C00000935</span>
    </div>
</header>

<!--This is example of committee status showing in live page. not code. -->
<p>Example for typeahead dropdown:</p>
<img class="" src="/components/is_active_typeahead.png" width="40%" alt="Is active typeahead image">
<header class="main">
  <h1 class="entity__name content__section--narrow">DCCC</h1>
  <div class="heading--section">
    <span class="t-data t-bold entity__type">      
      <span class="is-active-status">Active</span>            
    </span>      
    <span class="t-data t-bold entity__type">      
        Party - Qualified       
    </span>
    <span class="t-data t-bold entity__type">ID: C00000935</span>
  </div>
</header>

<!--This is example of committee status showing in live page. not code. -->
<p>Example for typeahead dropdown:</p>
<img class="" src="/components/is_active_typeahead.png" width="40%" alt="Is active typeahead image">
/* No context defined. */
  • Handle: @committee-status
  • Preview:
  • Filesystem Path: components/02-components/committee-status/committee-status.html