Details

The Details block displays a list of grouped terms with paired descriptions/values. Common uses for this block are to display meta-like content when key-value relationships are needed. A few example use cases include: glossaries, event details, building details, and people profiles.

Base example - Raven

Kingdom: Animalia Raven
Phylum: Chordata
Class: Aves
Order: Passeriformes
Family: Corvidae
Genus: Corvus

<section class="u-block u-block--white">
    <h2>Base example - Raven</h2>
    <div class="b-details">
        <div class="details__meta">
            <dl class="u-link">
                <dt>Kingdom</dt>
                <dd>Animalia Raven</dd>

                <dt>Phylum</dt>
                <dd>Chordata</dd>

                <dt>Class</dt>
                <dd>Aves</dd>

                <dt>Order</dt>
                <dd>Passeriformes</dd>

                <dt>Family</dt>
                <dd>Corvidae</dd>

                <dt>Genus</dt>
                <dd>Corvus</dd>

            </dl>
        </div>
    </div>
</section>

Figure variant

A common pattern for this block is to include a figure displaying an image or chart with an optional caption.

Kingdom: Animalia Raven
Phylum: Chordata
Class: Aves
Order: Passeriformes
Family: Corvidae
Genus: Corvus

<section class="u-block u-block--white">
    <h2>Figure variant</h2>
    <p>A common pattern for this block is to include a figure displaying an image or chart with an optional caption.</p>
    <div class="b-details b-details--figure">
        <div class="details__aside">
            <figure>
                <img src="http://cu-rds.s3.amazonaws.com/docs/assets/raven-profile.png" alt="Head of Common Raven">
                <figcaption>Common Raven<br>Species: Corvus corax</figcaption>
            </figure>
        </div>
        <div class="details__meta">
            <dl class="u-link">
                <dt>Kingdom</dt>
                <dd>Animalia Raven</dd>

                <dt>Phylum</dt>
                <dd>Chordata</dd>

                <dt>Class</dt>
                <dd>Aves</dd>

                <dt>Order</dt>
                <dd>Passeriformes</dd>

                <dt>Family</dt>
                <dd>Corvidae</dd>

                <dt>Genus</dt>
                <dd>Corvus</dd>

            </dl>
        </div>
    </div>
</section>

Event variant

Date: Monday, April 24th, 2073
Time: 08:00 AM - 10:30 AM
Location: A602 Loeb Building
Cost: Free
Registration: Not required
Contact: Jane Doe, 7373
More info: Event website

For events you can either use a feature image with the figure variant or use the event variant to highlight the event's date in the figure area.

<section class="u-block u-block--white">
    <h2>Event variant</h2>
    <div class="b-details b-details--event">
        <div class="details__aside">
            <figure>
                <figcaption>Aug<br>21</figcaption>
            </figure>
        </div>
        <div class="details__meta">
            <dl class="u-link">
                <dt>Date</dt>
                <dd>Monday, April 24th, 2073</dd>

                <dt>Time</dt>
                <dd>08:00 AM - 10:30 AM</dd>
                <dt>Location</dt>
                <dd>A602 <a href="link to building">Loeb Building</a></dd>

                <dt>Cost</dt>
                <dd>Free</dd>

                <dt>Registration</dt>
                <dd>Not required</dd>

                <dt>Contact</dt>
                <dd><a href="mailto:janed.doe@carleton.ca">Jane Doe</a>, 7373</dd>

                <dt>More info</dt>
                <dd><a href="link">Event website</a></dd>

            </dl>
    <a class="c-buttoncta u-icon" href=""><svg viewbox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path d="M0 18.658v5.143h5.143l13.714-13.714-5.143-5.143L0 18.658zm5.143 3.429H1.714v-3.429H3.43v1.715h1.714v1.714zM22.8 6.144l-2.229 2.229L15.43 3.23 17.657 1a1.707 1.707 0 0 1 2.417 0L22.8 3.727a1.707 1.707 0 0 1 0 2.417z"  /></svg>
Register Now</a>
    <a class="c-buttoncta c-buttoncta--ghost u-icon" href=""><svg viewbox="0 0 24 24"  xmlns="http://www.w3.org/2000/svg" aria-hidden="true"><path   d="M24 14H14v10h-4V14H0v-4h10V0h4v10h10z"/></svg>
Add to calendar</a>
        </div>
    </div>
</section>

Notes:

it is important to always list the event date in the details area as the right-side visual highlighting the day and month is for decorative purposes and disappears on small screens.
Two optional CTA buttons underneath the description list tag <dl> can be used on any variant of the Details block.

Past events

Warning: Past Event

Note, you are viewing an event that occurred back on Monday, April 24th, 2017.

Date: Monday, April 24th, 2017
Time: 08:00 AM - 10:30 AM
Location: A602 Loeb Building
Cost: Free
Registration: Not required
Contact: Jane Doe, x7373
More info: Event website

Past events

For events that have already occurred, consider checking if the event date is past the current date. If it is, add the modifier b-details--eventpast to the block and the markup below, which includes:

adding an alert component to inform the user they are looking at a past event.
replacing the date with "Past Event" in the figure area.
removing any Register or Add to Calendar buttons.

<section class="u-block u-block--white">
    <h2>Past events</h2>
        <div class="c-alert c-alert--warning c-alert--icon" role="alert">
            <svg aria-hidden="true" viewbox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><circle cx="12" cy="12" fill="#000" r="10"/><path d="M13.824 17.538H10V14.67h3.824zm0-4.301H10V5.07h3.824z" fill="#fff"/></g></svg>
            <h2>Warning: Past Event</h2>
            <p>Note, you are viewing an event that occurred back on Monday, April 24th, 2017.</p>
        </div>
    <div class="b-details b-details--event b-details--eventpast">
        <div class="details__aside">
            <figure>
                <figcaption>Past<br> Event!</figcaption>
            </figure>
        </div>
        <div class="details__meta">
            <dl class="u-link">
                <dt>Date</dt>
                <dd>Monday, April 24th, 2017</dd>

                <dt>Time</dt>
                <dd>08:00 AM - 10:30 AM</dd>
                <dt>Location</dt>
                <dd>A602 <a href="link to building">Loeb Building</a></dd>

                <dt>Cost</dt>
                <dd>Free</dd>

                <dt>Registration</dt>
                <dd>Not required</dd>

                <dt>Contact</dt>
                <dd><a href="mailto:janed.doe@carleton.ca">Jane Doe</a>, x7373</dd>

                <dt>More info</dt>
                <dd><a href="link">Event website</a></dd>

            </dl>
        </div>
    </div>
</section>

Profile example

Position

Director, Enterprise Application

Department

Information Technology Services (ITS)

Office

401L Robertson Hall

Phone

613-520-2600x8998

Reports to

Tim Lott, Chief Information Officer

Social

<section class="u-block u-block--white">
    <h2>Profile example</h2>
    <div class="b-details b-details--figure">
        <div class="details__aside">
            <figure>
                <img src="https://i.carleton.ca/wp-content/uploads/2016/10/danny-brown-1-1-300x300.jpg" alt="Headshot of Danny Brown">
                <figcaption>Danny Brown<br>Director, Enterprise Applications</figcaption>
            </figure>
        </div>
        <div class="details__meta">
            <dl class="u-link">
                <dt>Position</dt>
                <dd>Director, Enterprise Application</dd>

                <dt>Department</dt>
                <dd>Information Technology Services (ITS)</dd>

                <dt>Office</dt>
                <dd>401L <a href="#">Robertson Hall</a></dd>

                <dt>Phone</dt>
                <dd>613-520-2600x8998</dd>

                <dt>Reports to</dt>
                <dd><a href="#">Tim Lott</a>, Chief Information Officer</dd>

                <dt>Social</dt>
                <dd><ul class="c-buttonsocialgroup">
					<li><a class="c-buttonsocial c-buttonsocial--instagram u-icon u-icon--circle" href="https://www.instagram.com/carleton_u"><svg aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M22.29 5.343a.922.922 0 0 1-.922.92h-2.762a.921.921 0 0 1-.921-.92V2.579a.92.92 0 0 1 .92-.92h2.763c.51 0 .922.412.922.92v2.764zm-.184 15.735c0 .568-.458 1.028-1.024 1.028h-18.4c-.566 0-1.024-.46-1.024-1.028V9.764h2.315a8.27 8.27 0 0 0-.269 2.057c0 4.545 3.662 8.229 8.178 8.229 4.517 0 8.178-3.684 8.178-8.229 0-.71-.1-1.399-.268-2.057h2.314v11.314zM12.066 5.527a6.539 6.539 0 1 1 0 13.079 6.54 6.54 0 0 1 0-13.08zM21.186 0H2.763A2.763 2.763 0 0 0 0 2.763v18.421a2.763 2.763 0 0 0 2.763 2.764h18.422a2.763 2.763 0 0 0 2.763-2.764V2.764A2.762 2.762 0 0 0 21.185 0z"></path></svg>
<span class="u-visually-hidden">Follow us on Instagram</span></a></li>

                    <li><a class="c-buttonsocial c-buttonsocial--twitter u-icon u-icon--circle" href="https://twitter.com/@Carleton_U"><svg aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M2.66 14.347a4.64 4.64 0 0 0 2.21-.093c-2.237-.49-3.917-2.646-3.917-5.24v-.066a4.586 4.586 0 0 0 2.209.662C1.852 8.657.992 7.017.992 5.165c0-.979.239-1.892.662-2.686C4.061 5.707 7.66 7.837 11.722 8.063a6.042 6.042 0 0 1-.12-1.218c0-2.95 2.184-5.345 4.883-5.345 1.402 0 2.672.648 3.559 1.693a9.23 9.23 0 0 0 3.109-1.296c-.37 1.244-1.138 2.289-2.144 2.95A9.06 9.06 0 0 0 23.814 4a10.308 10.308 0 0 1-2.447 2.779l.013.688c0 7.065-4.908 15.201-13.892 15.201-2.765 0-5.332-.886-7.488-2.394.37.04.767.066 1.164.066 2.289 0 4.393-.847 6.06-2.29-2.13-.039-3.943-1.587-4.565-3.703z"></path></svg>
<span class="u-visually-hidden">Follow us on Twitter</span></a></li>

                    <li><a class="c-buttonsocial c-buttonsocial--linkedin u-icon u-icon--circle" href="https://www.linkedin.com/school/carleton-university"><svg aria-hidden="true" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M5.407 23.512H.302V8.154h5.105v15.358zM8.23 8.154h5.105v2.176c.678-1.046 1.89-2.537 4.6-2.537 3.36 0 5.878 2.196 5.878 6.913v8.807H18.71v-8.218c0-2.064-.739-3.472-2.586-3.472-1.41 0-2.25.95-2.62 1.867-.134.328-.167.786-.167 1.245v8.577H8.232s.067-13.917 0-15.358zM2.888.75c1.746 0 2.82 1.147 2.854 2.653 0 1.474-1.108 2.655-2.887 2.655H2.82C1.108 6.058 0 4.878 0 3.403 0 1.897 1.141.75 2.888.75z"></path></svg>
<span class="u-visually-hidden">View us on Linkedin</span></a></li>

</ul></dd>

            </dl>
        </div>
    </div>
</section>

Block details

Details block meta	values
handle	`details`
colour options	`u-block--white`,`u-block--grey`
section use	`<main>`, `<aside>`
width type	fixed
has heading	true
theme(s)	CU
variants	figure, event, eventpast
Codepen	coming soon

Content guidelines

tbd

When To Avoid

Don't use this block to replace default content ordered and unordered lists.

Dates and Times

Date and time format should always be CCYY-MM-DDThh:mm:ss as per W3C

References

https://jasonneel.com/journal/using-html-description-lists

Raven Design System

Details Block

Base example - Raven

Figure variant

Event variant

Past events

Warning: Past Event

Past events

Profile example

Block details

Content guidelines

When To Avoid

Dates and Times

References