Patterns gallery
This page showcases a selection of patterns from UW Theme 2.0. Think of it as kitchen sink of elements to learn what’s what’s possible in the block editor when combining WordPress blocks to create rich content layouts. More patterns can be found in the editor.
Make your message bold and unforgettable
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Make your message bold and unforgettable
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Two-column layout with links
Visit WordPress.org documentation for guidance on adding anchor links in the right-hand sidebar that let users jump to specific sections of the page. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
3-column text with linked headers
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.
My small header that is also a link
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi. Lorem ipsum dolor sit amet consectetur adipiscing elit.
My small header that is also a link
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.
My small header that is also a link
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.
My small header that is also a link
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.
My small header that is also a link
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.
My small header that is also a link sometimes runs longer
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi.
Helpful resources, links, and important information
Praesent dapibus neque id cursus faucibus tortor neque egestas auguae eu vulputate magna eros eu erat. Aliquam erat volutpat.
Optional label
Featured content heading
Praesent dapibus neque id cursus faucibus tortor neque egestas auguae eu vulputate magna eros eu erat. Aliquam erat volutpat.
Optional label
Featured content heading
Praesent dapibus neque id cursus faucibus tortor neque egestas auguae eu vulputate magna eros eu erat. Aliquam erat volutpat.
Make your message bold, concise, and unforgettable
Group of buttons
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Make your message bold, concise, and unforgettable
Group of links, 3-column, wide
Group of links with image
Frequently asked questions
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
- First list item
- Second list item
- Third list item
Tempus leo eu aenean sed diam urna tempor. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
- First list item
- Second list item
- Third list item
Tempus leo eu aenean sed diam urna tempor. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
- First list item
- Second list item
- Third list item
Tempus leo eu aenean sed diam urna tempor. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
- First list item
- Second list item
- Third list item
Tempus leo eu aenean sed diam urna tempor. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
- First list item
- Second list item
- Third list item
Tempus leo eu aenean sed diam urna tempor. Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis.
- First list item
- Second list item
- Third list item
Tempus leo eu aenean sed diam urna tempor. Lorem ipsum dolor sit amet
Make your message bold, concise, and unforgettable
Write a message that is is relevant to the context of the content of the page, providing a clear idea of what information is expected.
Featured content text-only cards
Optional Label
Featured content heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Optional Label
Featured content heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Optional label
Featured content heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Optional Label
Featured content heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Optional Label
Featured content heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Optional label
Featured content heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Featured content cards
optional label
Featured content heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
optional label
Featured content heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
optional label
Featured content heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.
Full-width alternating content rows
Featured story heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Featured story heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Featured story heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Learn more about a specific topic
Mollit anim id est laborum. Nam nec ligula vel purus suscipit aliquam. Suspendisse potenti. Aenean a nulla non elit convallis malesuada. Praesent a libero et velit sollicitudin tincidunt ut eget erat.
Featured content heading
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
Featured content heading
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
Featured content heading
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
Featured content heading
Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat. In id cursus mi pretium tellus duis convallis. Tempus leo eu aenean sed diam urna tempor. Lorem ipsum dolor sit amet consectetur adipiscing elit. Quisque faucibus ex sapien vitae pellentesque sem placerat.
Find what you were looking for?
Morbi in sem quis dui placerat ornare. Pellentesque odio nisi euismod in pharetra a ultricies in diam.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Make your message bold
Write a message that is is relevant to the context of the content of the page, providing a clear idea of what information is expected. Use simple, concise language that mimics the tone and style of the content, helping users visualize the intended message.
Our story
Use this section to introduce your department or group in a way that helps visitors understand your background, purpose, and the people behind your work. A strong story provides context for how your unit came to be, what makes your work meaningful, and how you contribute to the UW–Madison community.
You can enrich this section with a small grid of images that visually express who you are. For example, photos of your team, your work in action, or spaces and moments that represent your mission.
Aim for a tone that feels welcoming and informative, focusing on what makes your group unique. The goal is to give visitors a sense of connection.
Featured story heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Featured story heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Featured story heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Mission, vision, or statement
Use this area for messages that provide grounding and context for your work, such as a mission-oriented reflection, statement of values, or acknowledgement that helps visitors understand what guides your department and how you think.
Choose a background image that isn’t distracting, like simple textures, soft-focus scenes, or subtle architectural details that keep the focus on your message. Keep text contrast high by maintaining strong background opacity so your content remains readable and accessible.
Static news and events list with featured image
Optional label
Story or event headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Optional label
Story or event headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Optional label
Story or event headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Optional label
Story or event headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Optional label
Story or event headline
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Make your message bold and concise
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Make your message bold, concise, and unforgettable
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Make your message bold
Write a message that is is relevant to the context of the content of the page, providing a clear idea of what information is expected. Use simple, concise language that mimics the tone and style of the content, helping users visualize the intended message.
What the numbers say
Use these cards to feature important statistics that show your group’s value and mission. If you choose fewer than four columns, increase the card padding to Medium or Large to keep text at a comfortable line length. Avoid using more than four columns. Simple layouts are easier to read.
#1
Add your number explainer text here. These cards are equal height.
2,500+
Keep your explainer text short and to the point. This is more like a label.
$45M
Adjust the number of columns in the Grid block settings.
150+
Duplicate or delete cards to customize your layout.
Include an optional link to your data source here.
Make your message bold, concise, and unforgettable
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Make your message bold, concise, and unforgettable
Make your message bold, concise, and unforgettable
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Make your message bold, concise, and unforgettable
Statistics
#1
Big number explainer text
#2
Big number explainer text
#3
Big number explainer text
Make your message bold, concise, and unforgettable
Write a message that is is relevant to the context of the content of the page, providing a clear idea of what information is expected. Use simple, concise language that mimics the tone and style of the content.
Extra large story heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Extra large story heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Extra large story heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Featured Post patterns
Brilliant fall colors transform campus
From the bright reds of Bascom Hill maples to the golden oaks along Lakeshore Path, campus comes alive each autumn. Students and visitors alike pause to take in the season’s vivid display.
Post list without featured images
-
Brilliant fall colors transform campus
From the bright reds of Bascom Hill maples to the golden oaks along Lakeshore Path, campus comes alive each autumn. Students and visitors alike pause to take in the season’s vivid display.
-
Plastic flamingos flock to Bascom Hill
Each September, hundreds of pink flamingos cover Bascom Hill in a beloved campus tradition. What began as a student prank in 1979 has become one of UW–Madison’s quirkiest annual events.
-
Chemistry comes alive in the classroom
From colorful reactions to dramatic demonstrations, UW–Madison chemistry classes keep students engaged. Lively experiments spark curiosity and make complex science easier to see in action.
Post list with featured images
-
Brilliant fall colors transform campus
From the bright reds of Bascom Hill maples to the golden oaks along Lakeshore Path, campus comes alive each autumn. Students and visitors alike pause to take in the season’s vivid display.
-
Plastic flamingos flock to Bascom Hill
Each September, hundreds of pink flamingos cover Bascom Hill in a beloved campus tradition. What began as a student prank in 1979 has become one of UW–Madison’s quirkiest annual events.
-
Chemistry comes alive in the classroom
From colorful reactions to dramatic demonstrations, UW–Madison chemistry classes keep students engaged. Lively experiments spark curiosity and make complex science easier to see in action.
Call to action pre-footer
Praesent dapibus neque id cursus faucibus tortor neque egestas auguae eu vulputate magna eros eu erat. Aliquam erat volutpat.