The HTML element <dl>, initially referred to as a definition list and now called a description list (per MDN), is rarely used, especially in the WordPress space, because there isn’t a native way to use it. I try to use it as often as possible when using terms and definitions instead of a bulleted list or a table (ugh). I recently ran across a list where they had a table, then they opted to build it with <div>, and I realized it would be perfect for the element. As I mentioned, there isn’t a native way, but you can use the custom HTML element. Then, after setting it up, I wanted to style it.
Here is the original definition list:
<dl title="term listing">
<dt>Smartphone</dt><dd> Connects to the Fiber Optic Cleaning Checklist and Digital Education Module</dd>
<dt>Active Fiber Detector</dt><dd> Detects optical power in existing fiber installations to ensure user safety</dd>
<dt>Visual Fault Indicator</dt><dd> Light source that identifies opposite ends of installed fibers</dd>
<dt>Laser-Safe Glasses</dt><dd> Prevent eye damage from lasers used in fiber transmission equipment</dd>
<dt>Fiber Microscope</dt><dd> Examines end surfaces of fiber cables disconnected from light sources</dd>
<dt>Fiber Cleaning Kit </dt><dd>Cleans end surfaces of fiber cables being prepared for mating</dd>
<dt>Dust Caps </dt><dd>Cover delicate end surfaces of fibers to prevent/reduce damage and residue</dd>
<dt>Dust Cap Container </dt><dd>Clean storage container for dust caps</dd>
<dt>Patch Cords </dt><dd>Jumper between equipment transceivers and fiber patching field cassette ports</dd>
<dt>Cable Labeler and Media </dt><dd>For printing cable labels to be installed on each end of the patch cord</dd>
<dt>Patch Cord Labels </dt><dd>Indicate what equipment is attached to what patching field location</dd>
</dl>The output in basic HTML:
- Smartphone
- Connects to the Fiber Optic Cleaning Checklist and Digital Education Module
- Active Fiber Detector
- Detects optical power in existing fiber installations to ensure user safety
- Visual Fault Indicator
- Light source that identifies opposite ends of installed fibers
- Laser-Safe Glasses
- Prevent eye damage from lasers used in fiber transmission equipment
- Fiber Microscope
- Examines end surfaces of fiber cables disconnected from light sources
- Fiber Cleaning Kit
- Cleans end surfaces of fiber cables being prepared for mating
- Dust Caps
- Cover delicate end surfaces of fibers to prevent/reduce damage and residue
- Dust Cap Container
- Clean storage container for dust caps
- Patch Cords
- Jumper between equipment transceivers and fiber patching field cassette ports
- Cable Labeler and Media
- For printing cable labels to be installed on each end of the patch cord
- Patch Cord Labels
- Indicate what equipment is attached to what patching field location
Styling the DL
I decided to try using CSS Grid and then thought a hover effect would be nice. I am pretty pleased with the results. There are so many ways this could be styled, so use your imagination.
- Smartphone
- Connects to the Fiber Optic Cleaning Checklist and Digital Education Module
- Active Fiber Detector
- Detects optical power in existing fiber installations to ensure user safety
- Visual Fault Indicator
- Light source that identifies opposite ends of installed fibers
- Laser-Safe Glasses
- Prevent eye damage from lasers used in fiber transmission equipment
- Fiber Microscope
- Examines end surfaces of fiber cables disconnected from light sources
- Fiber Cleaning Kit
- Cleans end surfaces of fiber cables being prepared for mating
- Dust Caps
- Cover delicate end surfaces of fibers to prevent/reduce damage and residue
- Dust Cap Container
- Clean storage container for dust caps
- Patch Cords
- Jumper between equipment transceivers and fiber patching field cassette ports
- Cable Labeler and Media
- For printing cable labels to be installed on each end of the patch cord
- Patch Cord Labels
- Indicate what equipment is attached to what patching field location
Here is the CSS
%root% {
--color: #fff;
--cursor: pointer;
--display: grid;
--display-2: block;
--gap: 0;
--grid-template-columns: auto auto;
--padding: .5em 1em;
}
%root% dl {
display: var(--display);
grid-template-columns: var(--grid-template-columns);
gap: var(--gap);
transition: var(--transition);
}
%root% dt {
padding: var(--padding);
display: var(--display-2);
background-color: var(--primary-dark);
color: var(--color);
transition: var(--transition);
}
%root% dd {
padding: var(--padding);
display: var(--display-2);
background-color: var(--primary-ultra-light);
color: var(--black);
transition: var(--transition);
}
%root% dt:hover,
%root% dt:hover+dd {
background-color: var(--primary-light);
color: var(--black);
cursor: var(--cursor);
}
