Patterns

Patterns are made up of smaller components or otherwise consist of more complex blocks of functionality, but like components they are reusable design patterns, each with a corresponding block of HTML markup that will bring in all of the styles and behavior needed to realize those patterns.

Details

Section Title	Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim felis nec iaculis consectetur. Suspendisse sodales odio nisi, ut vestibulum arcu egestas id. Proin ut orci mattis, consequat ex vel, luctus quam.	Edit
Section with a List	Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec cursus purus sit amet porta laoreet. Aliquam scelerisque non ante a fermentum. Vivamus eros dolor, pharetra id massa id, condimentum gravida eros. Fusce congue, est nec porta volutpat, magna ante egestas eros, nec lobortis augue quam eget odio. Duis erat massa, ornare vel enim eu, rhoncus ultricies orci. Vestibulum suscipit nisl sit amet nisi tempus, nec varius mi pretium.	Edit
Section with Two Paragraphs	Vestibulum auctor neque vel libero auctor, nec sagittis tortor sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc malesuada sodales arcu. Donec eleifend libero eu erat iaculis ornare. Quisque placerat quis lacus a sollicitudin. Sed consequat ullamcorper lacus, sed sodales massa efficitur vel. Fusce lacinia magna bibendum, ultrices est sit amet, suscipit felis. Curabitur in nunc sed mi hendrerit pellentesque. Vestibulum non orci ac mauris fringilla ultricies vel eu odio.	Edit

Section Title

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim felis nec iaculis consectetur. Suspendisse sodales odio nisi, ut vestibulum arcu egestas id. Proin ut orci mattis, consequat ex vel, luctus quam.

Edit

Section with a List

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec cursus purus sit amet porta laoreet.
Aliquam scelerisque non ante a fermentum. Vivamus eros dolor, pharetra id massa id, condimentum gravida eros.
Fusce congue, est nec porta volutpat, magna ante egestas eros, nec lobortis augue quam eget odio. Duis erat massa, ornare vel enim eu, rhoncus ultricies orci. Vestibulum suscipit nisl sit amet nisi tempus, nec varius mi pretium.

Edit

Section with Two Paragraphs

Vestibulum auctor neque vel libero auctor, nec sagittis tortor sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc malesuada sodales arcu. Donec eleifend libero eu erat iaculis ornare.

Quisque placerat quis lacus a sollicitudin. Sed consequat ullamcorper lacus, sed sodales massa efficitur vel. Fusce lacinia magna bibendum, ultrices est sit amet, suscipit felis. Curabitur in nunc sed mi hendrerit pellentesque. Vestibulum non orci ac mauris fringilla ultricies vel eu odio.

Edit

Example Markup

<table class="details">
  <tbody>
    <tr>
      <th>Section Title</th>
      <td>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dignissim felis nec iaculis consectetur. Suspendisse sodales odio nisi, ut vestibulum arcu egestas id. Proin ut orci mattis, consequat ex vel, luctus quam.</p>
      </td>
      <td class="action">
        <a href="#details">Edit</a>
      </td>
    </tr>
    <tr>
      <th>Section with a List</th>
      <td>
        <ul>
          <li>Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec cursus purus sit amet porta laoreet.</li>
          <li>Aliquam scelerisque non ante a fermentum. Vivamus eros dolor, pharetra id massa id, condimentum gravida eros.</li>
          <li>Fusce congue, est nec porta volutpat, magna ante egestas eros, nec lobortis augue quam eget odio. Duis erat massa, ornare vel enim eu, rhoncus ultricies orci. Vestibulum suscipit nisl sit amet nisi tempus, nec varius mi pretium.</li>
        </ul>
      </td>
      <td class="action">
        <a href="#details">Edit</a>
      </td>
    </tr>
    <tr>
      <th>Section with Two Paragraphs</th>
      <td>
        <p>Vestibulum auctor neque vel libero auctor, nec sagittis tortor sagittis. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc malesuada sodales arcu. Donec eleifend libero eu erat iaculis ornare.</p>
        <p>Quisque placerat quis lacus a sollicitudin. Sed consequat ullamcorper lacus, sed sodales massa efficitur vel. Fusce lacinia magna bibendum, ultrices est sit amet, suscipit felis. Curabitur in nunc sed mi hendrerit pellentesque. Vestibulum non orci ac mauris fringilla ultricies vel eu odio.</p>
      </td>
      <td class="action">
        <a href="#details">Edit</a>
      </td>
    </tr>
  </tbody>
</table>

The details pattern can present categorized data to a user. This is useful for situations like reviewing a complex form submission.

Details list

Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Suspendisse aliquam eros ipsum.

Aenean nec leo sit amet ipsum ornare maximus sed eget mauris. Integer sed urna sit amet neque pharetra pulvinar. Quisque euismod velit erat, eu tristique erat vestibulum et. Aenean in vestibulum augue. Sed varius lobortis lacus eget pretium. Donec pulvinar massa ut diam pretium fringilla posuere at enim. Pellentesque non nisl id purus dapibus laoreet. In iaculis a felis sed placerat. Maecenas nibh quam, hendrerit vitae velit et, finibus ultrices ligula. Aenean tortor leo, luctus finibus lacinia id, vestibulum non ante. Integer a nisi in lacus aliquam ultrices vitae id urna.
Maecenas id nibh aliquam, gravida odio quis, egestas mi.

Maecenas id metus elementum, ullamcorper urna ac, fermentum libero. Suspendisse in molestie nulla, eget ultricies sapien. Integer maximus et felis in rhoncus. Aliquam finibus neque sit amet magna finibus cursus. Quisque tincidunt in est nec maximus. Pellentesque feugiat mollis dui sit amet facilisis. Nunc mattis urna at ligula lacinia, sit amet tristique felis facilisis. Pellentesque ut sem urna. Sed tempor maximus condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent luctus dapibus ligula, eget vulputate erat venenatis vel.
Phasellus sagittis id velit ac egestas.

Cras porta ipsum sit amet ante malesuada tempor. Morbi laoreet tortor vel neque semper, id vestibulum dolor viverra. Nulla sodales bibendum nulla, et luctus magna accumsan vitae. Quisque sed erat ac lacus eleifend feugiat in sit amet velit. Morbi nec auctor magna, tempus iaculis ante. Etiam id sapien ut lorem fermentum eleifend sed ut nisl. Vivamus porta ultricies convallis. In dapibus, mi ac euismod cursus, ante ligula luctus tellus, eget vehicula metus nisi ut nibh. Donec in enim nec erat euismod malesuada vel vitae velit. Duis quam est, fringilla eu ante convallis, pellentesque volutpat lorem. Fusce eros magna, dapibus ac molestie eu, molestie porta magna. Pellentesque eleifend molestie facilisis.
Donec faucibus at risus eget porta.

Vestibulum egestas risus nibh. Morbi consectetur velit congue, egestas sem et, fermentum lorem. Aliquam aliquet ex et tempus lobortis. Donec scelerisque magna vitae pellentesque sodales. Donec venenatis ultricies neque a egestas. Sed semper vehicula odio, at fringilla nisl volutpat et. Vivamus auctor fermentum metus, vitae consequat mi malesuada ac. Ut commodo tellus leo, eget fringilla diam pharetra vitae. Sed leo augue, euismod et velit nec, luctus scelerisque nisi. Aliquam maximus tortor at feugiat laoreet. Aliquam tempus nibh eget nisi laoreet tempus. In eu lectus volutpat, ornare nisl nec, malesuada libero. In finibus nibh non odio finibus varius. Curabitur ac convallis elit. Fusce rutrum dui eget pulvinar rutrum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vestibulum dapibus elit a pellentesque faucibus. Morbi fermentum eu sem sed tempor. Nunc placerat, massa eu gravida dapibus, urna metus fermentum quam, eu pellentesque est turpis vel dolor. Mauris lacinia quam purus, quis consequat dui fringilla porta. Aliquam eget justo vitae neque finibus posuere nec ut ex. Duis et iaculis nulla. Pellentesque ut eleifend quam. In blandit porta est ac convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet, nunc id auctor luctus, ligula turpis accumsan nisi, viverra egestas tortor elit sit amet enim. Maecenas eget sem sed elit placerat laoreet eu at dui.
Suspendisse aliquam eros ipsum.
Aenean nec leo sit amet ipsum ornare maximus sed eget mauris. Integer sed urna sit amet neque pharetra pulvinar. Quisque euismod velit erat, eu tristique erat vestibulum et. Aenean in vestibulum augue. Sed varius lobortis lacus eget pretium. Donec pulvinar massa ut diam pretium fringilla posuere at enim. Pellentesque non nisl id purus dapibus laoreet. In iaculis a felis sed placerat. Maecenas nibh quam, hendrerit vitae velit et, finibus ultrices ligula. Aenean tortor leo, luctus finibus lacinia id, vestibulum non ante. Integer a nisi in lacus aliquam ultrices vitae id urna.
- Fusce hendrerit egestas urna, id commodo quam pulvinar vel.
- Donec sit amet dui eget enim tincidunt iaculis vel at velit.
- Mauris lacus lacus, efficitur eu eros vitae, tincidunt mattis nibh.
Maecenas id nibh aliquam, gravida odio quis, egestas mi.

Maecenas id metus elementum, ullamcorper urna ac, fermentum libero. Suspendisse in molestie nulla, eget ultricies sapien. Integer maximus et felis in rhoncus. Aliquam finibus neque sit amet magna finibus cursus. Quisque tincidunt in est nec maximus. Pellentesque feugiat mollis dui sit amet facilisis. Nunc mattis urna at ligula lacinia, sit amet tristique felis facilisis. Pellentesque ut sem urna. Sed tempor maximus condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent luctus dapibus ligula, eget vulputate erat venenatis vel.
Phasellus sagittis id velit ac egestas.

Cras porta ipsum sit amet ante malesuada tempor. Morbi laoreet tortor vel neque semper, id vestibulum dolor viverra. Nulla sodales bibendum nulla, et luctus magna accumsan vitae. Quisque sed erat ac lacus eleifend feugiat in sit amet velit. Morbi nec auctor magna, tempus iaculis ante. Etiam id sapien ut lorem fermentum eleifend sed ut nisl. Vivamus porta ultricies convallis. In dapibus, mi ac euismod cursus, ante ligula luctus tellus, eget vehicula metus nisi ut nibh. Donec in enim nec erat euismod malesuada vel vitae velit. Duis quam est, fringilla eu ante convallis, pellentesque volutpat lorem. Fusce eros magna, dapibus ac molestie eu, molestie porta magna. Pellentesque eleifend molestie facilisis.
Donec faucibus at risus eget porta.

Vestibulum egestas risus nibh. Morbi consectetur velit congue, egestas sem et, fermentum lorem. Aliquam aliquet ex et tempus lobortis. Donec scelerisque magna vitae pellentesque sodales. Donec venenatis ultricies neque a egestas. Sed semper vehicula odio, at fringilla nisl volutpat et. Vivamus auctor fermentum metus, vitae consequat mi malesuada ac. Ut commodo tellus leo, eget fringilla diam pharetra vitae. Sed leo augue, euismod et velit nec, luctus scelerisque nisi. Aliquam maximus tortor at feugiat laoreet. Aliquam tempus nibh eget nisi laoreet tempus. In eu lectus volutpat, ornare nisl nec, malesuada libero. In finibus nibh non odio finibus varius. Curabitur ac convallis elit. Fusce rutrum dui eget pulvinar rutrum.

Example Markup

<!-- An unordered details list -->
<ul class="details-list">
  <li>
    <p class="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </li>
  <li>
    <p class="summary togglable-toggle has-caret">Suspendisse aliquam eros ipsum.</p>
    <div class="details togglable-content">
      <p>Aenean nec leo sit amet ipsum ornare maximus sed eget mauris...</p>
    </div>
  </li>
  <li>
    <p class="summary togglable-toggle has-caret">Maecenas id nibh aliquam, gravida odio quis, egestas mi.</p>
    <div class="details togglable-content">
      <p>Maecenas id metus elementum, ullamcorper urna ac, fermentum libero...</p>
      <div class="dropdown-set">
        <select>
          <option value="oa">Option A</option>
          <option value="ob">Option B</option>
          <option value="oc">Option C</option>
        </select>
        <button>Go</button>
      </div>
    </div>
  </li>
  <li>
    <p class="summary togglable-toggle has-caret">Phasellus sagittis id velit ac egestas.</p>
    <div class="details togglable-content">
      <p>Cras porta ipsum sit amet ante malesuada tempor...</p>
    </div>
  </li>
  <li>
    <p class="summary togglable-toggle has-caret">Donec faucibus at risus eget porta.</p>
    <div class="details togglable-content">
      <p>Vestibulum egestas risus nibh...</p>
    </div>
  </li>
</ul>

<!-- An ordered details list -->
<ol class="details-list">
  <li>
    <p class="summary togglable-toggle has-caret">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div class="details togglable-content">
      <p>Vestibulum dapibus elit a pellentesque faucibus...</p>
    </div>
  </li>
  <li>
    <p class="summary togglable-toggle has-caret">Suspendisse aliquam eros ipsum.</p>
    <div class="details togglable-content">
      <p>Aenean nec leo sit amet ipsum ornare maximus sed eget mauris...</p>
      <ul>
        <li>Fusce hendrerit egestas urna, id commodo quam pulvinar vel.</li>
        <li>Donec sit amet dui eget enim tincidunt iaculis vel at velit.</li>
        <li>Mauris lacus lacus, efficitur eu eros vitae, tincidunt mattis nibh.</li>
      </ul>
    </div>
  </li>
  <li>
    <p class="summary togglable-toggle has-caret">Maecenas id nibh aliquam, gravida odio quis, egestas mi.</p>
    <div class="details togglable-content">
      <p>Maecenas id metus elementum, ullamcorper urna ac, fermentum libero...</p>
    </div>
  </li>
  <li>
    <p class="summary togglable-toggle has-caret">Phasellus sagittis id velit ac egestas.</p>
    <div class="details togglable-content">
      <p>Cras porta ipsum sit amet ante malesuada tempor...</p>
    </div>
  </li>
  <li>
    <p class="summary togglable-toggle has-caret">Donec faucibus at risus eget porta.</p>
    <div class="details togglable-content">
      <p>Vestibulum egestas risus nibh...</p>
    </div>
  </li>
</ol>

The details list pattern is used when we must present a complex list, as is the case with certain pages listing requirements or a sequence of tasks to complete. For less complex information, a simple list component may suffice.

Checklist

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Vestibulum dapibus elit a pellentesque faucibus. Morbi fermentum eu sem sed tempor. Nunc placerat, massa eu gravida dapibus, urna metus fermentum quam, eu pellentesque est turpis vel dolor. Mauris lacinia quam purus, quis consequat dui fringilla porta. Aliquam eget justo vitae neque finibus posuere nec ut ex. Duis et iaculis nulla. Pellentesque ut eleifend quam. In blandit porta est ac convallis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In imperdiet, nunc id auctor luctus, ligula turpis accumsan nisi, viverra egestas tortor elit sit amet enim. Maecenas eget sem sed elit placerat laoreet eu at dui.
Suspendisse aliquam eros ipsum.

Aenean nec leo sit amet ipsum ornare maximus sed eget mauris. Integer sed urna sit amet neque pharetra pulvinar. Quisque euismod velit erat, eu tristique erat vestibulum et. Aenean in vestibulum augue. Sed varius lobortis lacus eget pretium. Donec pulvinar massa ut diam pretium fringilla posuere at enim. Pellentesque non nisl id purus dapibus laoreet. In iaculis a felis sed placerat. Maecenas nibh quam, hendrerit vitae velit et, finibus ultrices ligula. Aenean tortor leo, luctus finibus lacinia id, vestibulum non ante. Integer a nisi in lacus aliquam ultrices vitae id urna.
Maecenas id nibh aliquam, gravida odio quis, egestas mi.

Maecenas id metus elementum, ullamcorper urna ac, fermentum libero. Suspendisse in molestie nulla, eget ultricies sapien. Integer maximus et felis in rhoncus. Aliquam finibus neque sit amet magna finibus cursus. Quisque tincidunt in est nec maximus. Pellentesque feugiat mollis dui sit amet facilisis. Nunc mattis urna at ligula lacinia, sit amet tristique felis facilisis. Pellentesque ut sem urna. Sed tempor maximus condimentum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent luctus dapibus ligula, eget vulputate erat venenatis vel.
Phasellus sagittis id velit ac egestas.

Cras porta ipsum sit amet ante malesuada tempor. Morbi laoreet tortor vel neque semper, id vestibulum dolor viverra. Nulla sodales bibendum nulla, et luctus magna accumsan vitae. Quisque sed erat ac lacus eleifend feugiat in sit amet velit. Morbi nec auctor magna, tempus iaculis ante. Etiam id sapien ut lorem fermentum eleifend sed ut nisl. Vivamus porta ultricies convallis. In dapibus, mi ac euismod cursus, ante ligula luctus tellus, eget vehicula metus nisi ut nibh. Donec in enim nec erat euismod malesuada vel vitae velit. Duis quam est, fringilla eu ante convallis, pellentesque volutpat lorem. Fusce eros magna, dapibus ac molestie eu, molestie porta magna. Pellentesque eleifend molestie facilisis.
Donec faucibus at risus eget porta.

Vestibulum egestas risus nibh. Morbi consectetur velit congue, egestas sem et, fermentum lorem. Aliquam aliquet ex et tempus lobortis. Donec scelerisque magna vitae pellentesque sodales. Donec venenatis ultricies neque a egestas. Sed semper vehicula odio, at fringilla nisl volutpat et. Vivamus auctor fermentum metus, vitae consequat mi malesuada ac. Ut commodo tellus leo, eget fringilla diam pharetra vitae. Sed leo augue, euismod et velit nec, luctus scelerisque nisi. Aliquam maximus tortor at feugiat laoreet. Aliquam tempus nibh eget nisi laoreet tempus. In eu lectus volutpat, ornare nisl nec, malesuada libero. In finibus nibh non odio finibus varius. Curabitur ac convallis elit. Fusce rutrum dui eget pulvinar rutrum.

Example Markup

<ul class="details-list checklist">
  <li>
    <input type="checkbox" id="checklist-0" />
    <label for="checklist-0"></label>
    <p class="summary togglable-toggle has-caret">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div class="details togglable-content">
      <p>Vestibulum dapibus elit a pellentesque faucibus...</p>
    </div>
  </li>
  <li>
    <input type="checkbox" id="checklist-1" />
    <label for="checklist-1"></label>
    <p class="summary togglable-toggle has-caret">Suspendisse aliquam eros ipsum.</p>
    <div class="details togglable-content">
      <p>Aenean nec leo sit amet ipsum ornare maximus sed eget mauris...</p>
    </div>
  </li>
  <li>
    <input type="checkbox" id="checklist-2" />
    <label for="checklist-2"></label>
    <p class="summary togglable-toggle has-caret">Maecenas id nibh aliquam, gravida odio quis, egestas mi.</p>
    <div class="details togglable-content">
      <p>Maecenas id metus elementum, ullamcorper urna ac, fermentum libero...</p>
    </div>
  </li>
  <li>
    <input type="checkbox" id="checklist-3" />
    <label for="checklist-3"></label>
    <p class="summary togglable-toggle has-caret">Phasellus sagittis id velit ac egestas.</p>
    <div class="details togglable-content">
      <p>Cras porta ipsum sit amet ante malesuada tempor...</p>
    </div>
  </li>
  <li>
    <input type="checkbox" id="checklist-4" />
    <label for="checklist-4"></label>
    <p class="summary togglable-toggle has-caret">Donec faucibus at risus eget porta.</p>
    <div class="details togglable-content">
      <p>Vestibulum egestas risus nibh...</p>
    </div>
  </li>
</ul>

This pattern is intended for presenting information, particularly with complex requirements. It should not be used with actual forms which users are intended to use to submit information.

Provide a unique anchor for each checklist, and a link to the top at the end of each section after the first.

numbered sections should not include checkboxes or labels.

Chunk list

Teaching Experience and Skills

Candidates must have training and/or experience in classroom presentations and management skills.

Examples of these skills includes:
- Presenting procedural and conceptual information in a clear and concise manner.
- Facilitating group discussion and interaction using instructional media presentation.
Discipline Area Experience and Skills

The candidate must have at least 10 years of project management to be credible as a Lead Appraiser.

At least two of these years must include domain speciﬁc management of personnel.
Academic Credentials

Candidates must have a Bachelor’s degree in a related area or equivalent experience.
Appraisal Experience and Skills

Participation as an appraisal team member on:
- At least two SCAMPI A appraisals,
- or One SCAMPI A and two SCAMPI B or C appraisals
- These appraisals must be done withing 24 months prior to desired training
Language Experience and Skills

Fluency in English is required to become a CMMI Certiﬁed Lead Appraiser.

Example Markup

<ul class="chunked">
  <li>
    <h4>Teaching Experience and Skills</h4>
    <p>Candidates must have training and/or experience in classroom presentations and management skills.</p>
    <p>Examples of these skills includes:</p>
    <ul>
      <li>Presenting procedural and conceptual information in a clear and concise manner.</li>
      <li>Facilitating group discussion and interaction using instructional media presentation.</li>
    </ul>
  </li>
  <li>
    <h4>Discipline Area Experience and Skills</h4>
    <p>The candidate must have at least 10 years of project management to be credible as a Lead Appraiser.</p>
    <p>At least two of these years must include domain speciﬁc management of personnel.</p>
  </li>
  <li>
    <h4>Academic Credentials</h4>
    <p>Candidates must have a Bachelor&rsquo;s degree in a related area or equivalent experience.</p>
  </li>
  <li>
    <h4>Appraisal Experience and Skills</h4>
    <p>Participation as an appraisal team member on:</p>
    <ul>
      <li>At least two SCAMPI A appraisals,</li>
      <li>or One SCAMPI A and two SCAMPI B or C appraisals</li>
      <li>These appraisals must be done withing 24 months prior to desired training</li>
    </ul>
  </li>
  <li>
    <h4>Language Experience and Skills</h4>
    <p>Fluency in English is required to become a CMMI Certiﬁed Lead Appraiser.</p>
  </li>
</ul>

This pattern provides a way to present more complex lists, where each item may involve its own heading, multiple paragraphs, or sub-lists.

Features list

Meet customer expectations across the entire product lifecycle from delivery to maintenance and operations
Leverage revenue-enhancing and cost-cutting opportunities to deliver products and services quickly, effectively, and consistently

Improve product development quality and consistency to reduce defects
Lower costs through improved planning, scheduling, and budgeting processes
Ensure products and services are delivered quickly and efficiently with little to no re-work

Example Markup

<!-- A large icon features list -->
<ul class="features-list">
  <li>
    <img alt="icon" src="icon.svg" />
    <p>Meet customer expectations across the entire product lifecycle
      from delivery to maintenance and operations</p>
  </li>
  <li>
    <img alt="icon" src="icon.svg" />
    <p>Leverage revenue-enhancing and cost-cutting opportunities to deliver
      products and services quickly, effectively, and consistently</p>
  </li>
</ul>

<!-- A small icon features list -->
<ul class="features-list small">
  <li>
    <img alt="icon" src="icon.svg" />
    <p>Improve product development quality and consistency to reduce defects</p>
  </li>
  <li>
    <img alt="icon" src="icon.svg" />
    <p>Lower costs through improved planning, scheduling, and budgeting processes</p>
  </li>
  <li>
    <img alt="icon" src="icon.svg" />
    <p>Ensure products and services are delivered quickly and efficiently with
      little to no re-work</p>
  </li>
</ul>

This pattern is used to highlight a list of features accommodated by icons.

Events list

Cairo, Egypt

12 December, 2017, 8:00 AM 13 December, 2017, 6:00 PM 12-13 Dec., 2017, 8:00 AM - 6:00 PM

3rd Africa and Middle East Conference on Software Engineering (AMECSE 2017)

Fusce sollicitudin mollis eros, ut mattis nunc imperdiet vitae. Phasellus purus purus, iaculis ac viverra et, tempus quis ligula. Phasellus vel auctor tortor. Integer vitae pretium dolor, nec condimentum felis.
- Conference
- Middle East
- Conference
Springhill Suites Gaithersburg 9715 Washington Blvd Gaithersburg, VA 20878 United States

4 December, 2017, 8:00 AM 8 December, 2017, 6:00 PM 4-8 Dec., 2017, 8:00 AM - 6:00 PM

Advancing Enterprise Data Management Capabilities

Phasellus consectetur at felis sit amet fringilla. Nullam aliquam venenatis magna, nec lobortis massa. Vestibulum eleifend efficitur nisl id fringilla.
- CMMI Institute Course
- Data Management
- North America
- Partner

Example Markup

<ul class="events-list">
  <li class="conference" itemscope="itemscope" itemtype="http://schema.org/Event">
    <div class="location" itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress">
      <span itemprop="addressLocality">Cairo</span>, <span itemprop="addressCountry">Egypt</span>
    </div>
    <div class="time">
      <span class="start" itemprop="startDate" content="2017-12-12T08:00">12 December, 2017, 8:00 AM</span>
      <span class="end" itemprop="endDate" content="2017-12-13T18:00">13 December, 2017, 6:00 PM</span>
      <span class="human">12-13 Dec., 2017, 8:00 AM - 6:00 PM</span>
    </div>
    <p class="name" itemprop="name">3rd Africa and Middle East Conference on Software Engineering (AMECSE 2017)</p>
    <p class="description" itemprop="description">Fusce sollicitudin mollis eros, ut mattis nunc imperdiet vitae. Phasellus purus purus, iaculis ac viverra et, tempus quis ligula. Phasellus vel auctor tortor. Integer vitae pretium dolor, nec condimentum felis.</p>
    <ul class="tags">
      <li data-category="Event Type">Conference</li>
      <li data-category="Region">Middle East</li>
      <li data-category="Event Type">Conference</li>
    </ul>
  </li>
  <li class="cmmi" itemscope="itemscope" itemtype="http://schema.org/Event">
    <div class="location" itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress">
      <span itemprop="name">Springhill Suites Gaithersburg</span>
      <span itemprop="streetAddress">9715 Washington Blvd</span>
      <span itemprop="addressLocality">Gaithersburg</span>,
      <span itemprop="addressRegion">VA</span>
      <span itemprop="postalCode">20878</span>
      <span itemprop="addressCountry">United States</span>
    </div>
    <div class="time">
      <span class="start" itemprop="startDate" content="2017-12-04T08:00">4 December, 2017, 8:00 AM</span>
      <span class="end" itemprop="endDate" content="2017-12-08T18:00">8 December, 2017, 6:00 PM</span>
      <span class="human">4-8 Dec., 2017, 8:00 AM - 6:00 PM</span>
    </div>
    <p class="name" itemprop="name">Advancing Enterprise Data Management Capabilities</p>
    <p class="description" itemprop="description"> Phasellus consectetur at felis sit amet fringilla. Nullam aliquam venenatis magna, nec lobortis massa. Vestibulum eleifend efficitur nisl id fringilla.</p>
    <ul class="tags">
      <li data-category="Event Type">CMMI Institute Course</li>
      <li data-category="CMMI View">Data Management</li>
      <li data-category="Region">North America</li>
      <li data-category="Event Type">Partner</li>
    </ul>
  </li>
</ul>

The events listing pattern is used to present a list of events, including summaries and locations.

Example: The Upcoming Courses page on cmmiinstitute.com.

Events list

Emerson Ballroom

1 May, 2018, 7:00 AM 1 May, 2018, 7:45 AM 7:00 - 7:45 AM

Breakfast and Registration

Fusce sollicitudin mollis eros, ut mattis nunc imperdiet vitae. Phasellus purus purus, iaculis ac viverra et, tempus quis ligula. Phasellus vel auctor tortor. Integer vitae pretium dolor, nec condimentum felis.
Edison Ballroom

1 May, 2018, 8:00 AM 1 May, 2018, 9:00 AM 8:00 - 9:00 AM

In Space, Capability Still Counts
Frans Johansson
Fusce sollicitudin mollis eros, ut mattis nunc imperdiet vitae. Phasellus purus purus, iaculis ac viverra et, tempus quis ligula. Phasellus vel auctor tortor. Integer vitae pretium dolor, nec condimentum felis.
Tesla Ballroom

1 May, 2018, 9:15 AM 1 May, 2018, 10:00 AM 9:15 - 10:00 AM

CC2018 Track: Organizational Transformation and Improvement Event

Speaker: Firstname Lastname

Fusce sollicitudin mollis eros, ut mattis nunc imperdiet vitae. Phasellus purus purus, iaculis ac viverra et, tempus quis ligula. Phasellus vel auctor tortor. Integer vitae pretium dolor, nec condimentum felis.

Example Markup

<ul class="conference-events-list">
  <li itemscope="itemscope" itemtype="http://schema.org/Event">
    <div class="location">Emerson Ballroom</div>
    <img src="https://cdn.cmmiinstitute.com/icons/cc-food.svg" alt="Breakfast" class="track" />
    <div class="time">
      <span class="start" itemprop="startDate" content="2018-05-01T07:00">1 May, 2018, 7:00 AM</span>
      <span class="end" itemprop="endDate" content="2018-01-01T07:45">1 May, 2018, 7:45 AM</span>
      <span class="human">7:00 - 7:45 AM</span>
    </div>
    <p class="name" itemprop="name">Breakfast and Registration</p>
    <p class="description" itemprop="description">Fusce sollicitudin mollis eros, ut mattis nunc imperdiet vitae. Phasellus purus purus, iaculis ac viverra et, tempus quis ligula. Phasellus vel auctor tortor. Integer vitae pretium dolor, nec condimentum felis.</p>
  </li>
  <li itemscope="itemscope" itemtype="http://schema.org/Event" class="keynote">
    <div class="location">Edison Ballroom</div>
    <img src="https://cdn.cmmiinstitute.com/icons/cc-keynote.svg" alt="Keynote" class="track" />
    <div class="time">
      <span class="start" itemprop="startDate" content="2018-05-01T08:00">1 May, 2018, 8:00 AM</span>
      <span class="end" itemprop="endDate" content="2018-01-01T09:00">1 May, 2018, 9:00 AM</span>
      <span class="human">8:00 - 9:00 AM</span>
    </div>
    <p class="name" itemprop="name">In Space, Capability Still Counts</p>
    <a href="#" class="speaker">
      <img src="https://cdn.cmmiinstitute.com/design/example-person01.jpg" alt="Frans Johansson" />
      Frans Johansson
    </a>
    <p class="description" itemprop="description">Fusce sollicitudin mollis eros, ut mattis nunc imperdiet vitae. Phasellus purus purus, iaculis ac viverra et, tempus quis ligula. Phasellus vel auctor tortor. Integer vitae pretium dolor, nec condimentum felis.</p>
  </li>
  <li itemscope="itemscope" itemtype="http://schema.org/Event">
    <div class="location">Tesla Ballroom</div>
    <img src="https://cdn.cmmiinstitute.com/icons/cc2018-track-org.svg" alt="Appraisals" class="track" />
    <div class="time">
      <span class="start" itemprop="startDate" content="2018-05-01T09:15">1 May, 2018, 9:15 AM</span>
      <span class="end" itemprop="endDate" content="2018-01-01T10:00">1 May, 2018, 10:00 AM</span>
      <span class="human">9:15 - 10:00 AM</span>
    </div>
    <p class="name" itemprop="name">CC2018 Track: Organizational Transformation and Improvement Event</p>
    <p><strong>Speaker:</strong> <a href="#" class="speaker">Firstname Lastname</a></p>
    <p class="description" itemprop="description">Fusce sollicitudin mollis eros, ut mattis nunc imperdiet vitae. Phasellus purus purus, iaculis ac viverra et, tempus quis ligula. Phasellus vel auctor tortor. Integer vitae pretium dolor, nec condimentum felis.</p>
  </li>
</ul>

The conference events listing pattern is used to present a list of events at a conference, so its use is more specific than the events list pattern.

Example: The program for the Capability Counts conference website.

Event details

Monday

4

December, 2017
to
Friday

8

December, 2017

Training

Lead Appraiser Training

Location

Springhill Suites Gaithersburg 9715 Washington Blvd Gaithersburg, VA 20878 United States

Date & Time

4 December, 2017, 8:00 AM 8 December, 2017, 6:00 PM Monday, 4 Dec. - Friday, 8 Dec., 2017
8:00 AM - 6:00 PM

Instructors

Kieran Doyle
Pascal Rabbath

Certification Track

Certiﬁed Lead Appraiser

To learn more about this certiication and any other certiication the CMMI Institute offers, visit Certiﬁcations.

Pricing

$7,200 USD

Description

Organizations around the world work diligently to achieve performance excellence based on CMMI’s benchmark practices. CMMI Lead Appraisers use the Standard CMMI Appraisal Method for Process Improvement (SCAMPI) with thousands of organizations to conﬁrm and publicize their accomplishments.

Event Organizer

The CMMI Institute is the steward of CMMI. The CMMI was originally developed at the Software Engineering Institute, a federally funded research and development center within Carnegie Mellon University. In 2016, CMMI Institute was acquired by ISACA.

Refund Policy

The CMMI Institute will issue refunds (less a $75 administrative fee) for written cancellations received no less than 30 days before the course begins. If notiﬁcation to cancel or reschedule the class is provided to [email protected] less than 30 days prior to the start date of the class, students or their sponsoring partners will be required to pay for 100% of the class tuition.

CMMI is not responsible for courses cancelled due to acts of nature. CMMI Institute makes the ﬁnal decision about whether a course will be held 21 days prior to the course start date; CMMI Institute reserves the right to cancel courses in cases where minimum student enrollment numbers have not been met.

CMMI Institute is not responsible for reimbursing airfare or hotel costs. Students are advised not to schedule airfare or book hotel stay until 21 days prior to the class start date.

Example Markup

<div class="event row" itemscope="itemscope" itemtype="http://schema.org/Event">
  <ol class="days col3">
    <li>
      <p class="weekday">Monday</p>
      <p class="date">4</p>
      <p class="month">December, 2017</p>
    </li>
    <li class="to">to</li>
    <li>
      <p class="weekday">Friday</p>
      <p class="date">8</p>
      <p class="month">December, 2017</p>
    </li>
  </ol>
  <div class="col9">
    <p class="type">Training</p>
    <h2 itemprop="name">Lead Appraiser Training</h2>
    <div class="location" itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress">
      <h3>Location</h3>
      <strong itemprop="name">Springhill Suites Gaithersburg</strong>
      <span itemprop="streetAddress">9715 Washington Blvd</span>
      <span itemprop="addressLocality">Gaithersburg</span>,
      <span itemprop="addressRegion">VA</span>
      <span itemprop="postalCode">20878</span>
      <span itemprop="addressCountry">United States</span>
    </div>
    <div class="time">
      <h3>Date &amp; Time</h3>
      <span class="start" itemprop="startDate" content="2017-12-04T08:00">4 December, 2017, 8:00 AM</span>
      <span class="end" itemprop="endDate" content="2017-12-08T18:00">8 December, 2017, 6:00 PM</span>
      <span class="human"><strong>Monday, 4 Dec. - Friday, 8 Dec., 2017</strong><br />8:00 AM - 6:00 PM</span>
    </div>
    <div class="row details">
      <div class="col3">
        <h3>Instructors</h3>
        <ul class="instructors">
          <li>Kieran Doyle</li>
          <li>Pascal Rabbath</li>
        </ul>
        <h3>Certification Track</h3>
        <p>Certiﬁed Lead Appraiser</p>
        <p class="details">To learn more about this certiication and any other certiication the CMMI Institute offers, visit <a href="#">Certiﬁcations</a>.</p>
        <h3>Pricing</h3>
        <p class="price">$7,200 USD</p>
        <a href="#" class="button">Register Now</a>
      </div>
      <div class="col5 push1">
        <h3>Description</h3>
        <div itemprop="description">
          <p>Organizations around the world work diligently to achieve performance excellence based on CMMI’s benchmark practices. CMMI Lead Appraisers use the Standard CMMI Appraisal Method for Process Improvement (SCAMPI) with thousands of organizations to conﬁrm and publicize their accomplishments.</p>
        </div>
        <h3>Event Organizer</h3>
        <p>The CMMI Institute is the steward of CMMI. The CMMI was originally developed at the Software Engineering Institute, a federally funded research and development center within Carnegie Mellon University. In 2016, CMMI Institute was acquired by ISACA.</p>
        <h3>Refund Policy</h3>
        <p>The CMMI Institute will issue refunds (less a $75 administrative fee) for written cancellations received no less than 30 days before the course begins. If notiﬁcation to cancel or reschedule the class is provided to [email protected] less than 30 days prior to the start date of the class, students or their sponsoring partners will be required to pay for 100% of the class tuition.</p>
        <p>CMMI is not responsible for courses cancelled due to acts of nature. CMMI Institute makes the ﬁnal decision about whether a course will be held 21 days prior to the course start date; CMMI Institute reserves the right to cancel courses in cases where minimum student enrollment numbers have not been met.</p>
        <p>CMMI Institute is not responsible for reimbursing airfare or hotel costs. Students are advised not to schedule airfare or book hotel stay until 21 days prior to the class start date.</p>
        <ul class="tags">
          <li><a href="#">CMMI Institute Course</a></li>
          <li><a href="#">Data Management</a></li>
          <li><a href="#">North America</a></li>
          <li><a href="#">Partner</a></li>
        </ul>
        <a href="#" class="button">Register Now</a>
      </div>
    </div>
  </div>
</div>

If the event is one, two, or three days, list each day of the event. If the event spans more than three days, only show the first and last day, with <li class="to">to</li> in between, as shown in the preview.

The start and end tags are always hidden. They provide a place to add Event Schema.org microdata. At small sizes, the human tag is shown, while larger windows display the days list.

The location element uses Location Schema.org microdata. This is used to style the address as a block or inline, depending on browser size, so it is important to use the proper schema markup.

Example: Any of the individual listings linked to from the Upcoming Courses page on cmmiinstitute.com.

Event details (abbreviated)

Monday

4

December, 2017
to
Friday

8

December, 2017

Lead Appraiser Training

Springhill Suites Gaithersburg

9715 Washington Blvd Gaithersburg, VA 20878 United States

4 December, 2017, 8:00 AM 8 December, 2017, 6:00 PM Monday, 4 Dec. - Friday, 8 Dec., 2017
8:00 AM - 6:00 PM

Example Markup

<div class="event abbreviated">
  <ol class="days" itemscope="itemscope" itemtype="http://schema.org/Event">
    <li>
      <p class="weekday">Monday</p>
      <p class="date">4</p>
      <p class="month">December, 2017</p>
    </li>
    <li class="to">to</li>
    <li>
      <p class="weekday">Friday</p>
      <p class="date">8</p>
      <p class="month">December, 2017</p>
    </li>
  </ol>
  <h2 itemprop="name">Lead Appraiser Training</h2>
  <div class="location" itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress">
    <p itemprop="name">Springhill Suites Gaithersburg</p>
    <span itemprop="streetAddress">9715 Washington Blvd</span>
    <span itemprop="addressLocality">Gaithersburg</span>,
    <span itemprop="addressRegion">VA</span>
    <span itemprop="postalCode">20878</span>
    <span itemprop="addressCountry">United States</span>
  </div>
  <div class="time">
    <span class="start" itemprop="startDate" content="2017-12-04T08:00">4 December, 2017, 8:00 AM</span>
    <span class="end" itemprop="endDate" content="2017-12-08T18:00">8 December, 2017, 6:00 PM</span>
    <span class="human"><span class="days">Monday, 4 Dec. - Friday, 8 Dec., 2017<br /></span>8:00 AM - 6:00 PM</span>
  </div>
</div>

This pattern provides an abbreviated version of the event details pattern above. It assumes a white background.

Course registration card

$7200.00 Mastering Course

5 Days Time Commitment

This is a warning message.

$7200.00 Mastering Course

5 Days Time Commitment

This is an error message.

Example Markup

<!-- w/ warning message -->
<div class="course-register-card card">
  <p><strong>$7200.00</strong> Mastering Course</p>
  <p><strong>5 Days</strong> Time Commitment</p>
  <div class="message warning">
    <p>This is a warning message.</p>
  </div>
  <button>Register</button>
</div>

<!-- w/ error message -->
<div class="course-register-card card">
  <p><strong>$7200.00</strong> Mastering Course</p>
  <p><strong>5 Days</strong> Time Commitment</p>
  <div class="message error">
    <p>This is an error message.</p>
  </div>
  <button>Register</button>
</div>

The course registration card should only be shown on pages where a user can register for a course. It is used in a 4-column sidebar on the right-hand side. The card should be the first element in this sidebar, and the sidebar should use the .overhang class so that the card overhangs the page header above it. The message elements can be used to provide short, critical messages, usually pointing out more detailed information that should be on the page before the user makes a commitment.

Site header

Demo

Example Markup

<header class="site page">
  <h1>CMMI Institute</h1>
  <nav>
    <ul class="primary">
      <li><a href="https://cmmiinstitute.com/products">Products</a></li>
      <li><a href="https://cmmiinstitute.com/learning">Learning</a></li>
      <li><a href="https://cmmiinstitute.com/appraisals">Appraisals</a></li>
      <li><a href="https://cmmiinstitute.com/news">News</a></li>
    </ul>
    <ul class="secondary">
      <li><a href="https://cmmiinstitute.com/support">Support</a></li>
      <li class="cart">
        <a href="https://cmmiinstitute.com/store/checkout/shopping-cart">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 27.87">
            <path d="M31.71,3.94a1.28,1.28,0,0,0-1-.47H7l-.4-2.39A1.31,1.31,0,0,0,5.32,0h-4A1.31,1.31,0,0,0,0,1.31,1.34,1.34,0,0,0,1.31,2.63H4.18L7.65,22.34A1.3,1.3,0,0,0,9,23.42h1.59a2.36,2.36,0,1,0,2.22,0H23.22a2.36,2.36,0,1,0,2.22,0h1.38a1.32,1.32,0,1,0,0-2.63H10l-.4-2.26H28.51a1.36,1.36,0,0,0,1.31-1.07L32,5.05A1.41,1.41,0,0,0,31.71,3.94Z" />
          </svg>
          <span>(0)</span>
        </a>
      </li>
      <li><a href="https://cmmiinstitute.com/login" class="button">Sign In</a></li>
      <li><a href="https://cmmiinstitute.com/register" class="button">Register</a></li>
    </ul>
    <form class="search-form" action="https://cmmiinstitute.com/site-search">
      <input type="search" placeholder="Search" name="searchtext" />
      <button>Go</button>
    </form>
  </nav>
  <div class="content">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Fusce nec metus vestibulum, ornare quam eu, aliquam enim...</p>
  </div>
</header>

The markup provided for this pattern is subject to change, particularly in the specific URLs used for each link.

The current class in the primary navigation should mark the section that the user is currently in.

The megamenu can be attached to the index page header, conference header, dashboard header, or standard page header. Apply that pattern’s additional classes to the <header> tag (in addition to site. Then add the content of that header below this, inside of a <div class="content"> tag.

Specify the domain that the megamenu links to by setting the data-domain attribute on the <header> tag. If not provided, it defaults to https://cmmiinstitute.com

Specify the JSON configuration for the megamenu's content by setting the data-src attribute on the <header> tag. If not provided, it defaults to https://cmmiinstitute.com/json/megamenu. The pattern library loads a configuration file which is used initially. It will then attempt to fetch the configuration from the URL provided. If it succeeds, it will use that data; otherwise, it will proceed with the data bundled with the pattern library. This allows the megamenu to be updated more frequently than the pattern library. While we will update the pattern library with such changes, adding them to the bundled data, this keeps the menu more up-to-date in the interrim between menu updates and new pattern library releases.

Hero header

Build Capability,
Drive Performance

High-performance organizations around the world have achieved demonstrable, sustainable business results with CMMI®.

Example Markup

<header class="hero global-leader">
  <div class="content">
    <h1><span>Global</span> Leader</h1>
    <p>in the advancement of best practices in people, process, and technology</p>
    <a href="#" class="smooth-scroll scroll-prompt">
      <svg viewBox="0 0 120 80" xmlns="http://www.w3.org/2000/svg">
        <polygon points="60,80 0,20 20,0 60,40 100,0 120,20"></polygon>
      </svg>
    </a>
  </div>
</header>

The hero header is used on the CMMI Institute homepage.

Index header

About Us

CMMI^© provides guidance for efficient, effective improvement across multiple process disciplines in an organization.

Example Markup

<header class="index index-aboutus">
  <div class="content">
    <h1>About Us</h1>
    <p>CMMI<sup>©</sup> provides guidance for efficient, effective improvement across multiple process disciplines in an organization.</p>
  </div>
</header>

The index header is used on major landing pages. Each index page header has its own specific class to assign background images and gradients. Current index page headers are:

index-aboutus (shown above)
index-design (used on this page)
index-training
index-resources
index-partners
index-news
index-certification
index-appraisals
index-cmmi
index-cmmi-dev
index-cmmi-svc
index-cmmi-sm
index-cmmi-pm
index-dmm
index-mddap

Conference header

Capability Counts 2019

30 April & 1 May, 2019

Reston, VA

Submit an Abstract

Example Markup

<header class="conference capability-counts-2019" itemscope="itemscope" itemtype="http://schema.org/Event">
  <div class="content videobg">
    <div class="video-container">
      <video autoplay="" loop="" muted="" plays-inline="">
        <source src="video.mp4" type="video/mp4" />
      </video>
    </div>
    <h1 itemprop="name">Capability Counts <span>2019</span></h1>
    <div class="register">
      <p><span itemprop="startDate" content="2019-04-30T08:00">30 April</span> &amp; <span itemprop="endDate" content="2019-05-01T08:00">1 May, 2019</span></p>
      <p><span itemprop="addressLocality">Reston</span>, <span itemprop="addressRegion">VA</span></p>
      <a href="#header-conf">Register Now</a>
    </div>
  </div>
</header>

The conference header is used on conference pages. It includes Event markup in keeping with Schema.org

Dashboard header

Welcome, Nikki

Edit Profile

Contact CMMI Institute

Example Markup

<header class="dashboard">
  <div class="content">
    <img src="photo.jpg" alt="Nikki Jackson" />
    <h1>Welcome, Nikki</h1>
    <p><a href="#">Edit Profile</a></p>
    <a href="#" class="contact">Contact CMMI Institute</a>
  </div>
</header>

The dashboard header is used only inside the dashboard.

Standard header

Lorem ipsum dolor sit amet

Fusce nec metus vestibulum, ornare quam eu, aliquam enim. Sed sodales risus vel leo mattis placerat. Phasellus convallis iaculis ex, non elementum ante sollicitudin sed. Nullam tincidunt tincidunt rutrum. Aliquam semper magna non aliquet pharetra. Phasellus dolor elit, laoreet vitae hendrerit euismod, fermentum vitae turpis. Nulla facilisi.

Example Markup

<header class="page">
  <div class="content">
    <h1>Lorem ipsum dolor sit amet</h1>
    <p>Fusce nec metus vestibulum, ornare quam eu, aliquam enim...</p>
  </div>
</header>

The standard header can be used on all other pages, where the more specific header patterns provided above do not apply.

Page tab navigation

Example Markup

<nav class="tabs">
  <ul>
    <li class="active"><a href="#page-tab-nav">Page #1</a></li>
    <li><a href="#page-tab-nav">Page #2</a></li>
    <li><a href="#page-tab-nav">Page #3</a></li>
  </ul>
</nav>

This pattern provides a secondary level of navigation below the site header, and besides the side navigation component. This pattern should generally be avoided. Instances where it seems useful are more likely areas where some time improving the information architecture would be a better solution.

Process steps

Example Markup

<nav class="process-steps">
  <ul>
    <li class="done"><a href="#">Step I Finished</a></li>
    <li class="current">
      <a href="#">Step I&rsquo;m On</a>
    </li>
    <li>Step I Have To Do</li>
  </ul>
</nav>

This pattern provides a user with clear feedback on where she is currently in a process. Previous steps should be links that allow her to jump back to those steps.

How it works

Select your Certification Program

The CMMI Institute offers six different certifications. Discover which certification matches your professional development goals and take your career to the next level.
View Certifications
Apply or enroll in training required for your program

Once you’ve determined your certification program, ﬁnd a training course offering that ﬁts into your schedule. The CMMI Institute offers courses across the world.
View Training
Recieve and maintain your Certification

Congratulations! You’re a CMMI Institute-Certified individual. Don’t forget to maintain this high level of competency and skills by adhering to the renewal policies.
Recertification

Example Markup

<ol class="how-it-works">
  <li>
    <h4>Select your Certification Program</h4>
    <p>The CMMI Institute offers six different certifications...</p>
    <a href="#" class="button">View Certifications</a>
  </li>
  <li>
    <h4>Apply or enroll in training required for your program</h4>
    <p>Once you&rsquo;ve determined your certification program...</p>
    <a href="#" class="button">View Training</a>
  </li>
  <li>
    <h4>Recieve and maintain your Certification</h4>
    <p>Congratulations! You&rsquo;re a CMMI Institute-Certified individual...</p>
    <a href="#" class="button">Recertification</a>
  </li>
</ol>

This pattern provides the user with a quick introduction to the steps involved in a potentially complex process. This pattern is best suited to situations where the process can be broken down into specifically three steps. For more steps, see the chunk list pattern.

Solution choice

Capability Maturity Model Integration (CMMI)®

Transform your organizational performance by improving capabilities that will drive meaningful business results.
Get Started
Data Management Maturity (DMM)℠

Optimize your data assets to uncover strategic insights that lead to a greater competitive advantage.
Get Started
Medical Device Discovery Appraisal Program (MDDAP)

Elevate your focus from baseline regulatory compliance to sustained, predictive practices in advancing medical device quality and safety.
Get Started
Cybersecurity Capability Assessment

Build board confidence with the CMMI’s Risk-based Assessment Platform.
Get Started

Example Markup

<ul class="solution-choice">
  <li>
    <img src="icon.svg" alt="Capability Maturity Model Integration (CMMI)" />
    <h3>Capability Maturity Model Integration (CMMI)&reg;</h3>
    <div class="expand">
      <p><strong>Transform</strong> your organizational performance by improving capabilities that will drive meaningful business results.</p>
      <a href="#" class="get-started">Get Started</a>
    </div>
  </li>
  <li>
    <img src="icon.svg" alt="Data Management Maturity (DMM)" />
    <h3>Data Management Maturity (DMM)&#8480;</h3>
    <div class="expand">
      <p><strong>Optimize</strong> your data assets to uncover strategic insights that lead to a greater competitive advantage.</p>
      <a href="#" class="get-started">Get Started</a>
    </div>
  </li>
  <li>
    <img src="icoon.svg" alt="Medical Device Discovery Appraisal Program (MDDAP)" />
    <h3>Medical Device Discovery Appraisal Program (MDDAP)</h3>
    <div class="expand">
      <p><strong>Elevate</strong> your focus from baseline regulatory compliance to sustained, predictive practices in advancing medical device quality and safety.</p>
      <a href="#" class="get-started">Get Started</a>
    </div>
  </li>
  <li>
    <img src="icon.svg" alt="Cybersecurity Capability Assessment" />
    <h3>Cybersecurity Capability Assessment</h3>
    <div class="expand">
      <p><strong>Build</strong> board confidence with the CMMI&rsquo;s Risk-based Assessment Platform.</p>
      <a href="#" class="get-started">Get Started</a>
    </div>
  </li>
</ul>

This pattern gives users a choice between several major topics or solutions.

Challenge/solution navigator

Does your organization…
- …struggle to deliver products and services that really satisfy all of your users’ needs?
- …often find it difficult to eliminate defects in your products and services?
- …want to design a product or service that gives you the edge over the competition?
Then you need the CMMI for Development (CMMI-DEV) Model
The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.

Luc Chiasson, Group Leader of Quality Assurance and Continuous Improvement, CAE
How it can help

The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.

Key Process Areas
- Product Integration
- Requirements Development
- Technical Solution
- Validation
- Verification
Download a Free Copy of the Model
Does your organization…
- …find it difficult to align resources to meet service demand?
- …aspire to maintain a consistently high level of customer service?
- …struggle to deliver services on time and within a budget?
Then you need the CMMI for Services (CMMI-SVC) Model
The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.

Luc Chiasson, Group Leader of Quality Assurance and Continuous Improvement, CAE
How it can help

The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.

Key Process Areas
- Product Integration
- Requirements Development
- Technical Solution
- Validation
- Verification
Download a Free Copy of the Model
Does your organization…
- …spend too much time solving your problems with suppliers?
- …worry that your suppliers don’t understand your requirements and expectations?
- …want to improve your operational efficiencies by leveraging supplier’s capabilities to deliver quality solutions?
Then you need the CMMI for Acquisitions (CMMI-ACQ) Model
The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.

Luc Chiasson, Group Leader of Quality Assurance and Continuous Improvement, CAE
How it can help

The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.

Key Process Areas
- Product Integration
- Requirements Development
- Technical Solution
- Validation
- Verification
Download a Free Copy of the Model
Does your organization…
- …aspire to build a capable workforce to provide service excellence?
- …worry about your employees having the right resources for their success?
- …want to increase employee morale and limit turnover?
Then you need the CMMI for People Management (CMMI-PM) Model
The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.

Luc Chiasson, Group Leader of Quality Assurance and Continuous Improvement, CAE
How it can help

The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.

Key Process Areas
- Product Integration
- Requirements Development
- Technical Solution
- Validation
- Verification
Download a Free Copy of the Model
Does your organization…
- …struggle to create a shared vision for data management and eliminate any disparate silos?
- …need to leverage your data assets to make better business decisions?
- …want to increase employee morale and limit turnover?
Then you need the CMMI for Data Management (CMMI-DMM) Model
The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.

Luc Chiasson, Group Leader of Quality Assurance and Continuous Improvement, CAE
How it can help

The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.

Key Process Areas
- Product Integration
- Requirements Development
- Technical Solution
- Validation
- Verification
Download a Free Copy of the Model

Example Markup

<ul class="challenge-solution">
  <li class="dev">
    <div class="challenge-statement card">
      <h3>Does your organization&hellip;</h3>
      <ul>
        <li>&hellip;struggle to deliver products and services that really satisfy all of your users&rsquo; needs?</li>
        <li>&hellip;often find it difficult to eliminate defects in your products and services?</li>
        <li>&hellip;want to design a product or service that gives you the edge over the competition?</li>
      </ul>
    </div>
    <h2 class="then">Then you need the <strong>CMMI for Development (CMMI-DEV) Model</strong></h2>
    <div class="row solution card">
      <div class="col5">
        <figure class="quote">
          <blockquote>
            <p>The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.</p>
          </blockquote>
          <figcaption>
            <cite><strong>Luc Chiasson</strong>, Group Leader of Quality Assurance and Continuous Improvement, CAE</cite>
          </figcaption>
        </figure>
      </div>
      <div class="col6 push1">
        <h3>How it can help</h3>
        <p>The CMMI-DEV model provides guidance for improving an organization&rsquo;s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.</p>
        <h3>Key Process Areas</h3>
        <ul>
          <li>Product Integration</li>
          <li>Requirements Development</li>
          <li>Technical Solution</li>
          <li>Validation</li>
          <li>Verification</li>
        </ul>
      </div>
    </div>
    <a href="#resource-listing" class="button cta">Download a Free Copy of the Model</a>
  </li>
  <li class="svc">
    <div class="challenge-statement card">
      <h3>Does your organization&hellip;</h3>
      <ul>
        <li>&hellip;find it difficult to align resources to meet service demand?</li>
        <li>&hellip;aspire to maintain a consistently high level of customer service?</li>
        <li>&hellip;struggle to deliver services on time and within a budget?</li>
      </ul>
    </div>
    <h2 class="then">Then you need the <strong>CMMI for Services (CMMI-SVC) Model</strong></h2>
    <div class="row solution card">
      <div class="col5">
        <figure class="quote">
          <blockquote>
            <p>The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.</p>
          </blockquote>
          <figcaption>
            <cite><strong>Luc Chiasson</strong>, Group Leader of Quality Assurance and Continuous Improvement, CAE</cite>
          </figcaption>
        </figure>
      </div>
      <div class="col6 push1">
        <h3>How it can help</h3>
        <p>The CMMI-DEV model provides guidance for improving an organization&rsquo;s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.</p>
        <h3>Key Process Areas</h3>
        <ul>
          <li>Product Integration</li>
          <li>Requirements Development</li>
          <li>Technical Solution</li>
          <li>Validation</li>
          <li>Verification</li>
        </ul>
      </div>
    </div>
    <a href="#resource-listing" class="button cta">Download a Free Copy of the Model</a>
  </li>
  <li class="acq">
    <div class="challenge-statement card">
      <h3>Does your organization&hellip;</h3>
      <ul>
        <li>&hellip;spend too much time solving your problems with suppliers?</li>
        <li>&hellip;worry that your suppliers don&rsquo;t understand your requirements and expectations?</li>
        <li>&hellip;want to improve your operational efficiencies by leveraging supplier&rsquo;s capabilities to deliver quality solutions?</li>
      </ul>
    </div>
    <h2 class="then">Then you need the <strong>CMMI for Acquisitions (CMMI-ACQ) Model</strong></h2>
    <div class="row solution card">
      <div class="col5">
        <figure class="quote">
          <blockquote>
            <p>The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.</p>
          </blockquote>
          <figcaption>
            <cite><strong>Luc Chiasson</strong>, Group Leader of Quality Assurance and Continuous Improvement, CAE</cite>
          </figcaption>
        </figure>
      </div>
      <div class="col6 push1">
        <h3>How it can help</h3>
        <p>The CMMI-DEV model provides guidance for improving an organization&rsquo;s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.</p>
        <h3>Key Process Areas</h3>
        <ul>
          <li>Product Integration</li>
          <li>Requirements Development</li>
          <li>Technical Solution</li>
          <li>Validation</li>
          <li>Verification</li>
        </ul>
      </div>
    </div>
    <a href="#resource-listing" class="button cta">Download a Free Copy of the Model</a>
  </li>
  <li class="pm">
    <div class="challenge-statement card">
      <h3>Does your organization&hellip;</h3>
      <ul>
        <li>&hellip;aspire to build a capable workforce to provide service excellence?</li>
        <li>&hellip;worry about your employees having the right resources for their success?</li>
        <li>&hellip;want to increase employee morale and limit turnover?</li>
      </ul>
    </div>
    <h2 class="then">Then you need the <strong>CMMI for People Management (CMMI-PM) Model</strong></h2>
    <div class="row solution card">
      <div class="col5">
        <figure class="quote">
          <blockquote>
            <p>The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.</p>
          </blockquote>
          <figcaption>
            <cite><strong>Luc Chiasson</strong>, Group Leader of Quality Assurance and Continuous Improvement, CAE</cite>
          </figcaption>
        </figure>
      </div>
      <div class="col6 push1">
        <h3>How it can help</h3>
        <p>The CMMI-DEV model provides guidance for improving an organization&rsquo;s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.</p>
        <h3>Key Process Areas</h3>
        <ul>
          <li>Product Integration</li>
          <li>Requirements Development</li>
          <li>Technical Solution</li>
          <li>Validation</li>
          <li>Verification</li>
        </ul>
      </div>
    </div>
    <a href="#resource-listing" class="button cta">Download a Free Copy of the Model</a>
  </li>
  <li class="dmm">
    <div class="challenge-statement card">
    <h3>Does your organization&hellip;</h3>
    <ul>
      <li>&hellip;struggle to create a shared vision for data management and eliminate any disparate silos?</li>
      <li>&hellip;need to leverage your data assets to make better business decisions?</li>
      <li>&hellip;want to increase employee morale and limit turnover?</li>
    </ul>
    </div>
    <h2 class="then">Then you need the <strong>CMMI for Data Management (CMMI-DMM) Model</strong></h2>
    <div class="row solution card">
      <div class="col5">
        <figure class="quote">
          <blockquote>
            <p>The CMMI-DEV model provides guidance for improving an organization’s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.</p>
          </blockquote>
          <figcaption>
            <cite><strong>Luc Chiasson</strong>, Group Leader of Quality Assurance and Continuous Improvement, CAE</cite>
          </figcaption>
        </figure>
      </div>
      <div class="col6 push1">
        <h3>How it can help</h3>
        <p>The CMMI-DEV model provides guidance for improving an organization&rsquo;s capability to develop quality products and services that meet the needs of customers and end users. These best practices will help your organization improve efficiency, speed, and product quality fueled by a lower number of defects.</p>
        <h3>Key Process Areas</h3>
        <ul>
          <li>Product Integration</li>
          <li>Requirements Development</li>
          <li>Technical Solution</li>
          <li>Validation</li>
          <li>Verification</li>
        </ul>
      </div>
    </div>
    <a href="#resource-listing" class="button cta">Download a Free Copy of the Model</a>
  </li>
</ul>

This pattern presents the user with examples of problems that she might face, and then points her to a suggested solution to those problems.

Gauge list

Introduction to CMMI for Development (DEV)

Learn how to use the CMMI for DEV to improve the effectiveness, efficiency, and quality of product development work in your organization.
Learn More
Introduction to CMMI for Data Management (DMM)

Learn how to use the CMMI for SVC model to establish, manage, and deliver services that meet and exceed your customer’s expectations.
Learn More
Applying CMMI^®

This course will give you practical skills to provide guidance to an organization’s improvement efforts across business disciplines and CMMI models.
Learn More
Lead Appraiser Training with People CMM

This course introduces those interested in becoming Certiﬁed Lead Appraisers for People CMM to the Standard CMMI Appraisal Method (V1.3).
Learn More

Example Markup

<div class="gauge-list" data-level-names="Build, Advance, Master">
  <nav>
    <ul>
      <li class="lvl1">
        <a href="#">
          <svg class="gauge" viewBox="0 0 417.55 244.11">
            <path class="lvl1" d="M 105.78906,36.410156 C 44.629061,72.660156 8.9996875,133.67023 7.4296875,204.74023 l 59.9999995,0.31055 A 140.27,140.27 0 0 1 135.61914,88.710938 Z" />
            <path class="lvl2" d="m 209.77539,7.3320312 c -33.1975,-0.1699999 -66.4357,8.2934378 -97.5957,25.3984378 L 142,85.060547 a 141.14,141.14 0 0 1 66.69922,-16.710938 h 3.23047 A 141.47,141.47 0 0 1 276.75,85.730469 l 30.38086,-52 c -31,-17.425 -64.15797,-26.2284378 -97.35547,-26.3984378 z" />
            <path class="lvl3" d="m 313.48047,37.5 -30.38086,52 c 42.55,26.14 66.76953,67.93031 67.01953,115.57031 h 60.07031 C 410.54945,135.78031 375.50047,75.07 313.48047,37.5 Z" />
            <path class="pointer" d="m 208.78516,39.853516 a 7.36,7.36 0 0 0 -7.57422,7.357422 l 0.25781,126.972652 a 35.36,35.36 0 0 0 7.26172,69.92579 A 35.4,35.4 0 0 0 244.08984,208.75 35.36,35.36 0 0 0 216.18945,174.23047 L 215.92969,47.210938 a 7.36,7.36 0 0 0 -7.14453,-7.357422 z m -0.0547,148.255864 a 20.66,20.66 0 0 1 11.15625,3.27929 20.66,20.66 0 0 1 0.01,0.006 20.66,20.66 0 0 1 0.3418,0.24414 20.66,20.66 0 0 1 1.33594,0.95899 20.66,20.66 0 0 1 1.55078,1.36328 20.66,20.66 0 0 1 1.40625,1.51367 20.66,20.66 0 0 1 1.24805,1.64258 20.66,20.66 0 0 1 0.002,0.002 20.66,20.66 0 0 1 0.12109,0.19531 20.66,20.66 0 0 1 0.94922,1.55469 20.66,20.66 0 0 1 0.35156,0.72461 20.66,20.66 0 0 1 0.54688,1.13281 20.66,20.66 0 0 1 0.23438,0.63867 20.66,20.66 0 0 1 0.47656,1.30665 20.66,20.66 0 0 1 0.002,0.008 20.66,20.66 0 0 1 0.50195,1.96679 20.66,20.66 0 0 1 0.002,0.0117 20.66,20.66 0 0 1 0.18554,1.22071 20.66,20.66 0 0 1 0.12305,0.82617 20.66,20.66 0 0 1 0.10547,2.04492 20.65,20.65 0 0 1 -0.0488,1.02539 20.65,20.65 0 0 1 -0.0762,1.20899 20.65,20.65 0 0 1 -0.0937,0.62304 20.65,20.65 0 0 1 -0.23828,1.45117 20.65,20.65 0 0 1 -0.0879,0.35547 20.65,20.65 0 0 1 -0.45117,1.67383 20.65,20.65 0 0 1 -0.0449,0.125 20.65,20.65 0 0 1 -0.6875,1.81836 20.65,20.65 0 0 1 -0.002,0.004 20.65,20.65 0 0 1 -0.01,0.0195 20.65,20.65 0 0 1 -36.73437,2.13086 20.65,20.65 0 0 1 -0.93945,-1.80664 20.65,20.65 0 0 1 -0.0801,-0.19336 20.65,20.65 0 0 1 -0.67383,-1.69336 20.65,20.65 0 0 1 -0.11914,-0.39063 20.65,20.65 0 0 1 -0.45117,-1.57617 20.65,20.65 0 0 1 -0.10352,-0.52734 20.65,20.65 0 0 1 -0.26562,-1.47461 20.65,20.65 0 0 1 -0.0703,-0.73242 20.65,20.65 0 0 1 -0.10156,-1.29102 20.65,20.65 0 0 1 0.006,-0.97461 20.65,20.65 0 0 1 0.0215,-1.05273 20.65,20.65 0 0 1 0.13867,-1.28907 20.65,20.65 0 0 1 0.0859,-0.70898 20.65,20.65 0 0 1 0.31836,-1.51758 20.65,20.65 0 0 1 0.10742,-0.47851 20.65,20.65 0 0 1 0.5039,-1.5918 20.65,20.65 0 0 1 0.11719,-0.35742 20.65,20.65 0 0 1 0.73047,-1.69922 20.65,20.65 0 0 1 0.0781,-0.16992 20.65,20.65 0 0 1 18.52149,-11.55078 z m 0,12.83007 a 7.8099999,7.8099999 0 0 0 -7.81055,7.81055 7.8099999,7.8099999 0 0 0 7.81055,7.81055 7.8099999,7.8099999 0 0 0 7.80859,-7.81055 7.8099999,7.8099999 0 0 0 -7.80859,-7.81055 z" transform = "rotate(-60 208.775 208.775)" />
          </svg>
          <span>Build</span>
        </a>
      </li>
      <li class="lvl2">
        <a href="#">
          <svg class="gauge" viewBox="0 0 417.55 244.11">
            <path class="lvl1" d="M 105.78906,36.410156 C 44.629061,72.660156 8.9996875,133.67023 7.4296875,204.74023 l 59.9999995,0.31055 A 140.27,140.27 0 0 1 135.61914,88.710938 Z" />
            <path class="lvl2" d="m 209.77539,7.3320312 c -33.1975,-0.1699999 -66.4357,8.2934378 -97.5957,25.3984378 L 142,85.060547 a 141.14,141.14 0 0 1 66.69922,-16.710938 h 3.23047 A 141.47,141.47 0 0 1 276.75,85.730469 l 30.38086,-52 c -31,-17.425 -64.15797,-26.2284378 -97.35547,-26.3984378 z" />
            <path class="lvl3" d="m 313.48047,37.5 -30.38086,52 c 42.55,26.14 66.76953,67.93031 67.01953,115.57031 h 60.07031 C 410.54945,135.78031 375.50047,75.07 313.48047,37.5 Z" />
            <path class="pointer" d="m 208.78516,39.853516 a 7.36,7.36 0 0 0 -7.57422,7.357422 l 0.25781,126.972652 a 35.36,35.36 0 0 0 7.26172,69.92579 A 35.4,35.4 0 0 0 244.08984,208.75 35.36,35.36 0 0 0 216.18945,174.23047 L 215.92969,47.210938 a 7.36,7.36 0 0 0 -7.14453,-7.357422 z m -0.0547,148.255864 a 20.66,20.66 0 0 1 11.15625,3.27929 20.66,20.66 0 0 1 0.01,0.006 20.66,20.66 0 0 1 0.3418,0.24414 20.66,20.66 0 0 1 1.33594,0.95899 20.66,20.66 0 0 1 1.55078,1.36328 20.66,20.66 0 0 1 1.40625,1.51367 20.66,20.66 0 0 1 1.24805,1.64258 20.66,20.66 0 0 1 0.002,0.002 20.66,20.66 0 0 1 0.12109,0.19531 20.66,20.66 0 0 1 0.94922,1.55469 20.66,20.66 0 0 1 0.35156,0.72461 20.66,20.66 0 0 1 0.54688,1.13281 20.66,20.66 0 0 1 0.23438,0.63867 20.66,20.66 0 0 1 0.47656,1.30665 20.66,20.66 0 0 1 0.002,0.008 20.66,20.66 0 0 1 0.50195,1.96679 20.66,20.66 0 0 1 0.002,0.0117 20.66,20.66 0 0 1 0.18554,1.22071 20.66,20.66 0 0 1 0.12305,0.82617 20.66,20.66 0 0 1 0.10547,2.04492 20.65,20.65 0 0 1 -0.0488,1.02539 20.65,20.65 0 0 1 -0.0762,1.20899 20.65,20.65 0 0 1 -0.0937,0.62304 20.65,20.65 0 0 1 -0.23828,1.45117 20.65,20.65 0 0 1 -0.0879,0.35547 20.65,20.65 0 0 1 -0.45117,1.67383 20.65,20.65 0 0 1 -0.0449,0.125 20.65,20.65 0 0 1 -0.6875,1.81836 20.65,20.65 0 0 1 -0.002,0.004 20.65,20.65 0 0 1 -0.01,0.0195 20.65,20.65 0 0 1 -36.73437,2.13086 20.65,20.65 0 0 1 -0.93945,-1.80664 20.65,20.65 0 0 1 -0.0801,-0.19336 20.65,20.65 0 0 1 -0.67383,-1.69336 20.65,20.65 0 0 1 -0.11914,-0.39063 20.65,20.65 0 0 1 -0.45117,-1.57617 20.65,20.65 0 0 1 -0.10352,-0.52734 20.65,20.65 0 0 1 -0.26562,-1.47461 20.65,20.65 0 0 1 -0.0703,-0.73242 20.65,20.65 0 0 1 -0.10156,-1.29102 20.65,20.65 0 0 1 0.006,-0.97461 20.65,20.65 0 0 1 0.0215,-1.05273 20.65,20.65 0 0 1 0.13867,-1.28907 20.65,20.65 0 0 1 0.0859,-0.70898 20.65,20.65 0 0 1 0.31836,-1.51758 20.65,20.65 0 0 1 0.10742,-0.47851 20.65,20.65 0 0 1 0.5039,-1.5918 20.65,20.65 0 0 1 0.11719,-0.35742 20.65,20.65 0 0 1 0.73047,-1.69922 20.65,20.65 0 0 1 0.0781,-0.16992 20.65,20.65 0 0 1 18.52149,-11.55078 z m 0,12.83007 a 7.8099999,7.8099999 0 0 0 -7.81055,7.81055 7.8099999,7.8099999 0 0 0 7.81055,7.81055 7.8099999,7.8099999 0 0 0 7.80859,-7.81055 7.8099999,7.8099999 0 0 0 -7.80859,-7.81055 z" transform = "rotate(0 208.775 208.775)" />
          </svg>
          <span>Advance</span>
        </a>
      </li>
      <li class="lvl3">
        <a href="#">
          <svg class="gauge" viewBox="0 0 417.55 244.11">
            <path class="lvl1" d="M 105.78906,36.410156 C 44.629061,72.660156 8.9996875,133.67023 7.4296875,204.74023 l 59.9999995,0.31055 A 140.27,140.27 0 0 1 135.61914,88.710938 Z" />
            <path class="lvl2" d="m 209.77539,7.3320312 c -33.1975,-0.1699999 -66.4357,8.2934378 -97.5957,25.3984378 L 142,85.060547 a 141.14,141.14 0 0 1 66.69922,-16.710938 h 3.23047 A 141.47,141.47 0 0 1 276.75,85.730469 l 30.38086,-52 c -31,-17.425 -64.15797,-26.2284378 -97.35547,-26.3984378 z" />
            <path class="lvl3" d="m 313.48047,37.5 -30.38086,52 c 42.55,26.14 66.76953,67.93031 67.01953,115.57031 h 60.07031 C 410.54945,135.78031 375.50047,75.07 313.48047,37.5 Z" />
            <path class="pointer" d="m 208.78516,39.853516 a 7.36,7.36 0 0 0 -7.57422,7.357422 l 0.25781,126.972652 a 35.36,35.36 0 0 0 7.26172,69.92579 A 35.4,35.4 0 0 0 244.08984,208.75 35.36,35.36 0 0 0 216.18945,174.23047 L 215.92969,47.210938 a 7.36,7.36 0 0 0 -7.14453,-7.357422 z m -0.0547,148.255864 a 20.66,20.66 0 0 1 11.15625,3.27929 20.66,20.66 0 0 1 0.01,0.006 20.66,20.66 0 0 1 0.3418,0.24414 20.66,20.66 0 0 1 1.33594,0.95899 20.66,20.66 0 0 1 1.55078,1.36328 20.66,20.66 0 0 1 1.40625,1.51367 20.66,20.66 0 0 1 1.24805,1.64258 20.66,20.66 0 0 1 0.002,0.002 20.66,20.66 0 0 1 0.12109,0.19531 20.66,20.66 0 0 1 0.94922,1.55469 20.66,20.66 0 0 1 0.35156,0.72461 20.66,20.66 0 0 1 0.54688,1.13281 20.66,20.66 0 0 1 0.23438,0.63867 20.66,20.66 0 0 1 0.47656,1.30665 20.66,20.66 0 0 1 0.002,0.008 20.66,20.66 0 0 1 0.50195,1.96679 20.66,20.66 0 0 1 0.002,0.0117 20.66,20.66 0 0 1 0.18554,1.22071 20.66,20.66 0 0 1 0.12305,0.82617 20.66,20.66 0 0 1 0.10547,2.04492 20.65,20.65 0 0 1 -0.0488,1.02539 20.65,20.65 0 0 1 -0.0762,1.20899 20.65,20.65 0 0 1 -0.0937,0.62304 20.65,20.65 0 0 1 -0.23828,1.45117 20.65,20.65 0 0 1 -0.0879,0.35547 20.65,20.65 0 0 1 -0.45117,1.67383 20.65,20.65 0 0 1 -0.0449,0.125 20.65,20.65 0 0 1 -0.6875,1.81836 20.65,20.65 0 0 1 -0.002,0.004 20.65,20.65 0 0 1 -0.01,0.0195 20.65,20.65 0 0 1 -36.73437,2.13086 20.65,20.65 0 0 1 -0.93945,-1.80664 20.65,20.65 0 0 1 -0.0801,-0.19336 20.65,20.65 0 0 1 -0.67383,-1.69336 20.65,20.65 0 0 1 -0.11914,-0.39063 20.65,20.65 0 0 1 -0.45117,-1.57617 20.65,20.65 0 0 1 -0.10352,-0.52734 20.65,20.65 0 0 1 -0.26562,-1.47461 20.65,20.65 0 0 1 -0.0703,-0.73242 20.65,20.65 0 0 1 -0.10156,-1.29102 20.65,20.65 0 0 1 0.006,-0.97461 20.65,20.65 0 0 1 0.0215,-1.05273 20.65,20.65 0 0 1 0.13867,-1.28907 20.65,20.65 0 0 1 0.0859,-0.70898 20.65,20.65 0 0 1 0.31836,-1.51758 20.65,20.65 0 0 1 0.10742,-0.47851 20.65,20.65 0 0 1 0.5039,-1.5918 20.65,20.65 0 0 1 0.11719,-0.35742 20.65,20.65 0 0 1 0.73047,-1.69922 20.65,20.65 0 0 1 0.0781,-0.16992 20.65,20.65 0 0 1 18.52149,-11.55078 z m 0,12.83007 a 7.8099999,7.8099999 0 0 0 -7.81055,7.81055 7.8099999,7.8099999 0 0 0 7.81055,7.81055 7.8099999,7.8099999 0 0 0 7.80859,-7.81055 7.8099999,7.8099999 0 0 0 -7.80859,-7.81055 z" transform = "rotate(60 208.775 208.775)" />
          </svg>
          <span>Master</span>
        </a>
      </li>
    </ul>
  </nav>
  <ul class="cards">
    <li data-level="1" class="lvl1">
      <svg viewBox="0 0 123.76 78.64">
        <path class="lvl1" d="M 31.349609 26.5 A 58.26 58.26 0 0 0 2.1992188 76.359375 L 19.990234 76.460938 A 41.57 41.57 0 0 1 40.199219 42 L 31.349609 26.5 z " />
        <path class="lvl2" d="M 63.253906 17.886719 A 58.25 58.25 0 0 0 33.220703 25.390625 L 42.060547 40.890625 A 41.82 41.82 0 0 1 61.859375 35.939453 L 62.810547 35.939453 A 41.92 41.92 0 0 1 82 41.099609 L 91 25.689453 A 58.25 58.25 0 0 0 63.253906 17.886719 z "/>
        <path class="lvl3" d="M 92.859375 26.789062 L 83.859375 42.199219 C 96.519375 49.999219 103.69953 62.340937 103.76953 76.460938 L 121.5293 76.460938 C 121.6293 55.930938 111.23938 37.929063 92.859375 26.789062 z " />
        <g class="label">
          <path d="M 32.32,5.87 36.87,4.23 A 3.75,3.75 0 0 1 39.74,4.18 2.39,2.39 0 0 1 41,5.61 v 0 a 2.44,2.44 0 0 1 -0.52,2.58 2.53,2.53 0 0 1 2.7,1.81 v 0 c 0.64,1.79 -0.49,3.21 -2.7,4 l -4.65,1.67 z m 5.51,2.49 c 1,-0.35 1.44,-0.87 1.18,-1.6 v 0 C 38.78,6.11 38.14,5.93 37.23,6.26 L 35.1,7 35.84,9.07 Z m 2,3.73 c 1,-0.34 1.4,-0.88 1.14,-1.61 v 0 C 40.73,9.83 40.1,9.6 38.97,9.99 l -2.49,0.9 0.78,2.11 z" />
          <path d="M 46.86,7.42 46,1.55 48.26,1.21 49.11,7 c 0.26,1.68 1.22,2.42 2.6,2.21 C 53.09,9 53.8,8.04 53.56,6.41 L 52.67,0.54 54.93,0.2 55.81,6 c 0.47,3.11 -1.05,4.9 -3.81,5.32 -2.76,0.42 -4.68,-0.87 -5.14,-3.9 z" />
          <path d="m 60.91,0 h 2.28 L 63,10.43 h -2.29 z" />
          <path d="m 68.93,0.27 2.26,0.31 -1.13,8.24 5.14,0.7 -0.28,2.06 -7.4,-1 z" />
          <path d="m 81.61,2.47 3.85,1.28 a 5.18,5.18 0 0 1 3.6,6.65 v 0 a 5.2,5.2 0 0 1 -6.88,3.18 L 78.33,12.3 Z m 1.21,9.18 a 3,3 0 0 0 4,-2 v 0 a 3,3 0 0 0 -2,-4 l -1.67,-0.56 -2,5.94 z" />
        </g>
      </svg>
      <h4>Introduction to CMMI for Development (DEV)</h4>
      <p>Learn how to use the CMMI for DEV to improve the effectiveness, efficiency, and quality of product development work in your organization.</p>
      <a href="#" class="button">Learn More</a>
    </li>
    <li data-level="1" class="dmm lvl1">
      <svg viewBox="0 0 123.76 78.64">
        <path class="lvl1" d="M 31.349609 26.5 A 58.26 58.26 0 0 0 2.1992188 76.359375 L 19.990234 76.460938 A 41.57 41.57 0 0 1 40.199219 42 L 31.349609 26.5 z " />
        <path class="lvl2" d="M 63.253906 17.886719 A 58.25 58.25 0 0 0 33.220703 25.390625 L 42.060547 40.890625 A 41.82 41.82 0 0 1 61.859375 35.939453 L 62.810547 35.939453 A 41.92 41.92 0 0 1 82 41.099609 L 91 25.689453 A 58.25 58.25 0 0 0 63.253906 17.886719 z "/>
        <path class="lvl3" d="M 92.859375 26.789062 L 83.859375 42.199219 C 96.519375 49.999219 103.69953 62.340937 103.76953 76.460938 L 121.5293 76.460938 C 121.6293 55.930938 111.23938 37.929063 92.859375 26.789062 z " />
        <g class="label">
          <path d="M 32.32,5.87 36.87,4.23 A 3.75,3.75 0 0 1 39.74,4.18 2.39,2.39 0 0 1 41,5.61 v 0 a 2.44,2.44 0 0 1 -0.52,2.58 2.53,2.53 0 0 1 2.7,1.81 v 0 c 0.64,1.79 -0.49,3.21 -2.7,4 l -4.65,1.67 z m 5.51,2.49 c 1,-0.35 1.44,-0.87 1.18,-1.6 v 0 C 38.78,6.11 38.14,5.93 37.23,6.26 L 35.1,7 35.84,9.07 Z m 2,3.73 c 1,-0.34 1.4,-0.88 1.14,-1.61 v 0 C 40.73,9.83 40.1,9.6 38.97,9.99 l -2.49,0.9 0.78,2.11 z" />
          <path d="M 46.86,7.42 46,1.55 48.26,1.21 49.11,7 c 0.26,1.68 1.22,2.42 2.6,2.21 C 53.09,9 53.8,8.04 53.56,6.41 L 52.67,0.54 54.93,0.2 55.81,6 c 0.47,3.11 -1.05,4.9 -3.81,5.32 -2.76,0.42 -4.68,-0.87 -5.14,-3.9 z" />
          <path d="m 60.91,0 h 2.28 L 63,10.43 h -2.29 z" />
          <path d="m 68.93,0.27 2.26,0.31 -1.13,8.24 5.14,0.7 -0.28,2.06 -7.4,-1 z" />
          <path d="m 81.61,2.47 3.85,1.28 a 5.18,5.18 0 0 1 3.6,6.65 v 0 a 5.2,5.2 0 0 1 -6.88,3.18 L 78.33,12.3 Z m 1.21,9.18 a 3,3 0 0 0 4,-2 v 0 a 3,3 0 0 0 -2,-4 l -1.67,-0.56 -2,5.94 z" />
        </g>
      </svg>
      <h4>Introduction to CMMI for Data Management (DMM)</h4>
      <p>Learn how to use the CMMI for SVC model to establish, manage, and deliver services that meet and exceed your customer’s expectations.</p>
      <a href="#" class="button">Learn More</a>
    </li>
    <li data-level="2" class="lvl2">
      <svg viewBox="0 0 123.76 78.64">
        <path class="lvl1" d="M 31.349609 26.5 A 58.26 58.26 0 0 0 2.1992188 76.359375 L 19.990234 76.460938 A 41.57 41.57 0 0 1 40.199219 42 L 31.349609 26.5 z " />
        <path class="lvl2" d="M 63.253906 17.886719 A 58.25 58.25 0 0 0 33.220703 25.390625 L 42.060547 40.890625 A 41.82 41.82 0 0 1 61.859375 35.939453 L 62.810547 35.939453 A 41.92 41.92 0 0 1 82 41.099609 L 91 25.689453 A 58.25 58.25 0 0 0 63.253906 17.886719 z "/>
        <path class="lvl3" d="M 92.859375 26.789062 L 83.859375 42.199219 C 96.519375 49.999219 103.69953 62.340937 103.76953 76.460938 L 121.5293 76.460938 C 121.6293 55.930938 111.23938 37.929063 92.859375 26.789062 z " />
        <g class="label">
          <path d="m 19.15,13.07 1.76,-1.14 9.5,6.28 -2,1.32 -2.08,-1.43 -3.66,2.43 0.49,2.47 -1.95,1.29 z m 5.39,3.78 -3,-2.05 0.7,3.57 z" />
          <path d="m 29.54,7.0800004 3.76,-1.5 a 5.17,5.17 0 0 1 7.05,2.75 v 0 A 5.2,5.2 0 0 1 37.15,15.21 l -3.77,1.51 z M 36.4,13.31 a 3,3 0 0 0 1.75,-3.9999996 v 0 a 3,3 0 0 0 -4.07,-1.75 l -1.64,0.66 L 34.75,13.93 Z" />
          <path d="m 42.49,2.3300004 2.51,-0.47 4,6.68 1.3,-7.70000001 2.43,-0.46 L 50.56,11.45 l -2,0.38 z" />
          <path d="m 60,-0.06999961 h 2.11 L 66.7,10.32 h -2.39 l -1,-2.3099996 -4.4,0.07 L 58,10.47 h -2.33 z m 2.51,6.08000001 -1.51,-3.32 -1.32,3.4 z" />
          <path d="m 72,0.55000039 2.07,0.4 3.55,7.22000001 1.25,-6.24 2.21,0.43 L 79.08,12.56 77.18,12.19 73.51,4.7000004 72.24,11.18 70,10.75 Z" />
          <path d="m 84.68,8.8400004 v 0 a 5.29,5.29 0 0 1 7.09,-2.91 5.39,5.39 0 0 1 3.17,3.05 l -2,1 a 3.82,3.82 0 0 0 -2,-2.11 3.09,3.09 0 0 0 -4,1.83 v 0 A 3.1,3.1 0 0 0 88.43,13.93 a 3.78,3.78 0 0 0 3,-0.08 l 0.78,1.92 a 5.33,5.33 0 0 1 -4.65,0.08 5.26,5.26 0 0 1 -2.88,-7.0099996 z" />
          <path d="m 100.37,10.38 6.56,4.3 -1.12,1.7 -4.66,-3 -1.15,1.71 4.1,2.69 -1.1,1.7 -4.1,-2.69 -1.2,1.83 4.72,3.1 -1.11,1.7 -6.62,-4.35 z" />
        </g>
      </svg>
      <h4>Applying CMMI<sup>&reg;</sup></h4>
      <p>This course will give you practical skills to provide guidance to an organization’s improvement efforts across business disciplines and CMMI models.</p>
      <a href="#" class="button">Learn More</a>
    </li>
    <li data-level="3" class="lvl3">
      <svg viewBox="0 0 123.76 78.64">
        <path class="lvl1" d="M 31.349609 26.5 A 58.26 58.26 0 0 0 2.1992188 76.359375 L 19.990234 76.460938 A 41.57 41.57 0 0 1 40.199219 42 L 31.349609 26.5 z " />
        <path class="lvl2" d="M 63.253906 17.886719 A 58.25 58.25 0 0 0 33.220703 25.390625 L 42.060547 40.890625 A 41.82 41.82 0 0 1 61.859375 35.939453 L 62.810547 35.939453 A 41.92 41.92 0 0 1 82 41.099609 L 91 25.689453 A 58.25 58.25 0 0 0 63.253906 17.886719 z "/>
        <path class="lvl3" d="M 92.859375 26.789062 L 83.859375 42.199219 C 96.519375 49.999219 103.69953 62.340937 103.76953 76.460938 L 121.5293 76.460938 C 121.6293 55.930938 111.23938 37.929063 92.859375 26.789062 z " />
        <g class="label">
          <path d="m 23.17,10.419995 2.2,-1.1099996 4.41,2.6699996 0.47,-5.1499996 2.2,-1.11 4.67,9.2799996 -2,1 L 32,9.9799954 31.38,15.259995 h -0.05 l -4.56,-2.63 3,6 -2,1 z" />
          <path d="m 41.94,2.5799954 2,-0.53 6.92,8.9999996 -2.32,0.59 -1.5,-1.9999996 -4.26,1.0899996 -0.34,2.5 -2.26,0.58 z m 3.85,5.33 -2.18,-2.93 -0.5,3.61 z" />
          <path d="m 53.26,9.3099954 1.24,-1.7 a 4.78,4.78 0 0 0 3.18,1.06 c 0.94,-0.06 1.47,-0.47 1.44,-1.08 v 0 c 0,-0.57 -0.41,-0.85 -2.17,-1.18 -2.12,-0.4 -3.51,-0.89 -3.64,-2.95 v 0 c -0.14,-1.94 1.29,-3.28000001 3.41,-3.42000001 a 6.06,6.06 0 0 1 3.94,1.07000001 l -1.07,1.8 a 4.85,4.85 0 0 0 -2.77,-0.85 c -0.87,0.06 -1.3,0.49 -1.27,1 v 0 c 0,0.68 0.5,0.87 2.33,1.22 2.14,0.41 3.37,1.09 3.49,2.9 v 0 c 0.13,2.05 -1.36,3.3099996 -3.6,3.4599996 A 6.64,6.64 0 0 1 53.26,9.3099954 Z" />
          <path d="m 68.42,2.3999954 -3.15,-0.32 0.22,-2.10000001 8.57,0.89 -0.22,2.11000001 -3.15,-0.32 -0.85,8.2399996 -2.27,-0.24 z" />
          <path d="m 79.32,1.9799954 7.53,2.17 -0.56,2 -5.35,-1.63 -0.58,2 4.71,1.35 -0.57,2 -4.71,-1.37 -0.6,2.0999996 5.42,1.56 -0.56,2 -7.6,-2.18 z" />
          <path d="m 92.24,6.2099954 4.25,2.13 a 4.15,4.15 0 0 1 2.23,2.3099996 3.25,3.25 0 0 1 -0.27,2.52 v 0 a 3.24,3.24 0 0 1 -3.45,1.91 l 0.6,4.46 -2.39,-1.2 -0.49,-4 -1.61,-0.8 -1.49,3 -2.05,-1 z m 1.85,6.5799996 a 1.51,1.51 0 0 0 2.23,-0.53 v 0 c 0.44,-0.88 0,-1.64 -0.94,-2.14 L 93.38,9.1199954 92,11.749995 Z" />
        </g>
      </svg>
      <h4>Lead Appraiser Training with People CMM</h4>
      <p>This course introduces those interested in becoming Certiﬁed Lead Appraisers for People CMM to the Standard CMMI Appraisal Method (V1.3).</p>
      <a href="#" class="button">Learn More</a>
    </li>
  </ul>
</div>

This pattern presents a number of options that the user can filter by level using a gauge.

Article listing

Demonstrate the value and ROI of adopting CMMI

Performance capabilities are built-in at every level of the model, helping organizations better understand their performance needs and establish performance goals. Organizations can now track, measure, and achieve each of their performance goals.
Improving the overall value for CMMI appraisals

The new appraisal method is intended to improve confidence and reliability of results and to lower total life cycle costs of appraisals by decreasing the appraisal preparation for the appraised organization. Organizations can extend the validity of benchmark appraisals through the lighter-weight Sustainment appraisal.
Up-to-date with the latest trend methodologies used in the market

A scalable architecture platform includes additional method guidance, such as built-in agile with Scrum guidance. New content additions address many more industries and trend methodologies such as Safety and Security.
Easier to use and more user friendly

Non-technical language makes it easier for users to read and fully understand the model. An online platform allows users to tailor the model to fit specific organizational needs. The model, training, and usage guidelines will be translated in several different languages in order to accomodate our international user base.

Example Markup

<ul class="articles">
  <li class="row">
    <div class="col4">
      <img src="photo.png" alt="Demonstrate the value and ROI of adopting CMMI" />
    </div>
    <div class="col7 push1">
      <h3>Demonstrate the value and ROI of adopting CMMI</h3>
      <p>Performance capabilities are built-in at every level of the model...</p>
    </div>
  </li>
  <li class="row">
    <div class="col4">
      <img src="photo.png" alt="Improving the overall value for CMMI appraisals" />
    </div>
    <div class="col7 push1">
      <h3>
        <a href="#">Improving the overall value for CMMI appraisals</a>
      </h3>
      <p>The new appraisal method is intended to improve confidence and reliability...</p>
    </div>
  </li>
  <li class="row">
    <div class="col7 push5">
      <h3>Up-to-date with the latest trend methodologies used in the market</h3>
      <p>A scalable architecture platform includes additional method guidance...</p>
    </div>
  </li>
  <li class="row">
    <div class="col4">
      <img src="photo.png" alt="Easier to use and more user friendly" />
      </div>
    <div class="col7 push1">
      <h3>Easier to use and more user friendly</h3>
      <p>Non-technical language makes it easier for users to read and fully understand the model...</p>
    </div>
  </li>
</ul>

This pattern presents a series of text, which may or may not be snippets from articles. Each should be associated with an image. The headline for each item can be a link.

News headline

Lorem ipsum dolor sit amet, consectetur adipiscing elit

2017/12/04

Pittsburgh, PA, USA

Example Markup

<article class="news">
  <header>
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1>
    <time datetime="2017-12-04">2017/12/04</time>
    <p class="loc">Pittsburgh, PA, USA</p>
  </header>
</article>

This pattern presents a headline for a press release, including a byline with date and location.

News headlines

15 January, 2018 January 2018 Partner Network Newsletter
12 January, 2018 Webinar Slides & Recording: Improve Patient Safety With New Data…
11 January, 2018 Webinar: Achieve Accurate, Trusted Patient Data with New Data Quality…
28 December, 2017 December 2017 Partner Network Newsletter
20 December, 2017 Capability counts Super Early Bird Rate Ends on 31 December!
19 December, 2017 Register Now for January Enterprise Data Management Expert Training!
15 December, 2017 Build, Improve, and Measure Your Enterprise Data Management Program

Example Markup

<ul class="news-headlines">
  <li>
    <time datetime="2018-01-15">15 January, 2018</time>
    <a href="#" class="headline">January 2018 Partner Network Newsletter</a>
  </li>
  <li>
    <time datetime="2018-01-12">12 January, 2018</time>
    <a href="#" class="headline">Webinar Slides &amp; Recording: Improve Patient Safety With New Data&hellip;</a>
  </li>
  <li>
    <time datetime="2018-01-11">11 January, 2018</time>
    <a href="#" class="headline">Webinar: Achieve Accurate, Trusted Patient Data with New Data Quality&hellip;</a>
  </li>
  <li>
    <time datetime="2017-12-28">28 December, 2017</time>
    <a href="#" class="headline">December 2017 Partner Network Newsletter</a>
  </li>
  <li>
    <time datetime="2017-12-20">20 December, 2017</time>
    <a href="#" class="headline">Capability counts Super Early Bird Rate Ends on 31 December!</a>
  </li>
  <li>
    <time datetime="2017-12-19">19 December, 2017</time>
    <a href="#" class="headline">Register Now for January Enterprise Data Management Expert Training!</a>
  </li>
  <li>
    <time datetime="2017-12-15">15 December, 2017</time>
    <a href="#" class="headline">Build, Improve, and Measure Your Enterprise Data Management Program</a>
  </li>
</ul>

This pattern presents links to a series of news articles. This should only be used to list items that each have a headline and a publication date, like press releases or blog posts.

News listing

Lorem ipsum dolor sit amet, consectetur adipiscing elit
2017/12/04
Pittsburgh, PA, USA — Praesent lacinia malesuada luctus. Quisque vel massa ante. Nam suscipit aliquam maximus. Vivamus mauris eros, ultricies et elit in, iaculis consectetur arcu. Nulla dapibus vitae odio eu blandit.
Read More…
Suspendisse nec ipsum porta, vestibulum sapien sit amet, gravida dui
2017/12/16
Pittsburgh, PA, USA — Ut ac tincidunt purus, in varius diam. Aliquam rutrum nulla a sem sagittis rutrum. Maecenas at augue ac sem consequat sodales sed ut nulla. Suspendisse a lectus ultricies, gravida sapien ut.
Read More…

Example Markup

<ul class="news-listing">
  <li>
    <h3><a href="#">Lorem ipsum dolor sit amet, consectetur adipiscing elit</a></h3>
    <time datetime="2017-12-04">2017/12/04</time>
    <p>Pittsburgh, PA, USA &mdash; Praesent lacinia malesuada luctus...</p>
    <a class="read-more" href="#news-listing">Read More&hellip;</a>
  </li>
  <li>
    <h3><a href="#">Suspendisse nec ipsum porta, vestibulum sapien sit amet, gravida dui</a></h3>
    <time datetime="2017-12-16">2017/12/16</time>
    <p>Pittsburgh, PA, USA &mdash; Ut ac tincidunt purus, in varius diam...</p>
    <a class="read-more" href="#news-listing">Read More&hellip;</a>
  </li>
</ul>

This pattern expands on the news headlines pattern by also providing a snippet of text for each article.

Lead story

Lorem ipsum dolor sit amet, consectetur adipiscing elit

4 December, 2017

Praesent lacinia malesuada luctus. Quisque vel massa ante. Nam suscipit aliquam maximus. Vivamus mauris eros, ultricies et elit in, iaculis consectetur arcu. Nulla dapibus vitae odio eu blandit.

Quisque facilisis hendrerit fermentum. Nunc interdum posuere mauris, ac facilisis enim. Phasellus bibendum fermentum ipsum vitae scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent at ex eget justo aliquet tempus. Etiam pharetra condimentum elit, vel ultricies dui congue nec. Donec aliquet mattis quam non porttitor. Proin lobortis scelerisque blandit. Nullam placerat lectus vel porta vulputate.

Nunc ante ipsum, ornare sed blandit vel, commodo quis magna. Duis tempus dictum mi, et facilisis nisl rhoncus at. Suspendisse accumsan, eros nec sodales pulvinar, magna lacus ultricies mi, in convallis nibh elit ac mi. Aliquam euismod, nisi eu mattis egestas, ex nulla lacinia est, ac tincidunt nisi dui ut enim. Praesent interdum massa at felis eleifend malesuada quis a neque. Integer ante ex, aliquam non efficitur sit amet, molestie quis sapien.

Person profile

Nikki Jackson, Role Title

Operational Excellence,
Company

View Partner Profile

Example Markup

<div class="person-profile" itemscope="itemscope" itemtype="http://schema.org/Person">
  <img src="photo.jpg" alt="Nikki Jackson" />
  <p><strong itemprop="name">Nikki Jackson</strong>, <span itemprop="jobTitle">Role Title</span></p>
  Operational Excellence,<br />
  <span class="affiliation" itemprop="affiliation">Company</span>
  <p><a href="#" class="button">View Partner Profile</a></p>
</div>

This pattern presents information about a person, typically for use on a profile page. It includes Person markup in keeping with Schema.org

Person list

A

Nikki Jackson Role Title Company Industry
Jay Baer Role Title Company Industry
Frans Johansson
- Role Title #1
- Role Title #2

Example Markup

<h4 class="person-list">A</h4>
<ul class="person-list">
  <li itemscope="itemscope" itemtype="http://schema.org/Person">
    <a href="#">
      <img src="photo.jpg" alt="Nikki Jackson" />
    </a>
    <a href="#" class="name" itemprop="name">Nikki Jackson</a>
    <span class="title" itemprop="jobTitle">Role Title</span>
    <span class="affiliation" itemprop="affiliation">Company</span>
    <span class="industry">Industry</span>
  </li>
  <li itemscope="itemscope" itemtype="http://schema.org/Person">
    <a href="#">
      <img src="photo.jpg" alt="Jay Baer" />
    </a>
    <a href="#" class="name" itemprop="name">Jay Baer</a>
    <span class="title" itemprop="jobTitle">Role Title</span>
    <span class="affiliation" itemprop="affiliation">Company</span>
    <span class="industry">Industry</span>
  </li>
  <li itemscope="itemscope" itemtype="http://schema.org/Person" class="special">
    <img src="photo.jpg" alt="Frans Johansson" />
    <span class="name" itemprop="name">Frans Johansson</span>
    <ul class="titles">
      <li class="title" itemprop="jobTitle">Role Title #1</li>
      <li class="title" itemprop="jobTitle">Role Title #2</li>
    </ul>
  </li>
</ul>

This pattern presents a directory of individuals to the user. Each one may include a link (for example, to her profile page). Specific individuals in the list can be highlighted with the special class, making their photographs twice as large as others on the list.

Resource cards

Article Favorite

Agility Comes with Maturity

8 January, 2018

Agile
High Maturity
Build Capability

View Article

Case Study Favorite

Graham Technologies Case Study

8 January, 2018

Agile
Improve Performance
Build Capability
Process Management

Download Resource

Brochure Favorite

CMMI the Agile Way

8 January, 2018

Agile
Improve Performance
Build Capability
Process Management

Download Resource

Article Favorite

Helping Organizations Scale Agile Across the Enterprise

8 January, 2018

Agile
Improve Performance

View Article

Example Markup

<div class="resource-cards">
  <div class="card article">
    <span class="type">Article</span>
    <a href="#" class="fav is-fav">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
        <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
      </svg>
      <span>Favorite</span>
    </a>
    <h3><a href="#">Agility Comes with Maturity</a></h3>
    <time datetime="2018-01-08">8 January, 2018</time>
    <ul class="tags">
      <li><a href="#">Agile</a></li>
      <li><a href="#">High Maturity</a></li>
      <li><a href="#">Build Capability</a></li>
    </ul>
    <a href="#" class="go">View Article</a>
  </div>
  <div class="card case-study">
    <span class="type">Case Study</span>
    <a href="#" class="fav">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
        <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
      </svg>
      <span>Favorite</span>
    </a>
    <h3><a href="#">Graham Technologies Case Study</a></h3>
    <time datetime="2018-01-08">8 January, 2018</time>
    <ul class="tags">
      <li><a href="#">Agile</a></li>
      <li><a href="#">Improve Performance</a></li>
      <li><a href="#">Build Capability</a></li>
      <li><a href="#">Process Management</a></li>
    </ul>
    <a href="#" class="go">Download Resource</a>
  </div>
  <div class="card brochure">
    <span class="type">Brochure</span>
    <a href="#" class="fav">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
        <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
      </svg>
      <span>Favorite</span>
    </a>
    <h3><a href="#">CMMI the Agile Way</a></h3>
    <time datetime="2018-01-08">8 January, 2018</time>
    <ul class="tags">
      <li><a href="#">Agile</a></li>
      <li><a href="#">Improve Performance</a></li>
      <li><a href="#">Build Capability</a></li>
      <li><a href="#">Process Management</a></li>
    </ul>
    <a href="#" class="go">Download Resource</a>
  </div>
  <div class="card article">
    <span class="type">Article</span>
    <a href="#" class="fav">
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
        <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
      </svg>
      <span>Favorite</span>
    </a>
    <h3><a href="#">Helping Organizations Scale Agile Across the Enterprise</a></h3>
    <time datetime="2018-01-08">8 January, 2018</time>
    <ul class="tags">
      <li><a href="#">Agile</a></li>
      <li><a href="#">Improve Performance</a></li>
    </ul>
    <a href="#" class="go">View Article</a>
  </div>
</div>

This pattern is used to present four resources from the CMMI Institute Resource Center. The call-to-action button for articles should read “View Article.” For all other resource types, it should read, “Download Resource,” with a download icon.

Resource listing

Filter Resources

Ebook Favorite

5 Steps to Jump-Start Your Data Management Program

August, 2015

Data Management
High Maturity
Build Capability
Improve Performance

Download Resource

Article Favorite

Helping Organizations Scale Agile Across the Enterprise

8 January, 2018

Agile
Improve Performance

View Article

Article Favorite

Standard CMMI Appraisal Method for Process Improvement Version 1.3b

8 January, 2018

CMMI Appraisals
Implementation
Model

View Article

Article Favorite

Introduction to CMMI Appraisals

December, 2014

CMMI Appraisals
Implementation

View Article

Whitepaper Favorite

What is CMMI? (Chinese)

8 January, 2018

CMMI Appraisals
High Maturity
Build Capability
Improve Performance

Download Resource

Brochure Favorite

CMMI the Agile Way

8 January, 2018

Agile
Improve Performance
Build Capability
Process Management

Download Resource

Presentation Favorite

Using CMMI and Scrum to Sustain Process Capability

May, 2016 Download Resource

Case Study Favorite

Graham Technologies Case Study

8 January, 2018

Agile
Improve Performance
Build Capability
Process Management

Download Resource

Report Favorite

Process Maturity Profile

July, 2015

CMMI Appraisals
High Maturity
Build Capability

Download Resource

Whitepaper Favorite

Which CMMI Institute Model is Right for You?

8 January, 2018

Model
Improve Performance
Build Capability

Download Resource

Article Favorite

Agility Comes with Maturity

8 January, 2018

Agile
High Maturity
Build Capability

View Article

Article Favorite

Application for Candidate Observation

October, 2016

CMMI Appraisals
Grow Your Career
Improve Performance
Build Capability

View Article

Example Markup

<div class="row expanded resource-listing">
  <div class="col3 filters">
    <h2>Filter Resources</h2>
    <h3>Resource Type</h3>
    <ul>
      <li><a href="#"><span class="selection">Not selected</span> Any</a></li>
      <li><a href="#"><span class="selection">Not selected</span> Presentation</a></li>
      <li><a href="#"><span class="selection">Not selected</span> Article</a></li>
      <li><a href="#"><span class="selection">Not selected</span> Case Study</a></li>
      <li><a href="#"><span class="selection">Not selected</span> Model PDF</a></li>
      <li><a href="#"><span class="selection">Not selected</span> White Paper</a></li>
      <li><a href="#"><span class="selection">Not selected</span> Report</a></li>
      <li><a href="#"><span class="selection">Not selected</span> Brochure</a></li>
      <li><a href="#"><span class="selection">Not selected</span> Webinar</a></li>
      <li><a href="#"><span class="selection">Not selected</span> Book</a></li>
    </ul>
  </div>
  <div class="col9 resource-cards">
    <div class="card ebook">
      <span class="type">Ebook</span>
      <a href="#" class="fav">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
          <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
        </svg>
        <span>Favorite</span>
      </a>
      <h3><a href="#">5 Steps to Jump-Start Your Data Management Program</a></h3>
      <time datetime="2015-08">August, 2015</time>
      <ul class="tags">
        <li><a href="#">Data Management</a></li>
        <li><a href="#">High Maturity</a></li>
        <li><a href="#">Build Capability</a></li>
        <li><a href="#">Improve Performance</a></li>
      </ul>
      <a href="#" class="go">Download Resource</a>
    </div>
    <div class="card article">
      <span class="type">Article</span>
      <a href="#" class="fav">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
          <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
        </svg>
        <span>Favorite</span>
      </a>
      <h3><a href="#">Helping Organizations Scale Agile Across the Enterprise</a></h3>
      <time datetime="2018-01-08">8 January, 2018</time>
      <ul class="tags">
        <li><a href="#">Agile</a></li>
        <li><a href="#">Improve Performance</a></li>
      </ul>
      <a href="#" class="go">View Article</a>
    </div>
    <div class="card article">
      <span class="type">Article</span>
      <a href="#" class="fav">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
          <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
        </svg>
        <span>Favorite</span>
      </a>
      <h3><a href="#">Standard CMMI Appraisal Method for Process Improvement Version 1.3b</a></h3>
      <time datetime="2018-01-08">8 January, 2018</time>
      <ul class="tags">
        <li><a href="#">CMMI Appraisals</a></li>
        <li><a href="#">Implementation</a></li>
        <li><a href="#">Model</a></li>
      </ul>
      <a href="#" class="go">View Article</a>
    </div>
    <div class="card article">
      <span class="type">Article</span>
      <a href="#" class="fav">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
          <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
        </svg>
        <span>Favorite</span>
      </a>
      <h3><a href="#">Introduction to CMMI Appraisals</a></h3>
      <time datetime="2014-12">December, 2014</time>
      <ul class="tags">
        <li><a href="#">CMMI Appraisals</a></li>
        <li><a href="#">Implementation</a></li>
      </ul>
      <a href="#" class="go">View Article</a>
    </div>
    <div class="card whitepaper">
      <span class="type">Whitepaper</span>
      <a href="#" class="fav">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
          <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
        </svg>
        <span>Favorite</span>
      </a>
      <h3><a href="#">What is CMMI? (Chinese)</a></h3>
      <time datetime="2018-01-08">8 January, 2018</time>
      <ul class="tags">
        <li><a href="#">CMMI Appraisals</a></li>
        <li><a href="#">High Maturity</a></li>
        <li><a href="#">Build Capability</a></li>
        <li><a href="#">Improve Performance</a></li>
      </ul>
      <a href="#" class="go">Download Resource</a>
    </div>
    <div class="card brochure">
      <span class="type">Brochure</span>
      <a href="#" class="fav">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
          <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
        </svg>
        <span>Favorite</span>
      </a>
      <h3><a href="#">CMMI the Agile Way</a></h3>
      <time datetime="2018-01-08">8 January, 2018</time>
      <ul class="tags">
        <li><a href="#">Agile</a></li>
        <li><a href="#">Improve Performance</a></li>
        <li><a href="#">Build Capability</a></li>
        <li><a href="#">Process Management</a></li>
      </ul>
      <a href="#" class="go">Download Resource</a>
    </div>
    <div class="card presentation">
      <span class="type">Presentation</span>
      <a href="#" class="fav">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
          <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
        </svg>
        <span>Favorite</span>
      </a>
      <h3><a href="#">Using CMMI and Scrum to Sustain Process Capability</a></h3>
      <time datetime="2016-05">May, 2016</time>
      <a href="#" class="go">Download Resource</a>
    </div>
    <div class="card case-study">
      <span class="type">Case Study</span>
      <a href="#" class="fav">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
          <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
        </svg>
        <span>Favorite</span>
      </a>
      <h3><a href="#">Graham Technologies Case Study</a></h3>
      <time datetime="2018-01-08">8 January, 2018</time>
      <ul class="tags">
        <li><a href="#">Agile</a></li>
        <li><a href="#">Improve Performance</a></li>
        <li><a href="#">Build Capability</a></li>
        <li><a href="#">Process Management</a></li>
      </ul>
      <a href="#" class="go">Download Resource</a>
    </div>
    <div class="card report">
      <span class="type">Report</span>
      <a href="#" class="fav">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
          <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
        </svg>
        <span>Favorite</span>
      </a>
      <h3><a href="#">Process Maturity Profile</a></h3>
      <time datetime="2015-07">July, 2015</time>
      <ul class="tags">
        <li><a href="#">CMMI Appraisals</a></li>
        <li><a href="#">High Maturity</a></li>
        <li><a href="#">Build Capability</a></li>
      </ul>
      <a href="#" class="go">Download Resource</a>
    </div>
    <div class="card whitepaper">
      <span class="type">Whitepaper</span>
      <a href="#" class="fav">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
          <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
        </svg>
        <span>Favorite</span>
      </a>
      <h3><a href="#">Which CMMI Institute Model is Right for You?</a></h3>
      <time datetime="2018-01-08">8 January, 2018</time>
      <ul class="tags">
        <li><a href="#">Model</a></li>
        <li><a href="#">Improve Performance</a></li>
        <li><a href="#">Build Capability</a></li>
      </ul>
      <a href="#" class="go">Download Resource</a>
    </div>
    <div class="card article">
      <span class="type">Article</span>
      <a href="/index.html?fav=agility#resource-cards" class="fav is-fav">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
          <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
        </svg>
        <span>Favorite</span>
      </a>
      <h3><a href="#">Agility Comes with Maturity</a></h3>
      <time datetime="2018-01-08">8 January, 2018</time>
      <ul class="tags">
        <li><a href="#">Agile</a></li>
        <li><a href="#">High Maturity</a></li>
        <li><a href="#">Build Capability</a></li>
      </ul>
      <a href="#" class="go">View Article</a>
    </div>
    <div class="card article">
      <span class="type">Article</span>
      <a href="#" class="fav">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
          <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
        </svg>
        <span>Favorite</span>
      </a>
      <h3><a href="#">Application for Candidate Observation</a></h3>
      <time datetime="2016-10">October, 2016</time>
      <ul class="tags">
        <li><a href="#">CMMI Appraisals</a></li>
        <li><a href="#">Grow Your Career</a></li>
        <li><a href="#">Improve Performance</a></li>
        <li><a href="#">Build Capability</a></li>
      </ul>
      <a href="#" class="go">View Article</a>
    </div>
  </div>
</div>

This pattern is used to present a list of resources and the filters used against them on the CMMI Institute Resource Center.

Resource detail

View Article Favorite Article

Agility Comes With Maturity

Submitted by: CMMI Institute

Published: December 2015

The Agile approach is ideal for small projects in small organizations but when larger scale is required, the model needs to be adjusted to be effective.

Agile
High Maturity
Build Capability

Example Markup

<div class="resource-detail article resources">
  <a href="#" class="download">
    <img src="thumbnail.png" alt="Agility Comes With Maturity" />
    <span>View Article</span>
  </a>
  <a href="/dev/patterns.html?id=detail#resource-cards" class="fav">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
      <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
    </svg>
    <span>Favorite</span>
  </a>
  <span class="type">Article</span>
  <h1>Agility Comes With Maturity</h1>
  <p><strong>Submitted by: CMMI Institute</strong></p>
  <p><strong>Published: December 2015</strong></p>
  <p>The Agile approach is ideal for small projects in small organizations but when larger scale is required, the model needs to be adjusted to be effective.</p>
  <ul class="tags">
    <li><a href="#">Agile</a></li>
    <li><a href="#">High Maturity</a></li>
    <li><a href="#">Build Capability</a></li>
  </ul>
  <div class="sharing">
    <p>Share this Resource:</p>
    <ul>
      <li class="twitter">
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" />
          </svg>
          <span>Twitter</span>
        </a>
      </li>
      <li class="facebook">
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z" />
          </svg>
          <span>Facebook</span>
        </a>
      </li>
      <li class="linkedin">
        <a href="#">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z" />
          </svg>
          <span>LinkedIn</span>
        </a>
      </li>
    </ul>
  </div>
</div>

This pattern is used to present each of the individual resources in the CMMI Institute Resource Center.

Stripe search

Looking for something?

Example Markup

<div class="row stripe search white">
  <div class="col12">
    <h1>Looking for something?</h1>
    <form class="search-form" action="https://cmmiinstitute.com/search">
      <input type="search" placeholder="Search" />
      <button>Go</button>
    </form>
  </div>
</div>

This pattern places the search component in a stripe component. This makes the search form more prominent, and provides space for a heading drawing further attention to this functionality.

Partner directory search results

Partner Organization
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet justo vitae est faucibus viverra. Proin molestie vel lorem non tempor. Cras posuere lectus non mi ullamcorper hendrerit. Pellentesque eget auctor.

Services Offered: Training, Consulting
Partner Organization
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet justo vitae est faucibus viverra. Proin molestie vel lorem non tempor. Cras posuere lectus non mi ullamcorper hendrerit. Pellentesque eget auctor.

Services Offered: Training, Consulting
Partner Organization
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed sit amet justo vitae est faucibus viverra. Proin molestie vel lorem non tempor. Cras posuere lectus non mi ullamcorper hendrerit. Pellentesque eget auctor.

Services Offered: Training, Consulting

Example Markup

<div class="row">
  <div class="col12">
    <ul class="partner-directory-search-results">
      <li>
        <a href="#" class="title">Partner Organization</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        <p><strong>Services Offered:</strong> Training, Consulting</p>
      </li>
      <li>
        <a href="#" class="title">Partner Organization</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        <p><strong>Services Offered:</strong> Training, Consulting</p>
      </li>
      <li>
        <a href="#" class="title">Partner Organization</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit...</p>
        <p><strong>Services Offered:</strong> Training, Consulting</p>
      </li>
    </ul>
  </div>
</div>

This pattern is used to format search results in the CMMI Institute Partner Directory.

Sharing options

Example Markup

<div class="sharing">
  <p>Share this item:</p>
  <ul>
    <li class="twitter">
      <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" />
        </svg>
        <span>Twitter</span>
      </a>
    </li>
    <li class="facebook">
      <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z" />
        </svg>
        <span>Facebook</span>
      </a>
    </li>
    <li class="linkedin">
      <a href="#">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
          <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z" />
        </svg>
        <span>LinkedIn</span>
      </a>
    </li>
  </ul>
</div>

This pattern can be used to provide a user with prompts to share an item on social media. Links can be tailored to provide a suggested post based on the item being shared.

Twitter card

Franz Johansson @FrannieJ

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et convallis sapien. Etiam eu velit nec tellus tincidunt pellentesque.

Sep 20, 2018 View on Twitter
Jay Baer @GrizzlyBaer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque interdum rutrum sodales. Nullam mattis fermentum libero, non volutpat.

Sep 16, 2018 View on Twitter

Example Markup

<ul class="twitter-card">
  <li class="card">
    <header>
      <div class="author-wrap">
        <a class="avatar" href="#">
          <img src="photo.jpg" alt="Frans Johansson" />
        </a>
        <a class="author-link" href="#">
          <span class="name">Franz Johansson</span>
          <span class="handle">@FrannieJ</span>
        </a>
      </div>
    </header>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et convallis sapien. Etiam eu velit nec tellus tincidunt pellentesque.</p>
    <footer>Sep 20, 2018 <a href="#">View on Twitter</a></footer>
  </li>
</ul>

This pattern is used to display a list of tweets. The formatting shown conforms to Twitter's display requirements.

Image gallery

Example Markup

<ul class="image-gallery">
  <li>
    <a href="full1.jpg">
      <img src="thumb1.jpg" alt="An adorable puppy lying in a field" />
    </a>
  </li>
  <li>
    <a href="full2.jpg">
      <img src="thumb2.jpg" alt="An adorable puppy on a blanket" />
    </a>
  </li>
  <li>
    <a href="full3.jpg">
      <img src="thumb3.jpg" alt="An adorable puppy jumping in a field" />
    </a>
  </li>
  <li>
    <a href="full4.jpg">
      <img src="thumb4.jpg" alt="Three adorable puppies carrying a single stick, with a fourth puppy out of focus following behind them" />
    </a>
  </li>
  <li>
    <a href="full5.jpg">
      <img src="thumb5.jpg" alt="An adorable puppy" />
    </a>
  </li>
  <li>
    <a href="full6.jpg">
      <img src="thumb6.jpg" alt="An adorable puppy sleeping" />
    </a>
  </li>
</ul>

This pattern can be used to present a large collection of images.

Card selection

Option #1

Fusce pellentesque luctus diam, non pulvinar mi vulputate ac. Praesent eget hendrerit turpis. Vestibulum pharetra tellus ante, ac sagittis mi faucibus in.

Ut iaculis auctor orci, eu molestie arcu auctor sit amet. Integer vehicula nunc id turpis mattis hendrerit. Nunc vitae malesuada massa, non gravida elit. Nam venenatis felis eu augue accumsan cursus. Aenean odio sem, tincidunt eu eros venenatis, tempus viverra leo. Aliquam nec nibh euismod, cursus elit eu, facilisis leo. Nam eu condimentum mi, nec elementum tellus. Vivamus varius felis sed tempor tristique.

Option #2

Fusce non aliquam diam. Quisque et sem eu tellus tincidunt consequat. Suspendisse semper justo id augue semper porttitor. Phasellus nec rutrum nisl.

Suspendisse urna diam, iaculis eget risus sed, rhoncus condimentum tortor. Ut finibus non massa quis luctus. Curabitur diam dui, elementum ac orci vel, sodales venenatis nisi. Integer tristique, turpis a scelerisque euismod, leo est ullamcorper nibh, at laoreet tortor nibh vitae mi.

Option #3

Nullam egestas pulvinar justo congue porttitor. Vestibulum sit amet quam eu justo convallis facilisis. Morbi vestibulum sed nisi non ornare. Nam placerat lacus quis blandit accumsan.

Proin ac urna ac mauris consectetur placerat sit amet in ex. Praesent est erat, finibus a massa in, finibus vehicula nunc. Duis venenatis nulla quis nunc faucibus ultricies. Nulla vitae mauris feugiat, faucibus dui et, porta eros. Nunc volutpat sapien eget massa commodo ultrices. Nullam velit urna, consectetur auctor magna nec, ornare tincidunt est. Morbi aliquet eros euismod enim fermentum, vel egestas urna rhoncus. Pellentesque tempor finibus metus quis vulputate. Integer fringilla, magna id porttitor mollis, sem leo condimentum urna, eget condimentum erat quam eget dui. Sed dictum est vel laoreet imperdiet. Nulla semper a quam non consectetur.

Option #4

Nam enim augue, aliquam nec arcu in, pellentesque maximus magna. Donec mollis orci nec tincidunt imperdiet. Fusce sollicitudin hendrerit accumsan.

Fusce efficitur tortor vitae ex maximus, a vestibulum nulla finibus. Vivamus eu arcu ut quam blandit efficitur vel et diam. Aenean tincidunt hendrerit lacus, nec tempor leo tempus sed. Curabitur blandit accumsan lorem, ut elementum dui faucibus in. Sed varius mi sed odio venenatis, nec efficitur velit ornare. Nullam congue diam sed nulla mattis euismod. Morbi blandit ornare urna at pulvinar. Sed dignissim quis lectus vitae sollicitudin. Curabitur a nibh mi.

Vestibulum egestas neque id nisi mollis facilisis. Sed vitae metus cursus, sollicitudin elit sit amet, hendrerit elit. Pellentesque at sem nunc. Cras accumsan nec lectus auctor suscipit. Phasellus ut hendrerit elit, ut interdum augue. Sed sed enim mi. Aenean maximus sem ac fringilla volutpat. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur sodales arcu in lacus placerat posuere. Nullam dignissim nulla risus, vel pellentesque nulla tincidunt quis.

Example Markup

<section class="card-selection">
  <h2>Option #1</h2>
  <div class="selection-card">
    <p>Fusce pellentesque luctus diam, non pulvinar mi vulputate ac...</p>
  </div>
  <p>Ut iaculis auctor orci, eu molestie arcu auctor sit amet...</p>
</section>
<section class="card-selection">
  <h2>Option #2</h2>
  <div class="selection-card">
    <p>Fusce non aliquam diam. Quisque et sem eu tellus tincidunt consequat...</p>
  </div>
  <p>Suspendisse urna diam, iaculis eget risus sed, rhoncus condimentum tortor...</p>
</section>
<section class="card-selection">
  <h2>Option #3</h2>
  <div class="selection-card">
    <p>Nullam egestas pulvinar justo congue porttitor...</p>
  </div>
  <p>Proin ac urna ac mauris consectetur placerat sit amet in ex...</p>
</section>
<section class="card-selection">
  <h2>Option #4</h2>
  <div class="selection-card">
    <p>Nam enim augue, aliquam nec arcu in, pellentesque maximus magna...</p>
  </div>
  <p>Fusce efficitur tortor vitae ex maximus, a vestibulum nulla finibus...</p>
  <p>Vestibulum egestas neque id nisi mollis facilisis...</p>
</section>

Only consecutive .card-selection elements will be grouped into a set. The last element in any set with a data-show-all or data-collapse-all attribute will set the button text with those values.

Comparison

	CMMI Recommends
Option #1 Fusce interdum laoreet urna maximus fermentum. Curabitur sit amet mi et nibh hendrerit porttitor. Sed convallis velit sodales elit mattis, non lobortis nunc malesuada. Suspendisse accumsan a enim ac tristique. Etiam lobortis metus vel lacus interdum ullamcorper. Mauris aliquam fermentum urna, et ultricies ligula tristique sit amet. Praesent suscipit nisl quis justo elementum hendrerit. Fusce dictum sit amet orci vel luctus.	Option #2 Duis faucibus ipsum eget justo pulvinar laoreet. Cras sollicitudin justo sed felis vehicula, at congue massa consectetur. Fusce quis tellus eu arcu imperdiet facilisis congue non sapien. Nullam fermentum lectus lectus, a ornare augue gravida eu. Suspendisse scelerisque purus a nulla bibendum, quis pretium ante sagittis.	Option #3 Suspendisse aliquet turpis dui, non posuere diam sodales vitae. In ultricies, purus at rhoncus convallis, urna massa volutpat nibh, sed maximus libero velit in nibh. Aliquam eu quam a ligula ornare laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id est molestie, cursus quam vel, congue odio.
Learn More	Learn More	Learn More

CMMI Recommends

Option #1

Fusce interdum laoreet urna maximus fermentum. Curabitur sit amet mi et nibh hendrerit porttitor. Sed convallis velit sodales elit mattis, non lobortis nunc malesuada. Suspendisse accumsan a enim ac tristique. Etiam lobortis metus vel lacus interdum ullamcorper. Mauris aliquam fermentum urna, et ultricies ligula tristique sit amet. Praesent suscipit nisl quis justo elementum hendrerit. Fusce dictum sit amet orci vel luctus.

Option #2

Duis faucibus ipsum eget justo pulvinar laoreet. Cras sollicitudin justo sed felis vehicula, at congue massa consectetur. Fusce quis tellus eu arcu imperdiet facilisis congue non sapien. Nullam fermentum lectus lectus, a ornare augue gravida eu. Suspendisse scelerisque purus a nulla bibendum, quis pretium ante sagittis.

Option #3

Suspendisse aliquet turpis dui, non posuere diam sodales vitae. In ultricies, purus at rhoncus convallis, urna massa volutpat nibh, sed maximus libero velit in nibh. Aliquam eu quam a ligula ornare laoreet. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras id est molestie, cursus quam vel, congue odio.

Learn More

Example Markup

<div class="row expanded">
  <table class="comparison">
    <thead>
      <tr>
        <th />
        <th class="recommended">CMMI Recommends</th>
        <th />
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>
          <h2>Option #1</h2>
          <p>Fusce interdum laoreet urna maximus fermentum...</p>
        </td>
        <td class="recommended">
          <h2>Option #2</h2>
          <p>Duis faucibus ipsum eget justo pulvinar laoreet...</p>
        </td>
        <td>
          <h2>Option #3</h2>
          <p>Suspendisse aliquet turpis dui, non posuere diam sodales vitae...</p>
        </td>
      </tr>
    </tbody>
    <tfoot>
      <tr>
        <td>
          <a href="#comparison" class="button p2">Learn More</a>
        </td>
        <td>
          <a href="#comparison" class="button">Learn More</a>
        </td>
        <td>
          <a href="#comparison" class="button p2">Learn More</a>
        </td>
      </tr>
    </tfoot>
  </table>
</div>

This pattern is used to present each of the individual resources in the CMMI Institute Resource Center.

Course listing

Fundamentals of CMMI E-Learning
- E-Learning
- Version 1.3
This beginning e-learning course will teach you about the CMMI models used to improve performance in product development, service delivery, and procurement and meets the course pre-requisites for the CMMI Associate certification.
Foundations of Capability
- Instructor Led
- Version 2.0
By the end of this course, you will be able to connect the CMMI model and appraisal method with business value, and understand what is involved in preparing for a CMMI appraisal. The Associate Exam is included in this course.

Example Markup

<ul class="course-listing">
  <li>
    <h4><a href="#">Fundamentals of CMMI E-Learning</a></h4>
    <ul class="info">
      <li class="elearning">E-Learning</li>
      <li class="v1-3">Version 1.3</li>
    </ul>
    <p>This beginning e-learning course will teach you about the CMMI models used to improve performance in product development, service delivery, and procurement and meets the course pre-requisites for the CMMI Associate certification.</p>
  </li>
  <li>
    <h4><a href="#">Foundations of Capability</a></h4>
    <ul class="info">
      <li class="instructor">Instructor Led</li>
      <li class="v2-0">Version 2.0</li>
    </ul>
    <p>By the end of this course, you will be able to connect the CMMI model and appraisal method with business value, and understand what is involved in preparing for a CMMI appraisal. The Associate Exam is included in this course.</p>
  </li>
</ul>

This pattern is used to present the Fundamental of CMMI and Foundations of Capability courses on the CMMI Institute’s Training page.

Case study spotlight

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et convallis sapien. Etiam eu velit nec tellus tincidunt pellentesque. Sed porta diam ut odio dapibus.

Frans Johansson, Role Title
Case Study Favorite
ACME Case Study
8 January, 2018
Download Resource

Example Markup

<ul class="case-study-spotlight">
  <li>
    <div class="col8">
      <div class="testimonial">
        <ul class="images">
          <li>
            <img src="photo.jpg" alt="Frans Johansson" />
          </li>
          <li class="logo">
            <img src="logo.svg" alt="ACME" />
          </li>
        </ul>
        <figure class="quote">
          <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et convallis sapien. Etiam eu velit nec tellus tincidunt pellentesque. Sed porta diam ut odio dapibus.</p>
          </blockquote>
          <figcaption>
            <cite><strong>Frans Johansson</strong>, Role Title</cite>
          </figcaption>
        </figure>
      </div>
    </div>
    <div class="col4 resource-cards">
      <div class="card case-study">
        <span class="type">Case Study</span>
        <a href="#" class="fav">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
            <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
          </svg>
          <span>Favorite</span>
        </a>
        <h3><a href="#">ACME Case Study</a></h3>
        <time datetime="2018-01-08">8 January, 2018</time>
        <ul class="tags">
          <li><a href="#">CMMI</a></li>
          <li><a href="#">Development</a></li>
          <li><a href="#">Performance</a></li>
        </ul>
        <a href="#" class="go">Download Resource</a>
      </div>
    </div>
  </li>
</ul>

This pattern displays a list of case study excerpts accompanied by their organization's logos and a resource card.

Customer spotlight

ACME Industries Achieves CMMI Maturity Level 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et convallis sapien. Etiam eu velit nec tellus tincidunt pellentesque. Sed porta diam ut odio dapibus.

Frans Johansson, Role Title
Read more

Example Markup

<ul class="customer-spotlight">
  <li>
    <div class="col8">
      <div class="testimonial">
        <ul class="images">
          <li>
            <img src="photo.jpg" alt="Frans Johansson" />
          </li>
          <li class="logo">
            <img src="logo.svg" alt="ACME" />
          </li>
        </ul>
        <figure class="quote">
          <blockquote>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et convallis sapien. Etiam eu velit nec tellus tincidunt pellentesque. Sed porta diam ut odio dapibus.</p>
          </blockquote>
          <figcaption>
            <cite><strong>Frans Johansson</strong>, Role Title</cite>
          </figcaption>
        </figure>
      </div>
    </div>
    <div class="col4 resource-cards">
      <div class="card case-study">
        <span class="type">Article</span>
        <a href="#" class="fav">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 13.32">
            <path d="M1.24,7.21l6,6a.37.37,0,0,0,.52,0l6-6a4.22,4.22,0,0,0-6-6,2.14,2.14,0,0,0-.29.33,3.63,3.63,0,0,0-.29-.33,4.22,4.22,0,0,0-6,6Z" />
          </svg>
          <span>Favorite</span>
        </a>
        <h3><a href="#">ACME Case Study</a></h3>
        <time datetime="2018-01-08">8 January, 2018</time>
        <ul class="tags">
          <li><a href="#">CMMI</a></li>
          <li><a href="#">Development</a></li>
          <li><a href="#">Performance</a></li>
        </ul>
        <a href="#" class="go">Download Resource</a>
      </div>
    </div>
  </li>
</ul>

This pattern displays a list of case study excerpts accompanied by their organization's logos and a resource card.

Partner information sidebar

Example Markup

<article class="row" itemscope="itemscope" itemtype="http://schema.org/Organization">
  <div class="col4">
    <header class="partner-info-sidebar card">
      <h1>
        <img src="logo.svg" alt="Acme Consulting" itemprop="logo" />
        <span itemprop="name">Acme Consulting</span>
      </h1>
      <div itemprop="address" itemscope="itemscope" itemtype="http://schema.org/PostalAddress" class="address">
        <span itemprop="streetAddress" class="street">3144 Spadafore Dr.</span>
        <span itemprop="addressLocality">North East, PA</span>,
        <span itemprop="postalCode">16428</span>
      </div>
      <div class="bpoc">
        <label><abbr title="Business Point of Contact">BPOC</abbr></label>
        <p><strong>Keith Harrington</strong></p>
        <p>[email protected]</p>
      </div>
      <a href="#" class="button">View Appraisals</a>
    </header>
  </div>
  <div class="col8">...</div>
</article>

This pattern displays important information about a partner in the partner directory in a sidebar. Content about the partner should go in the column to the right.

Timeline

2017

CMMI Pattern Library is created.

2018

CMMI Pattern Library v2.0 is launched.

Example Markup

<section class="timeline">
  <section>
    <img src="icon.svg" width="60" height="60" alt="Timeline Entry #1" />
    <h3>2017</h3>
    <p>CMMI Pattern Library is created.</p>
  </section>
  <section>
    <img src="icon.svg" width="60" height="60" alt="Timeline Entry #2" />
    <h3>2018</h3>
    <p>CMMI Pattern Library v1.0 is launched.</p>
  </section>
</section>

This pattern provides a way to present information about events arranged chronologically.

World Map Stats

10,000+ Organizations
106 Different Countries

410 Attendees came from all over the globe in 2018.
29 Different countries & organizations were represented at the conference.

Example Markup

<ul class="world-map-stats">
  <li><strong>10,000+</strong> Organizations</li>
  <li><strong>106</strong> Different Countries</li>
</ul>

<!-- Orange map color -->
<ul class="world-map-stats orange">
  <li><strong>410</strong> Attendees came from all over the globe in 2018.</li>
  <li><strong>29</strong> Different countries & organizations were represented at the conference.</li>
</ul>

This pattern shows one or two statistics over a world map. Add .orange for an orange map.

CMMI V2.0 Infographic

Training & Certification

Updated training will have modular training components with virtual and in-person options. The training is more learning objective oriented.

Model

CMMI V2.0 model is simplified to reduce redundancy while maintaining the models for Development, Services, Acquisition, and People.

Adoption Guidance

Guidance for a smooth transition from V1.3 to V2.0 and for new adopters to get started with CMMI V2.0.

Systems & Tools

Redesigned system using single sign-on to access online models, new appraisal system, and resources.

Appraisal Method

A new appraisal method helps to increase reliability while reducing overall cost.

Example Markup

<div class="cmmi-v2-infographic">
  <div class="cmmi-v2-infographic-callout training">
    <h3>Training</h3>
    <p>Updated training will have modular training components...</p>
  </div>
  <div class="cmmi-v2-infographic-callout model">
    <h3>Model</h3>
    <p>CMMI V2.0 model is simplified to reduce redundancy...</p>
  </div>
  <div class="cmmi-v2-infographic-callout adoption">
    <h3>Adoption Guidance</h3>
    <p>Guidance for a smooth transition from V1.3 to V2.0...</p>
  </div>
  <div class="cmmi-v2-infographic-callout systems">
    <h3>Systems &amp; Tools</h3>
    <p>Redesigned system using single sign-on to access...</p>
  </div>
  <div class="cmmi-v2-infographic-callout appraisal">
    <h3>Appraisal Method</h3>
    <p>A new appraisal method helps to increase reliability...</p>
  </div>
</div>

This pattern is used on the CMMI Development V2.0 page.

Model outline

Doing

This Category includes CAs for producing, buying, and delivering quality solutions.

Ensuring Quality

This CA includes PAs important to both quality assurance and quality control. The Ensuring Quality CA includes the following PAs:

Requirements Development and Management enables developing and keeping updated a common understanding of needs and expectations for the solution.

Process Quality Assurance ensures the process is followed and quality solutions are produced.

Verification and Validation ensures requirements are met and the solution functions as intended in the target environment.

Peer Reviews identify solution defects or issues.

Example Markup

<section id="doing" class="model-category-doing">
  <h1>Doing</h1>
  <p>This Category includes CAs for producing, buying, and delivering quality solutions.</p>
  <section id="enq" class="model-ca-enq">
    <header>
      <h1>Ensuring Quality</h1>
      <p>This CA includes PAs important to both quality assurance and quality control...</p>
    </header>
    <section class="model-pa-rdm">
      <p><strong>Requirements Development and Management</strong> enables developing...</p>
    </section>
    <section class="model-pa-pqa">
      <p><strong>Process Quality Assurance</strong> ensures the process is followed...</p>
    </section>
    <section class="model-pa-vv">
      <p><strong>Verification and Validation</strong> ensures requirements are met...</p>
    </section>
    <section class="model-pa-pr">
      <p><strong>Peer Reviews</strong> identify solution defects or issues.</p>
    </section>
  </section>
</section>

This pattern is used on present the categories, capability areas, and practice areas in the CMMI.

Cybermaturity roadmap explainer

The roadmap is prioritized based on your organization’s biggest threats and risks.

Results can be filtered in numerous ways, making it easy to isolate the information you want.

Roadmap elements are organized intuitively, so you get a lot of information at a glance.

Export any version of the roadmap as a PDF at any time to reference while offline.

Example Markup

<div class="cybermaturity-roadmap-explainer">
  <figure>
    <img src="screen1.jpg" alt="The roadmap is prioritized..." />
    <figcaption>The roadmap is prioritized...</figcaption>
  </figure>
  <figure>
    <img src="screen2.jpg" alt="Results can be filtered..." />
    <figcaption>Results can be filtered...</figcaption>
  </figure>
  <figure>
    <img src="screen3.jpg" alt="Roadmap elements are..." />
    <figcaption>Roadmap elements are...</figcaption>
  </figure>
  <figure>
    <img src="screen4.jpg" alt="Export any version of..." />
    <figcaption>Export any version of...</figcaption>
  </figure>
</div>

This pattern is used on the Cybermaturity Maturity Roadmap page.

Calendar

28 29 30 31 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 1 2 3

Example Markup

<time datetime="2018-01" class="month calendar">
  <nav>
    <a href="#calendar" class="prev"><span>Prev</span></a>
    <span>February 2018</span>
    <a href="#calendar" class="next"><span>Next</span></a>
  </nav>
  <ol class="day-names">
    <li>Sun</li>
    <li>Mon</li>
    <li>Tue</li>
    <li>Wed</li>
    <li>Thu</li>
    <li>Fri</li>
    <li>Sat</li>
  </ol>
  <time datetime="2018-W05" class="week">
    <time datetime="2018-01-28" class="outside-month"><span>28</span></time>
    <time datetime="2018-01-29" class="outside-month"><span>29</span></time>
    <time datetime="2011-01-30" class="outside-month"><span>30</span></time>
    <time datetime="2018-01-31" class="outside-month"><span>31</span></time>
    <time datetime="2018-02-01"><span>1</span></time>
    <time datetime="2018-02-02"><span>2</span></time>
    <time datetime="2018-02-03"><span>3</span></time>
  </time>
  <time datetime="2018-W06" class="week">
    <time datetime="2018-02-04"><span>4</span></time>
    <time datetime="2018-02-05"><span>5</span></time>
    <time datetime="2018-02-06"><span>6</span></time>
    <time datetime="2018-02-07"><span>7</span></time>
    <time datetime="2018-02-08"><span>8</span></time>
    <time datetime="2018-02-09"><span>9</span></time>
    <time datetime="2018-02-10"><span>10</span></time>
  </time>
  <time datetime="2018-W07" class="week">
    <time datetime="2018-02-11"><span>11</span></time>
    <time datetime="2018-02-12"><span>12</span></time>
    <time datetime="2018-02-13"><span>13</span></time>
    <time datetime="2018-02-14"><span>14</span></time>
    <time datetime="2018-02-15"><span class="marked">15</span></time>
    <time datetime="2018-02-16"><span>16</span></time>
    <time datetime="2018-02-17"><span>17</span></time>
  </time>
  <time datetime="2018-W08" class="week">
    <time datetime="2018-02-18"><span>18</span></time>
    <time datetime="2018-02-19"><span>19</span></time>
    <time datetime="2018-02-20"><span>20</span></time>
    <time datetime="2018-02-21"><span>21</span></time>
    <time datetime="2018-02-22"><span>22</span></time>
    <time datetime="2018-02-23"><span>23</span></time>
    <time datetime="2018-02-24"><span>24</span></time>
  </time>
  <time datetime="2018-W09" class="week">
    <time datetime="2018-02-25"><span>25</span></time>
    <time datetime="2018-02-26"><span>26</span></time>
    <time datetime="2018-02-27"><span>27</span></time>
    <time datetime="2018-02-28"><span>28</span></time>
    <time datetime="2018-03-01" class="outside-month"><span>1</span></time>
    <time datetime="2018-03-02" class="outside-month"><span>2</span></time>
    <time datetime="2018-03-03" class="outside-month"><span>3</span></time>
  </time>
</time>

This pattern is used to present a calendar of events. It uses a series of nested <time> tags to present the month, the weeks in that month, and the days in each week.

Call to action

Get Started Today

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis et convallis sapien. Etiam eu velit nec tellus tincidunt pellentesque. Sed porta diam ut odio dapibus, eget aliquam ipsum ullamcorper. Cras quis rhoncus ex.

Press the Button

Example Markup

<section class="cta">
              <h2>Get Started Today</h2>
              <p>Lorem ipsum dolor sit amet...</p>
              <a href="#" class="button">Press the Button</a>
              </section>

The call to action pattern is used to prompt a user to take a definite action. This should only be used at the bottom of a page, and no page should use more than one call to action. Never confuse a user with more than one action in this pattern.

Site footer

See below

Example Markup

<footer class="site">
  <nav class="footer">
    <ul>
      <li>
        <a href="https://cmmiinstitute.com/partners">Partners</a>
        <ul>
          <li><a href="https://cmmiinstitute.com/partners/directory">Partner Directory</a></li>
          <li><a href="https://cmmiinstitute.com/partners/join">Become a Partner</a></li>
          <li><a href="https://cmmiinstitute.com/partners/existing">Working as a Partner</a></li>
          <li><a href="https://cmmiinstitute.com/partners/quality">Quality</a></li>
        </ul>
      </li>
      <li>
        <a href="https://cmmiinstitute.com/capability-counts/2018">Capability Counts 2018</a>
        <ul>
          <li><a href="https://cmmiinstitute.com/capability-counts/2018/speakers">Speakers</a></li>
          <li><a href="https://cmmiinstitute.com/capability-counts/2018/program">Program</a></li>
          <li><a href="https://cmmiinstitute.com/capability-counts/2018/register">Register</a></li>
          <li><a href="https://cmmiinstitute.com/capability-counts/2018/sponsors">Sponsors</a></li>
          <li><a href="https://cmmiinstitute.com/capability-counts/2018/hotel">Hotel &amp; Travel</a></li>
          <li><a href="https://cmmiinstitute.com/capability-counts/2018/capability-challenge">Capability Challenge</a></li>
        </ul>
      </li>
      <li>
        <a href="https://cmmiinstitute.com/company">Company</a>
        <ul>
          <li><a href="https://cmmiinstitute.com/company/news">News</a></li>
          <li><a href="https://cmmiinstitute.com/company/careers">Careers</a></li>
          <li><a href="https://cmmiinstitute.com/company/about">About</a></li>
          <li><a href="https://cmmiinstitute.com/company/support">Support</a></li>
          <li><a href="https://cmmiinstitute.com/company/contact">Contact</a></li>
        </ul>
      </li>
    </ul>
  </nav>
  <div class="contact">
    <h3>Follow us</h3>
    <ul class="social">
      <li>
        <a href="http://twitter.com/CMMI_Institute" class="twitter">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6.066 9.645c.183 4.04-2.83 8.544-8.164 8.544-1.622 0-3.131-.476-4.402-1.291 1.524.18 3.045-.244 4.252-1.189-1.256-.023-2.317-.854-2.684-1.995.451.086.895.061 1.298-.049-1.381-.278-2.335-1.522-2.304-2.853.388.215.83.344 1.301.359-1.279-.855-1.641-2.544-.889-3.835 1.416 1.738 3.533 2.881 5.92 3.001-.419-1.796.944-3.527 2.799-3.527.825 0 1.572.349 2.096.907.654-.128 1.27-.368 1.824-.697-.215.671-.67 1.233-1.263 1.589.581-.07 1.135-.224 1.649-.453-.384.578-.87 1.084-1.433 1.489z" />
          </svg>
          <span>Twitter</span>
        </a>
      </li>
      <li>
        <a href="http://facebook.com/cmmiinstitute" class="facebook">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm3 8h-1.35c-.538 0-.65.221-.65.778v1.222h2l-.209 2h-1.791v7h-3v-7h-2v-2h2v-2.308c0-1.769.931-2.692 3.029-2.692h1.971v3z" />
          </svg>
          <span>Facebook</span>
        </a>
      </li>
      <li>
        <a href="http://www.linkedin.com/company/cmmi-institute" class="linkedin">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
            <path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2 16h-2v-6h2v6zm-1-6.891c-.607 0-1.1-.496-1.1-1.109 0-.612.492-1.109 1.1-1.109s1.1.497 1.1 1.109c0 .613-.493 1.109-1.1 1.109zm8 6.891h-1.998v-2.861c0-1.881-2.002-1.722-2.002 0v2.861h-2v-6h2v1.093c.872-1.616 4-1.736 4 1.548v3.359z" />
          </svg>
          <span>LinkedIn</span>
        </a>
      </li>
    </ul>
    <p>11 Stanwix Street, Suite 1150<br />
    Pittsburgh, PA 15222<br />
    412-282-4020</p>
  </div>
  <p class="copyright">&copy; 2017 CMMI Institute LLC. All rights reserved.</p>
  <nav class="minor">
    <ul>
      <li><a href="https://cmmiinstitute.com/privacy">Privacy</a></li>
      <li><a href="https://cmmiinstitute.com/terms">Terms</a></li>
      <li><a href="https://cmmiinstitute.com/sitemap">Sitemap</a></li>
    </ul>
  </nav>
</footer>

The footer pattern provides ancillary navigation at the bottom of each page on the CMMI Institute website.

Details

Details list

Checklist

Chunk list

Teaching Experience and Skills

Discipline Area Experience and Skills

Academic Credentials

Appraisal Experience and Skills

Language Experience and Skills

Features list

Events list

Events list

Event details

Lead Appraiser Training

Location

Date & Time

Instructors

Certification Track

Pricing

Description

Event Organizer

Refund Policy

Event details (abbreviated)

Lead Appraiser Training

Course registration card

Site header

Hero header

Index header

Conference header

Dashboard header

Standard header

Page tab navigation

Process steps

How it works

Select your Certification Program

Apply or enroll in training required for your program

Recieve and maintain your Certification

Solution choice

Capability Maturity Model Integration (CMMI)®

Data Management Maturity (DMM)℠

Medical Device Discovery Appraisal Program (MDDAP)

Cybersecurity Capability Assessment

Challenge/solution navigator

Does your organization…

Then you need the CMMI for Development (CMMI-DEV) Model

How it can help

Key Process Areas

Does your organization…

Then you need the CMMI for Services (CMMI-SVC) Model

How it can help

Key Process Areas

Does your organization…

Then you need the CMMI for Acquisitions (CMMI-ACQ) Model

How it can help

Key Process Areas

Does your organization…

Then you need the CMMI for People Management (CMMI-PM) Model

How it can help

Key Process Areas

Does your organization…

Then you need the CMMI for Data Management (CMMI-DMM) Model

How it can help

Key Process Areas

Gauge list

Introduction to CMMI for Development (DEV)

Introduction to CMMI for Data Management (DMM)

Applying CMMI®

Lead Appraiser Training with People CMM

Article listing

Demonstrate the value and ROI of adopting CMMI

Up-to-date with the latest trend methodologies used in the market

Easier to use and more user friendly

News headline

News headlines

News listing

Lead story

Person profile

Person list

A

Resource cards

Applying CMMI^®