Report Styling CSS Reference

Generated Audit Lab reports expose HTML classes that you can target from the custom CSS editor. The available classes depend on the report template and report content. This reference documents the shared structure observed in generated WCAG reports and template-specific classes observed in additional report templates.

Report Structure

The report is rendered inside a single root element. Sections are nested recursively, so the same section classes can appear on top-level chapters, subsections, and individual audit-result sections.

<div class="report-root">
  <div class="sections">
    <div class="section cover-page">...</div>
    <div class="section">...</div>
    <div class="section">
      <div class="section-header has-numbering">...</div>
      <div class="section-content">...</div>
      <div class="subsections">
        <div class="section">...</div>
      </div>
    </div>
  </div>
</div>

Class	Element	Purpose
`.report-root`	`div`	Root element for the complete report. Use it to scope broad report styles.
`.sections`	`div`	Container for all report sections.
`.section`	`div`	Generic report section. Used for cover page, table of contents, chapters, subsections, and audit-result entries.
`.cover-page`	`div`	Cover page section. Usually combined with `.section`.
`.section-header`	`div`	Header wrapper for a section title and optional numbering.
`.has-numbering`	`div`	Marks a section header that contains a visible section number.
`.numbering`	`h1`, `h2`, `h3`	Visible section number, such as `1`, `4.2`, or `4.2.1`.
`.section-title-row`	`div`	Wrapper around the section title heading.
`.section-title`	`h1`, `h2`, `h3`	Section title text.
`.section-subtitle`	`div`	Subtitle or secondary label inside a generated section. For audit-result sections, this can contain the severity label.
`.section-content`	`div`	Main content area for a section.
`.subsections`	`div`	Wrapper for nested sections below a parent section.

Cover Page and Text Content

Class	Element	Purpose
`.logo`	`div`	Logo area on the cover page when the template includes a logo block.
`.title`	`div`	Report title on the cover page. Also appears in the fallback error view. Scope title styling with `.cover-page .title` when you only want to change the cover page.
`.subtitle`	`div`	Report subtitle or report description on the cover page.
`.report-time`	`div`	Report generation timestamp on the cover page.
`.content`	`div`	Generic content wrapper used across text blocks, tables, containers, and table-of-contents content. Combine it with a more specific class before styling.
`.main`	`div`	Main content block inside a section.
`.text`	`div`	Text content block, such as report descriptions or explanatory paragraphs.
`.table-of-contents`	`div`	Content wrapper for the generated table of contents.
`.toc`	`div`	Table-of-contents list wrapper.
`.toc-items`	`ul`	Table-of-contents list.

Audit Result Content

Class	Element	Purpose
`.audit-overview`	`div`	Audit overview or audit-result filter section. Usually combined with `.section`.
`.statistics`	`div`	Statistics section. Usually combined with `.section`.
`.chart`	`div`	Chart wrapper in the statistics section.
`.chart-content`	`div`	Inner chart content wrapper.
`.panel`	`div`	Panel around repeated audit-result metadata.
`.container`	`div`	Layout container inside panels.
`.content-container-item`	`div`	One item inside a `.container`, commonly a table block.
`.definition-table`	`div`	Definition-style table wrapper for metadata such as status, creator, reviewer, and version.
`.table`	`div`	Generic table content wrapper.
`.table-content`	`table`	Actual HTML table.
`.finding-detail-label`	`div`	Label for finding details such as description, selectors, or HTML.
`.repair-list`	`ul`	List of repair guidance or detected issue details.

Template-Specific Content

Some report templates add extra content blocks. These classes may be absent from other templates.

Class	Element	Purpose
`.warning-note`	`div`	Warning, disclaimer, or template guidance block.
`.editor-note`	`div`	Editor guidance or required-content note embedded by the report template.
`.requirement-result-matrix`	`div`	Wrapper for a requirement-by-audit-object result matrix.
`.rrm-legend`	`div`	Legend for the requirement result matrix.
`.rrm-legend-label`	`span`	Label at the start of the matrix legend.
`.rrm-legend-item`	`span`	One legend item for a matrix status value.
`.rrm-table`	`table`	Requirement result matrix table.
`.rrm-requirement-header`	`th`	Header cell for the requirement column.
`.rrm-object-header`	`th`	Header cell for an audit object column.
`.rrm-requirement-cell`	`th`	Requirement row header inside the matrix body.
`.rrm-status-cell`	`td`	Matrix cell containing one result status.
`.rrm-status`	`span`	Status marker inside the matrix legend or matrix cells.
`.rrm-status--passed`	`span`	Matrix status marker for passed results.
`.rrm-status--failed`	`span`	Matrix status marker for failed results.
`.rrm-status--not-applicable`	`span`	Matrix status marker for not applicable results.
`.rrm-status--dash`	`span`	Matrix marker for no rating, no data, or not planned results.

Status and Severity Classes

Status and severity indicators combine a role class with a value class. For example, a passed status appears as .status.passed, while an error severity appears as .severity.error.

Class	Element	Purpose
`.status`	`div`	Status indicator wrapper.
`.severity`	`div`	Severity indicator wrapper.
`.label`	`div`	Text label inside a status indicator.
`.passed`	`div`	Passed evaluation status.
`.failed`	`div`	Failed evaluation status.
`.notapplicable`	`div`	Not applicable evaluation status.
`.undecided`	`div`	Undecided evaluation status.
`.warn`	`div`	Warning severity.
`.error`	`div`	Error severity.
`.missing`	`g`	Missing-state marker inside generated icon graphics.

Images and Screenshots

Class	Element	Purpose
`.image`	`div`	Generic image content block.
`.screenshot`	`div`	Screenshot content block.
`.image-box`	`div`	Wrapper around a screenshot image.
`.overlay`	`div`	Overlay layer above a screenshot.

Generated Icon and Chart Internals

The following classes are present in the generated report, but they come from Font Awesome, Plotly, or generated SVG internals. They are available to CSS, but they are less stable than the report-specific classes above.

Class	Source	Purpose
`.svg-inline--fa`	Font Awesome	Base class for generated inline SVG icons.
`.icon`	Report icon wrapper	Shared class on status and severity icons.
`.fa-circle-check`	Font Awesome	Passed status icon.
`.fa-circle-xmark`	Font Awesome	Failed or error icon.
`.fa-circle-question`	Font Awesome	Undecided status icon.
`.fa-circle-exclamation`	Font Awesome	Warning icon.
`.fa-ban`	Font Awesome	Not applicable icon.
`.fontawesome-i2svg-active`	Font Awesome	Runtime marker on the HTML element.
`.fontawesome-i2svg-complete`	Font Awesome	Runtime marker on the HTML element.
`.js-plotly-plot`	Plotly	Plotly chart root.
`.plot-container`	Plotly	Plotly chart container.
`.plotly`	Plotly	Plotly chart wrapper.
`.svg-container`	Plotly	SVG chart container.
`.main-svg`	Plotly	Chart SVG.
`.user-select-none`	Plotly	Plotly interaction wrapper.
`.bglayer`	Plotly/SVG	Chart background layer.
`.cartesianlayer`	Plotly/SVG	Cartesian chart layer.
`.clips`	Plotly/SVG	Chart clip-path container.
`.draglayer`	Plotly/SVG	Chart interaction layer.
`.funnelarealayer`	Plotly/SVG	Funnel area layer.
`.g-gtitle`	Plotly/SVG	Chart title group.
`.geolayer`	Plotly/SVG	Geographic chart layer.
`.gl-container`	Plotly/SVG	WebGL chart container.
`.glimages`	Plotly/SVG	WebGL image layer.
`.gradients`	Plotly/SVG	SVG gradient definitions.
`.hoverlayer`	Plotly/SVG	Chart hover layer.
`.iciclelayer`	Plotly/SVG	Icicle chart layer.
`.imagelayer`	Plotly/SVG	Chart image layer.
`.indicatorlayer`	Plotly/SVG	Indicator chart layer.
`.infolayer`	Plotly/SVG	Chart information layer.
`.js-reference-point`	Plotly/SVG	Internal chart reference point.
`.layer-above`	Plotly/SVG	SVG layer above data.
`.layer-below`	Plotly/SVG	SVG layer below data.
`.menulayer`	Plotly/SVG	Chart menu layer.
`.modebar-container`	Plotly	Plotly mode bar container.
`.patterns`	Plotly/SVG	SVG pattern definitions.
`.pielayer`	Plotly/SVG	Pie chart layer.
`.polarlayer`	Plotly/SVG	Polar chart layer.
`.selectionlayer`	Plotly/SVG	Chart selection layer.
`.shapelayer`	Plotly/SVG	Chart shape layer.
`.slice`	Plotly/SVG	Pie-chart slice group.
`.slicetext`	Plotly/SVG	Pie-chart slice label.
`.smithlayer`	Plotly/SVG	Smith chart layer.
`.sunburstlayer`	Plotly/SVG	Sunburst chart layer.
`.surface`	Plotly/SVG	Pie-chart surface path.
`.ternarylayer`	Plotly/SVG	Ternary chart layer.
`.trace`	Plotly/SVG	Chart trace group.
`.treemaplayer`	Plotly/SVG	Treemap chart layer.
`.zoomlayer`	Plotly/SVG	Chart zoom layer.

Fallback Display Classes

Class	Element	Purpose
`.message`	`div`	Error-message area used when the report cannot be displayed.

Selector Examples

Change only the cover-page title:

1
2
3

.cover-page .title {
  font-size: 1.8rem;
}

Change all section headings:

1
2
3

.section-title {
  color: #153e75;
}

Style failed statuses and error severities consistently:

.status.failed,
.severity.error {
  color: #a40000;
  font-weight: 700;
}