Definition Lists Aka Definitions

Definition lists are key/value pairs of a definition term and it's corresponding value.

Default

Definition List default.

username

jonathanrahemer@gmail.com

phone

(555) 555-5555

Language

English (US)

Birthdate

22/22/2222

System ID

123124124

External ID

123124124653452

Address

1060 W Addison St,

Chicago, IL 60613

HTML

<div class="t-content">
    <div class="c-definitions">
        <div class="c-definition">
            <div class="c-definition-term">username</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">email</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">phone</div>
            <div class="c-definition-value">(555) 555-5555</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Language</div>
            <div class="c-definition-value">English (US)</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Birthdate</div>
            <div class="c-definition-value">22/22/2222</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">System ID</div>
            <div class="c-definition-value">123124124</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">External ID</div>
            <div class="c-definition-value">123124124653452</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Address</div>
            <div class="c-definition-value">1060 W Addison St,</div>
            <div class="c-definition-value">Chicago, IL 60613</div>
        </div>
    </div>
</div>

Title

Definitions with a title.

User Information

username

jonathanrahemer@gmail.com

phone

(555) 555-5555

Language

English (US)

Birthdate

22/22/2222

Additional

System ID

123124124

External ID

123124124653452

Address

1060 W Addison St,

Chicago, IL 60613

HTML

<div class="t-content">
    <div class="c-definitions">
        <div class="c-definition-title">User Information</div>
        <div class="c-definition">
            <div class="c-definition-term">username</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">email</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">phone</div>
            <div class="c-definition-value">(555) 555-5555</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Language</div>
            <div class="c-definition-value">English (US)</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Birthdate</div>
            <div class="c-definition-value">22/22/2222</div>
        </div>

        <div class="c-definition-title u-mt++">Additional</div>
        <div class="c-definition">
            <div class="c-definition-term">System ID</div>
            <div class="c-definition-value">123124124</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">External ID</div>
            <div class="c-definition-value">123124124653452</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Address</div>
            <div class="c-definition-value">1060 W Addison St,</div>
            <div class="c-definition-value">Chicago, IL 60613</div>
        </div>
    </div>
</div>

Grouped

Definitions that are grouped together.

username

jonathanrahemer@gmail.com

phone

(555) 555-5555

Language

English (US)

User Details

username

jonathanrahemer@gmail.com

phone

(555) 555-5555

Language

English (US)

HTML

<div class="t-content">
    <div class="c-definitions c-definitions--grouped">
        <div class="c-definition">
            <div class="c-definition-term">username</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">email</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">phone</div>
            <div class="c-definition-value">(555) 555-5555</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Language</div>
            <div class="c-definition-value">English (US)</div>
        </div>
    </div>

    <br>

    <div class="c-definitions c-definitions--grouped">
        <div class="c-definition-title">User Details</div>
        <div class="c-definition">
            <div class="c-definition-term">username</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">email</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">phone</div>
            <div class="c-definition-value">(555) 555-5555</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Language</div>
            <div class="c-definition-value">English (US)</div>
        </div>
    </div>
</div>

Two Labels

Definitions that have two labels and one value.

username

jonathanrahemer@gmail.com

personal

jonathanrahemer@gmail.com

phone

home

mobile

(555) 555-5555

(1) 111-111-1111

Language

English (US)

User Details

username

jonathanrahemer@gmail.com

personal

jonathanrahemer@gmail.com

phone

home

mobile

(555) 555-5555

(1) 111-111-1111

Language

English (US)

HTML

<div class="t-content">
    <div class="c-definitions">
        <div class="c-definition">
            <div class="c-definition-term">username</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition c-definition--twoLabels">
            <div class="c-definition-term">email</div>
            <div class="c-definition-term">personal</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition c-definition--twoLabels">
            <div class="c-definition-term">phone</div>
            <div class="c-definition-term">
                <div class="c-definition-multipleItem">home</div>
                <div class="c-definition-multipleItem">mobile</div>
            </div>
            <div class="c-definition-value">
                <div class="c-definition-multipleItem">(555) 555-5555</div>
                <div class="c-definition-multipleItem">(1) 111-111-1111</div>
            </div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Language</div>
            <div class="c-definition-value">English (US)</div>
        </div>
    </div>

    <br>

    <div class="c-definitions c-definitions--grouped">
        <div class="c-definition-title">User Details</div>
        <div class="c-definition">
            <div class="c-definition-term">username</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition c-definition--twoLabels">
            <div class="c-definition-term">email</div>
            <div class="c-definition-term">personal</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition c-definition--twoLabels">
            <div class="c-definition-term">phone</div>
            <div class="c-definition-term">
                <div class="c-definition-multipleItem">home</div>
                <div class="c-definition-multipleItem">mobile</div>
            </div>
            <div class="c-definition-value">
                <div class="c-definition-multipleItem">(555) 555-5555</div>
                <div class="c-definition-multipleItem">(1) 111-111-1111</div>
            </div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Language</div>
            <div class="c-definition-value">English (US)</div>
        </div>
    </div>
</div>

Two column definition list

The definitions will display in two columns on wide displays (85em or 1360px @ 16px font-size)

username

jonathanrahemer@gmail.com

phone

(555) 555-5555

Language

English (US)

Birthdate

22/22/2222

System ID

123124124

External ID

123124124653452

Address

1060 W Addison St, Chicago, IL 60613

HTML

<div class="t-content">
    <div class="c-definitions c-definitions--twoColumns">
        <div class="c-definition">
            <div class="c-definition-term">username</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">email</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">phone</div>
            <div class="c-definition-value">(555) 555-5555</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Language</div>
            <div class="c-definition-value">English (US)</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Birthdate</div>
            <div class="c-definition-value">22/22/2222</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">System ID</div>
            <div class="c-definition-value">123124124</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">External ID</div>
            <div class="c-definition-value">123124124653452</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Address</div>
            <div class="c-definition-value">1060 W Addison St, Chicago, IL 60613</div>
        </div>
    </div>
</div>

Align Values

The values will use right alignment

username

jonathanrahemer@gmail.com

phone

(555) 555-5555

Language

English (US)

Birthdate

22/22/2222

System ID

123124124

External ID

123124124653452

Address

1060 W Addison St,

Chicago, IL 60613

HTML

<div class="t-content">
    <div class="c-definitions c-definitions--alignValues">
        <div class="c-definition">
            <div class="c-definition-term">username</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">email</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">phone</div>
            <div class="c-definition-value">(555) 555-5555</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Language</div>
            <div class="c-definition-value">English (US)</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Birthdate</div>
            <div class="c-definition-value">22/22/2222</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">System ID</div>
            <div class="c-definition-value">123124124</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">External ID</div>
            <div class="c-definition-value">123124124653452</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Address</div>
            <div class="c-definition-value">1060 W Addison St,</div>
            <div class="c-definition-value">Chicago, IL 60613</div>
        </div>
    </div>
</div>

Align Value Content

The values will be vertically aligned within their container

jonathanrahemer@gmail.com

attributes

Shipping Address

Home Address

phone number label that is long and should demonstrate wrapping and normal placement of value

(555) 555-5555

phone number label that is long and should demonstrate wrapping and vertically aligned placement of value

(555) 555-5555

HTML

<div class="t-content">
    <div class="c-definitions">
        <div class="c-definition">
            <div class="c-definition-term">email</div>
            <div class="c-definition-value">jonathanrahemer@gmail.com</div>
        </div>
        <div class="c-definition c-definition--alignValueContent">
            <div class="c-definition-term">attributes</div>
            <div class="c-definition-value">
                <inv-icon glyph="'address_shipping'" class="c-attributeIcon u-mr+"
                          title="Shipping Address"></inv-icon>
                        <span class="u-ml+">Shipping Address</span>
            </div>
            <div class="c-definition-value">
                <inv-icon glyph="'address_home'" class="c-attributeIcon u-mr+"
                          title="Home Address"></inv-icon>
                        <span class="u-ml+">Home Address</span>
            </div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">phone number label that is long and should demonstrate wrapping and normal placement of value</div>
            <div class="c-definition-value">(555) 555-5555</div>
        </div>
        <div class="c-definition c-definition--alignValueContent">
            <div class="c-definition-term">phone number label that is long and should demonstrate wrapping and vertically aligned placement of value</div>
            <div class="c-definition-value">(555) 555-5555</div>
        </div>
    </div>
</div>

Label Wrap

This is showing an example of a single line definition label/value pair with a long label. The label will break to the second line by default. No additional CSS classes needed.

username in long format

jonathanrahemer@gmail.com

email in long format

jonathanrahemer@gmail.com

Name

Jonathan Rahemer

Accepted Terms & Conditions

06/17/2016

HTML

<div class="t-content">
    <div class="u-flex">
        <div class="c-definitions u-sizeFull u-wide-sm-size1of2">
            <div class="c-definition">
                <div class="c-definition-term">username in long format</div>
                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
            </div>
            <div class="c-definition">
                <div class="c-definition-term">email in long format</div>
                <div class="c-definition-value">jonathanrahemer@gmail.com</div>
            </div>
        </div>
        <div class="c-definitions u-sizeFull u-wide-sm-size1of2">
            <div class="c-definition">
                <div class="c-definition-term">Name</div>
                <div class="c-definition-value">Jonathan Rahemer</div>
            </div>
            <div class="c-definition">
                <div class="c-definition-term">Accepted Terms & Conditions</div>
                <div class="c-definition-value">06/17/2016</div>
            </div>
        </div>
    </div>
</div>

Long

Long definition variation for when definition values are many words, or even a paragraph in length.

Security Question

What is your quest?

Answer

To find the holy grail.

HTML

<div class="t-content">
    <div class="c-definitions c-definitions--long">
        <div class="c-definition">
            <div class="c-definition-term">Security Question</div>
            <div class="c-definition-value">What is your quest?</div>
        </div>
        <div class="c-definition">
            <div class="c-definition-term">Answer</div>
            <div class="c-definition-value">To find the holy grail.</div>
        </div>
    </div>
</div>

Empty

Empty definition variation for when an empty state is needed in a definition list.

There is no information to display here.

HTML

<div class="t-content">
    <div class="c-definitions">
        <div class="c-definition is-empty">
            There is no information to display here.
        </div>
    </div>
</div>

Wrap Values

Allows the values to wrap instead of having overflow set to hidden and an ellipses added.

Long Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a placerat nisi. Pellentesque nec consectetur ante. Nam venenatis hendrerit leo, quis pulvinar augue mattis ac. Nullam pharetra sollicitudin tellus, non volutpat turpis imperdiet non. Suspendisse.

Non Variant Long Text

HTML

<div class="t-content">
        <div class="c-definitions c-definitions--wrapValues">
            <div class="c-definition">
                <div class="c-definition-term">Long Text</div>
                <div class="c-definition-value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a placerat nisi. Pellentesque nec consectetur ante. Nam venenatis hendrerit leo, quis pulvinar augue mattis ac. Nullam pharetra sollicitudin tellus, non volutpat turpis imperdiet non. Suspendisse.</div>
            </div>
        </div>
        <div class="c-definitions">
            <div class="c-definition">
                <div class="c-definition-term">Non Variant Long Text</div>
                <div class="c-definition-value">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum a placerat nisi. Pellentesque nec consectetur ante. Nam venenatis hendrerit leo, quis pulvinar augue mattis ac. Nullam pharetra sollicitudin tellus, non volutpat turpis imperdiet non. Suspendisse.</div>
            </div>
        </div>
    </div>