Corner Brook Rapids Theme Test

Bootstrap 4.6 component and colour validation page.

This page is intended to expose colour, contrast, typography, hover, disabled and contextual styling issues.

Primary Action Secondary Action

Typography

Heading 1 — Corner Brook Rapids

Heading 2 — Competitive Swimming

Heading 3 — Programs

Heading 4 — Registration

Heading 5 — Upcoming Meets
Heading 6 — Club Information

This is lead text. Corner Brook Rapids provides opportunities for swimmers to develop, compete and succeed.

This is standard body text with a standard link, bold text, italic text, small text and highlighted text.

This is text using .text-muted.

This is .text-primary.

This is .text-secondary.

This is .text-dark.

Success is built one practice, one race and one improvement at a time.

Bootstrap blockquote footer

Contextual Backgrounds

Primary Background

Testing .bg-primary with headings and white text.

Secondary Background

Testing .bg-secondary with headings and white text.

Dark Background

Testing .bg-dark with .text-light.

Light Background

Testing .bg-light and standard dark content.

Primary Border

Testing .border-primary.

Buttons

Standard Buttons

Outline Buttons

Button Sizes

Disabled Buttons

Buttons on Primary Background

Button Group

Badges

Primary Secondary Success Danger Warning Info Light Dark

Primary Pill Secondary Pill

Alerts

Primary alert. Standard text, muted text and an alert link.
Secondary alert. Example secondary message.
Success. Registration was completed successfully.
Danger. Something requires immediate attention.
Warning. Registration closes tomorrow.
Information. Standard text, muted text and an alert link.
Light alert. Light contextual message.
Dark alert. Dark contextual message.

Cards

Card Header

Development Program

Corner Brook Rapids

Standard card text used to verify body typography and spacing.

Learn More
Card footer

Primary Card

Testing contextual header backgrounds and heading inheritance.

Dark Card

Headings and text should remain readable on a dark card.

List Groups

  • Standard item
  • Active item
  • Disabled item
  • Registration 12
Active Action Item Competitive Programs Development Programs Disabled Action

Forms

This is standard .form-text.text-muted.
$
CAD
Looks good.
Please correct this value.

Custom Controls

Tables

SwimmerProgramStatusBalance
Alex RapidsCompetitiveActive$0.00
Jordan RapidsDevelopmentPending$125.00
Primary RowTestingContext$50.00
DateEventLocation
Oct 10Fall InvitationalCorner Brook
Nov 15Regional MeetSt. John's

Breadcrumbs

Tabs and Pills

Dropdown Menu

Competitive Development Active Item
Disabled Item

Forced Open Dropdown

This remains visible so dropdown colours can be inspected without interaction.

Programs
Competitive Development Active Item
Disabled Item

Progress Bars

25%
50%
75%
Loading

Pagination

Collapse / Accordion

This accordion item begins open.

This accordion item begins collapsed.

Media Object

CBR

Corner Brook Rapids

Media object body text used to test headings, standard text and spacing together.

Spinners

Modal

Navbar Variants

Primary / Dark Navbar

Light Navbar

Dark Section / Footer Test

Corner Brook Rapids

Standard light content on the site's dark background.

This tests Bootstrap .text-white-50.

Actions

Quick Contrast Matrix

Primary

Normal white text.

White 50% text.

Secondary

Normal white text.

White 50% text.

Dark

Normal white text.

White 50% text.

Light

Standard body text.

Muted body text.