Simple 2 Column Description List

Description list HTML is commonly uses to implement a glossary or a list of terms and description pairs. Description lists can be quite complex and include many pairs and even nested items within the list.

A Simple 2-Column Layout

For our content creators, we’ve found the more common use case is a simple 2 column layout, rather than a data table which is overkill.

In Layout Builder, use the Flex List block using the default Variation.

In the instances when you aren’t in Layout Builder, edit the Source Code following the example below.

The addition of the div wrapper with the classes “utexas-flex-list” and “formatter-default” will make it styled like the default Flex List block and resemble a simple table.

<div class="utexas-flex-list formatter-default">
<dl>
<dt>
Fall Semester
</dt>
<dd>
List of required steps for the fall semester.
</dd>
<dt>
Spring Semester
</dt>
<dd>
List of required steps for the spring semester.
</dd>
</dl>
</div>