...
| Expand | ||||
|---|---|---|---|---|
| ||||
|
Design
Use When
- Displaying details about 2-5 categories on a webpage
- You need to display more information than will fit in individual cards
- Adding specific details to a program subpage (e.g. Adding applied learning details to a Curriculum page)
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<div class="row"> <div class="col-12 col-lg-7 pe-lg-5"> ADD CONTENT </div> <div class="col-12 col-lg-5 mt-4 mt-lg-0"> ADD CONTENT </div> </div> |
2 Columns - 50% / 50%
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<div class="row">
<div class="col-12 col-lg-6 pe-lg-4">
ADD CONTENT
</div>
<div class="col-12 col-lg-6 ps-lg-4">
ADD CONTENT
</div>
</div> |
3 Columns
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<div class="row gx-5"> <div class="col-12 col-lg-4"> ADD CONTENT </div> <div class="col-12 col-lg-4"> ADD CONTENT </div> <div class="col-12 col-lg-4"> ADD CONTENT </div> </div> |
...
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<div class="image mt-4 mt-lg-0 "> <img src="https://update-wisc-business.pantheonsite.io/wp-content/uploads/2026/05/RequirED_masthead_2400_1600-512x341.avif" alt="Professor Milt Hwang speaks to a group of students about AI during his class" width="300" height="200" class="aligncenter brand-border-radius size-medium wp-image-166081" /> </div> |
...
Testimonial/pullquote
- Use "wsb-pullquote" class on a figure element
- Copy a one of the code snippet snippets below and add your content
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
<figure class="wsb-pullquote text-center col-lg-9 mx-auto my-4"> <blockquote>"ADD QUOTE"</blockquote> <figcaption> <p class="author">ADD NAME</p> <p>ADD TITLE AND COMPANY</p> </figcaption> </figure> |
| Code Block | ||||||
|---|---|---|---|---|---|---|
| ||||||
ADD HEADSHOT CODE HERE <figure class="wsb-pullquote text-center col-lg-9 mx-auto my-4"> <blockquote>"ADD QUOTE"</blockquote> <figcaption> <p class="author">ADD NAME</p> <p>ADD TITLE AND COMPANY</p> </figcaption> </figure> |
...