20Lists

The different types of "lists" used throughout SYx

20.1Definitions

The definitions component is a set of "definitions", to be used within a pane component. Wrap each set of definitions with a .definition-group.

Each .definition is comprised of a label and description, and an error status if applicable. Apply an error status to each definition by adding <div class="definition__status">Status</div> to the markup, then adding an .is-invalid class to .definition.

Mentoring

Mentor Name
Alison Bechdel
Mentor Title
Required
Mentor Focus
  • Community Connections
  • Career Growth
  • Education Attainment
Invalid
Orientation Overview
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Mentor Hours
12
Show Markup

<div class="pane">
    <div class="pane__header">
        <h2 class="heading--micro">Mentoring</h2>
    </div>
    <div class="pane__body">
        <div class="definition-group">
            <div class="definition">
                <div class="definition__label">
                    <div class="definition__label-text">Mentor Name</div>
                </div>
                <div class="definition__description">
                    Alison Bechdel
                </div>
            </div>
            <div class="definition is-invalid">
                <div class="definition__label">
                    <div class="definition__label-text">Mentor Title</div>
                </div>
                <div class="definition__description">
                    <span class="show-for-large">&mdash;</span>
                </div>
                <div class="definition__status">
                    Required
                </div>
            </div>
            <div class="definition is-invalid">
                <div class="definition__label">
                    <div class="definition__label-text">Mentor Focus</div>
                </div>
                <div class="definition__description">
                    <ul>
                        <li>Community Connections</li>
                        <li>Career Growth</li>
                        <li>Education Attainment</li>
                    </ul>
                </div>
                <div class="definition__status">
                    Invalid
                </div>
            </div>
            <div class="definition">
                <div class="definition__label">
                    <div class="definition__label-text">Orientation Overview</div>
                </div>
                <div class="definition__description">
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                </div>
            </div>
            <div class="definition">
                <div class="definition__label">
                    <div class="definition__label-text">Mentor Hours</div>
                </div>
                <div class="definition__description">
                    12
                </div>
            </div>
        </div>
    </div>
</div>

20.2Details list

Display list of key, value pairs

Default styling
  • Year Founded 1982
  • Organization Type Advocacy
    Education
    Training
  • Location Washington, DC
.details-list--light
Lighter headings
  • Year Founded 1982
  • Organization Type Advocacy
    Education
    Training
  • Location Washington, DC
Show Markup

<ul class="details-list [modifier class] row">
    <li class="details-list__item">
        <span class="details-list__header">Year Founded</span>
        1982
    </li>
    <li class="details-list__item">
        <span class="details-list__header">Organization Type</span>
        Advocacy <br>
        Education <br>
        Training
    </li>
    <li class="details-list__item">
        <span class="details-list__header">Location</span>
        Washington, DC
    </li>
</ul>

  1. Do you see what happens, Larry?
  2. Do you see what happens when you find a stranger in the alps?
  3. This is what happens, You see what happens Larry!
  4. This is what happens when you feed a stoner scrambled eggs!
Show Markup

<ol>
  <li>Do you see what happens, Larry?</li>
  <li>Do you see what happens when you find a stranger in the alps?</li>
  <li>This is what happens, You see what happens Larry!</li>
  <li>This is what happens when you feed a stoner scrambled eggs!</li>
</ol>

  • Do you see what happens, Larry?
  • Do you see what happens when you find a stranger in the alps?
  • This is what happens, You see what happens Larry!
  • This is what happens when you feed a stoner scrambled eggs!
Show Markup

<ul>
  <li>Do you see what happens, Larry?</li>
  <li>Do you see what happens when you find a stranger in the alps?</li>
  <li>This is what happens, You see what happens Larry!</li>
  <li>This is what happens when you feed a stoner scrambled eggs!</li>
</ul>