h1 — Page Title

One per page. The page title shown in the main content area. Matches the browser tab title (PageTitle). Do not use inside cards or sections.

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.

h2 — Section Heading

Major sections within a page. Use to divide a long page into named regions. Appropriate inside .cr-section.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

h3 — Subsection Heading

Subdivisions within an h2 section. Use for grouped content within a section, such as a step in a process or a named group of fields.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis aute irure dolor in reprehenderit in voluptate velit esse.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

h4 — Named Item or Sub-Panel Heading

Headings for named items in a list, grid, or self-contained content block. Also appropriate for sub-sections within a form or sidebar.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Excepteur sint occaecat cupidatat non proident.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

h5 — Label or Minor Heading

Small labels within a form, sidebar, or supporting content block. Use sparingly — if it doesn't need to be in the document outline, use a styled p instead.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit.

h6 — Caption or Footnote Heading

Rarely needed. Use for metadata labels, figure captions, or fine-print headings where h5 is still too prominent.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet consectetur adipisci velit.

Body Text

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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Inline elements: link text, strong emphasis, inline code.

Typography Utilities

cr-heading-primary

Reduces margin-bottom to 0.25rem. Use when a heading sits immediately above supporting text.

cr-heading-secondary

Sets font-size to 1rem. Use for de-emphasized secondary headings.

cr-text-center — centered text.

cr-text-error — error text color.

cr-text-muted — muted/secondary text color.

Buttons

cr-btn-primary

cr-btn-full (full width)

Grid: cr-grid-2

Two equal columns (50/50). Stacks to single column on mobile.

Grid: cr-grid-3

Three equal columns (33/33/33). Stacks to single column on mobile.

Grid: cr-grid-3 + cr-span-2

Sidebar (33%) + main content (66%). Stacks to single column on mobile.

Containers

cr-container — max-width 1200px, centered:

cr-container-fluid — full width:

Spacing Utilities

cr-mb-2 — margin-bottom: 0.5rem

cr-mb-4 — margin-bottom: 1.5rem

cr-mt-2 — margin-top: 0.5rem

cr-my-2 — margin-top and margin-bottom: 0.5rem

Form Validation States

This field is required.

Images

cr-img-fluid — responsive image (max-width: 100%, height: auto).