Page Elements

This page was created as a review page to verify elements have been styled correctly and default image have been defined for the site. The elements on this page have been manually set which are designed to give the best representation of how they will be presented within the different components used throughout our system templates.

Images

16:9
3:4
3:2
1:1
4:3
Preferred Dimensions
Articles

1920x1080 - 16:9 Ratio

Bios

600x800 - 3:4 Ratio

Banners

600x400 - 3:2 Ratio

Parallax

1920x1080 - 16:9 Ratio

Backgrounds

1920x1080 - 16:9 Ratio

Photo Gallery

1200x800 - 3:2 Ratio

AOTW - Bios

600x800 - 3:4 Ratio

AOTW - Articles

1920x1080 - 16:9 Ratio

Favicon

260x260 - 1:1 Ratio

Default Images
Image Type Source Ratio Status
News Rotator /images/setup/default-thumbnail.png 16:9 Found
Article Thumbnail /images/setup/default-article-thumbnail.png 16:9 Missing
Bios /images/setup/default-headshot.png 3:4 Found
Site Logo /assets/images/ps-icon-original.png auto Found
Site Alternate Logo /assets/images/prestosports-logo-original.png auto Found
Favicon Package
Type Source Size Status
Favicon /favicon.ico48x48 Missing
Favicon Alternative /assets/favicons/favicon.ico48x48 Found
Favicon - 32px /assets/favicons/favicon-32x32.png32x32 Found
Favicon - 16px /assets/favicons/favicon-16x16.png16x16 Found
Favicon - Apple Touch /assets/favicons/apple-touch-icon.png180x180 Found
Favicon - Safari /assets/favicons/safari-pinned-tab.svgvector Found
Web Manifest /assets/favicons/site.webmanifest- Found
Browser Configuration /assets/favicons/browserconfig.xml- Found

Logos / Icons

Site Logo
site logo
Alternate Logo
alternate logo
Favicon
favicon

Typography

Heading 1

H1. Page Title
Heading 2

H2. Nunc velit nunc, euismod ut consectetur ut, ullamcorper sit amet dui. Nulla facilisi. Vivamus a est pulvinar, volutpat leo vel, pellentesque sapien.
Heading 3

H3. Nunc velit nunc, euismod ut consectetur ut, ullamcorper sit amet dui. Nulla facilisi. Vivamus a est pulvinar, volutpat leo vel, pellentesque sapien.
Heading 4

H4. Nunc velit nunc, euismod ut consectetur ut, ullamcorper sit amet dui. Nulla facilisi. Vivamus a est pulvinar, volutpat leo vel, pellentesque sapien.
Heading 5
H5. Nunc velit nunc, euismod ut consectetur ut, ullamcorper sit amet dui. Nulla facilisi. Vivamus a est pulvinar, volutpat leo vel, pellentesque sapien.
Heading 6
H6. Nunc velit nunc, euismod ut consectetur ut, ullamcorper sit amet dui. Nulla facilisi. Vivamus a est pulvinar, volutpat leo vel, pellentesque sapien.
Paragraphs

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc velit nunc, euismod ut consectetur ut, ullamcorper sit amet dui. Nulla facilisi. Vivamus a est pulvinar, volutpat leo vel, pellentesque sapien. Sed et risus viverra, pellentesque urna nec, varius purus. Nam eleifend dolor id nulla laoreet, vel ornare felis suscipit. Ut vitae sapien lacus. Fusce sagittis tellus non sapien tristique, vel mollis ex pellentesque. Aliquam et felis vel purus iaculis dictum et commodo quam. Curabitur consequat iaculis magna, quis pellentesque mi faucibus sed. Curabitur fermentum pharetra leo ut maximus. Aenean ornare mauris eu elit porta, at tempus purus ultricies.

Nulla facilisi. Vivamus a est pulvinar, volutpat leo vel, pellentesque sapien. Sed et risus viverra, pellentesque urna nec, varius purus. Nam eleifend dolor id nulla laoreet, vel ornare felis suscipit. Ut vitae sapien lacus. Fusce sagittis tellus non sapien tristique, vel mollis ex pellentesque. Aliquam et felis vel purus iaculis dictum et commodo quam. Curabitur consequat iaculis magna, quis pellentesque mi faucibus sed. Curabitur fermentum pharetra leo ut maximus. Aenean ornare mauris eu elit porta, at tempus purus ultricies.
Styled List
  • This is a styled list.
  • It will default with prepended icons
  • Nested lists:
    • inherit the parent elements style
    • will still show a bullet
    • and have appropriate left margin
Ordered List
  1. This is an unordered list.
  2. It appears completely unstyled.
  3. Structurally, it's still a list.
  4. However, this style only applies to immediate child elements.
  5. Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  6. This may still come in handy in some situations.
Unstyled List
  • This is an unordered list.
  • It appears completely unstyled.
  • Structurally, it's still a list.
  • However, this style only applies to immediate child elements.
  • Nested lists:
    • are unaffected by this style
    • will still show a bullet
    • and have appropriate left margin
  • This may still come in handy in some situations.

Color Palette

Primary
#021824
Secondary
#387c93
Tertiary
#e2ad26

Buttons

Toggles

Buttons
Group Buttons
Small Group Buttons

Table

Standard
# First Last Handle Active
1 John Doe @johndoe active
2 Jane Doe @jane active
1 Alejandro Hickumbottoms @alehick inactive
Group: Heading
3 Larry Cable Guy @twitter active
3 Jimmy Johns @freakyslow protected
Dark Headers
# First Last Handle Active
1 John Doe @johndoe active
2 Jane Doe @jane active
1 Alejandro Hickumbottoms @alehick inactive
Group: Heading
3 Larry Cable Guy @twitter active
3 Jimmy Johns @freakyslow protected

Tabs

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel mauris vel arcu hendrerit placerat quis et orci. Aliquam eget ex volutpat massa efficitur consequat eu in nisi. Nam aliquet augue ut quam faucibus accumsan et eu mi. Vivamus accumsan semper libero, vitae semper leo porta a. Suspendisse vulputate dolor lacus, ut consequat elit mattis pharetra. Donec in pellentesque quam. Sed et dolor quis sapien viverra lobortis at ut eros.

Cras scelerisque turpis sit amet tortor venenatis blandit. Curabitur leo mauris, tempus eget odio sit amet, ultricies tincidunt tellus. Nullam dapibus odio sed turpis sodales laoreet. Aliquam sagittis eros at efficitur hendrerit. Morbi euismod neque sodales, fringilla leo id, consequat lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec pharetra nulla at ex tincidunt mattis. Pellentesque mollis, nisi ut hendrerit facilisis, mi dolor condimentum sem, in eleifend ipsum neque eget lacus. Quisque congue est vitae molestie laoreet. Vestibulum dapibus eget orci non aliquet. Vivamus semper, augue sit amet gravida consectetur, felis magna viverra ipsum, id hendrerit erat neque eu enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum gravida, nunc eu pharetra blandit, erat odio porttitor diam, eget elementum nulla mauris eu arcu. Nunc quis molestie eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut vel mauris vel arcu hendrerit placerat quis et orci. Aliquam eget ex volutpat massa efficitur consequat eu in nisi. Nam aliquet augue ut quam faucibus accumsan et eu mi. Vivamus accumsan semper libero, vitae semper leo porta a. Suspendisse vulputate dolor lacus, ut consequat elit mattis pharetra. Donec in pellentesque quam. Sed et dolor quis sapien viverra lobortis at ut eros.

Cras scelerisque turpis sit amet tortor venenatis blandit. Curabitur leo mauris, tempus eget odio sit amet, ultricies tincidunt tellus. Nullam dapibus odio sed turpis sodales laoreet. Aliquam sagittis eros at efficitur hendrerit. Morbi euismod neque sodales, fringilla leo id, consequat lorem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec pharetra nulla at ex tincidunt mattis. Pellentesque mollis, nisi ut hendrerit facilisis, mi dolor condimentum sem, in eleifend ipsum neque eget lacus. Quisque congue est vitae molestie laoreet. Vestibulum dapibus eget orci non aliquet. Vivamus semper, augue sit amet gravida consectetur, felis magna viverra ipsum, id hendrerit erat neque eu enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Vestibulum gravida, nunc eu pharetra blandit, erat odio porttitor diam, eget elementum nulla mauris eu arcu. Nunc quis molestie eros.

Accordions

This is the first item's accordion body. It is shown by default, until the collapse plugin adivs the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the second item's accordion body. It is hidiven by default, until the collapse plugin adivs the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.

This is the third item's accordion body. It is hidiven by default, until the collapse plugin adivs the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.