Examples
Sample Layouts & Components
The Notre Dame Web Theme is not intended to be prescriptive related to layouts. Every website has different audiences and content types, and web designers have flexibility to address those needs.
The following are examples of commonly repeated layouts. They are intended to give designers and developers an idea of how certain types of pages and elements might be displayed within the Web Theme.
Home & Default Pages
-
Default Home Page
Default home page with news & events
-
Full-Bleed Hero
Page with full-bleed hero image and headline overlay
-
Full-Bleed Hero, Alternative
Page with full-bleed hero image and content area that overlaps image
-
Default Page
Default page with basic layout
-
Default Page, Full Width
Default page with no side navigation
-
Default Page, Alternative Header
Basic page with alternative header layout
People Pages
-
People Listing, Grid
List of people, displayed as a grid
-
People Listing, Grid with Modal
List of people, displayed as a grid with modal overlay
-
People Listing, Stacked
List of people, displayed as a vertical list
-
People Detail Page
Bio for individual person
News & Events Pages
-
News & Events Page
News and Events page, with links to additional entries
-
News Listing Page
List of latest news items
-
News Detail Page
List of latest events items
-
Events Listing Page
Individual news item page
-
Event Detail Page
Individual event page
Content Components
-
Featured Content
Examples of featured content, including cards and full-bleed ribbons
-
Images & Videos
Examples of images and videos within the content
-
Quotes
Examples of blockquotes and pull quotes
-
Lists
Examples of lists of content, including summary/detail elements
Documentation
Get Started
In order to ensure branding consistency across all sites, designers and developers should use the University-provided theme files when creating a new website. Don't start from scratch! These shared files are the foundation for the Web Theme.
Visit the Documentation section for the downloads, code examples, and reference material you’ll need to get started.