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
<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">—</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
<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>
- 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!
<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!
<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>