Description List
DescriptionList is a component for listing pairs of information together. You can use the component on its own, passing in an object for the list, or use the EuiDescriptionListTitle and EuiDescriptionListDescriptioncomponents separately to build a list manually.
- The Elder Scrolls: Morrowind
- The opening music alone evokes such strong memories.
- TIE Fighter
- The sequel to XWING, join the dark side and fly for the Emporer.
- Quake 2
- The game that made me drop out of college.
- Dota 2
- A videogame that I have spent way too much time on over the years.
- Kings Quest VI
- The game that forced me to learn DOS.
Reverse style
Setting the textStyle prop to reverse will reverse the text styles of the title and description elements so that the description is more prominent. This works best for key/value type content.
Adding this property to the inline type will not change anything.
- Name
- The Elder Scrolls: Morrowind
- Game style
- Open-world, fantasy, action role-playing
- Release date
- 2002
As columns
Using the prop type set to column description lists can be presented in an inline, column format.
To return to the typical row format on smaller screens set type to responsiveColumn.
- The Elder Scrolls: Morrowind
- The opening music alone evokes such strong memories.
- TIE Fighter
- The sequel to XWING, join the dark side and fly for the Emporer.
- Quake 2
- The game that made me drop out of college.
The following list will become the typical row format on small screens
- The Elder Scrolls: Morrowind
- The opening music alone evokes such strong memories.
- TIE Fighter
- The sequel to XWING, join the dark side and fly for the Emporer.
- Quake 2
- The game that made me drop out of college.
Inline
Using a prop type set to inline description lists can be presented in an inline, blob format. This is useful for JSON code blocks. Inline description lists are sized smaller than normal lists due to their compact nature.
- The Elder Scrolls: Morrowind
- The opening music alone evokes such strong memories.
- TIE Fighter
- The sequel to XWING, join the dark side and fly for the Emporer.
- Quake 2
- The game that made me drop out of college.
Centered and compressed
Using the align and compressed props you can further tailor the look of a description list. This works with column and inline types.
- The Elder Scrolls: Morrowind
- The opening music alone evokes such strong memories.
- TIE Fighter
- The sequel to XWING, join the dark side and fly for the Emporer.
- Quake 2
- The game that made me drop out of college.
- The Elder Scrolls: Morrowind
- The opening music alone evokes such strong memories.
- TIE Fighter
- The sequel to XWING, join the dark side and fly for the Emporer.
- Quake 2
- The game that made me drop out of college.
- The Elder Scrolls: Morrowind
- The opening music alone evokes such strong memories.
- TIE Fighter
- The sequel to XWING, join the dark side and fly for the Emporer.
- Quake 2
- The game that made me drop out of college.
Passing className
When using the listItems prop to pass an object of items and you need to also add classNames (or other available props) to the individual pieces, you can use the titleProps and descriptionProps to do so.
- The Elder Scrolls: Morrowind
- The opening music alone evokes such strong memories.
- TIE Fighter
- The sequel to XWING, join the dark side and fly for the Emporer.
- Quake 2
- The game that made me drop out of college.