Lists
- Ordered and Unordered Lists
- Other List Layouts using Ordered & Unordered Lists
- Definition Lists
- Details/Summary
Ordered & Unordered Lists
Unordered Lists ul
Disc (Default)
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
Circle .list-circle
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
Decimal (Default)
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
Decimal Leading Zero ol.decimal-leading-zero
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
Lower Alpha ol.lower-alpha
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
Upper Alpha ol.upper-alpha
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
Lower Roman ol.lower-roman
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
Upper Roman ol.upper-roman
- Lorem ipsum dolor sit amet.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
- Nunc dignissim risus id metus.
- Cras ornare tristique elit.
Inline Lists ul.list-inline
Inline lists display list items in a row, rather than on separate rows. It is useful in cases where you may have a list of links which all have relatively short labels.
NOTE: while it will behave similarly, ol.list-inline should not be used.
Inline List with Separator ul.list-inline.list-inline-separator
Inline lists with separators add a bar character | between each item in the list.
Columns
Ordered and Unordered lists can also be displayed in two or three columns.
Two-Column List .two-column
- key chain
- radio
- television
- credit card
- mop
- wallet
- hair tie
- stop sign
- bananas
- beef
Three-Column List .three-column
- checkbook
- chocolate
- bananas
- hair tie
- lace
- wallet
- camera
- leg warmers
- shoes
- truck
- cell phone
- money
- keys
- bowl
- washing machine
On narrow displays, you can have a three-column list reduce to two columns by adding .two-column-narrow to a list which already has .three-column.
- headphones
- door
- mop
- tooth picks
- shawl
- pen
- rubber duck
- computer
- mouse pad
- mp3 player
- bread
- cinder block
- perfume
- soap
- deodorant
Definition Lists dl
Definition lists work well for glossaries or similar use cases. They display the term dt followed, on the following line, by the definition dd, which is indented.
- Credits
- College courses are measured in terms of credit hours, which usually equate to how many hours a student spends in class each week. Hint: Students need to earn 15+ credits each Fall & Spring semester to graduate in 4 years with 120+ total credits.
- College
- "College" is often used interchangeably with "university" and "school." Separately, "college" can refer to an academic division of a university, such as College of Education.
- Department
- A division of the college, made up of faculty and support staff, that gives instruction in a particular field of study.
- Graduate School
- The division of a college or university which administers graduate studies and awards master's degrees and graduate certificates.
- Electives
- Courses that students can choose to take for credit toward a degree, but are not required.
Horizontal Definition List dl.dl-horizontal
Horizontal definition lists display the term at the same level as the definition, resulting in two columns.
- Credits
- College courses are measured in terms of credit hours, which usually equate to how many hours a student spends in class each week. Hint: Students need to earn 15+ credits each Fall & Spring semester to graduate in 4 years with 120+ total credits.
- College
- "College" is often used interchangeably with "university" and "school." Separately, "college" can refer to an academic division of a university, such as College of Education.
- Department
- A division of the college, made up of faculty and support staff, that gives instruction in a particular field of study.
- Graduate School
- The division of a college or university which administers graduate studies and awards master's degrees and graduate certificates.
- Electives
- Courses that students can choose to take for credit toward a degree, but are not required.
Details/Summary details > summary
The HTML Details Element (<details>) creates a disclosure widget in which information is visible only when the widget is toggled into an "open" state. A summary or label can be provided using the <summary> element.
On SUU.edu, the widget is presented in the style of a link with a FontAwesome character next to it. When activated, the widget expands to display the its contents and the is replaced with a .
Note: Do not nest details/summary blocks, e.g. details > details > summary
This is the <summary>.
The remaining contents of the <details> tag can be any flow content, such as paragraphs, lists, images, etc.
<details>
<summary>This is the <code><summary></code>.</summary>
<p>The remaining contents of the <code><details></code> tag can be any flow content, such as paragraphs, lists, images, etc.</p>
</details>