Page Heading :: OpenProject Lookbook

How To Use
- Layout
- Forms
- Autocompleters
- Dialogs
- Menu And Navigation
- Flash Banner
- Flash Modal
- Colors
- Settings Pages
- - Modals
- Icons
- - Typography
  - Op Icons
  - Colors
  - Spacings
  - Shadows
  - Focus

No matching results.

- - Attribute
  - - Single
    - Range
  - - Default
    - With Dynamic Margins
  - Loading Indicator
  - - Default
    - German Locale
  - Rich Text
  - - Default
    - Playground
- - Advanced Filters
  - Attribute Group
  - - Default
    - Secondary
    - Border Only
  - - Default
    - Highlight
    - Alternative Highlight
    - Danger
    - Active
    - Transparent
    - Sizes
    - Link Like
  - Collapsible Section
  - Context Menu
  - Contextual Info Text
  - Danger Zone
  - - Default
    - Bordered
    - Bordered Compressed
    - Collapsible
    - Controls
    - Field Types
    - Field Widths
    - Multiple Fields Per Row
    - Sections And Fieldsets
    - Vertical Layout
    - Wide Labels
  - Links
  - - Default
    - Danger Zone
  - - Default
    - Detailed View
  - - Default
    - Off
  - Pagination
  - Progress Bar
  - - Default
    - No Ellipse
    - Footer
    - No Content
  - - Default
    - With Radio Buttons
  - - Default
    - No Ellipse
    - Footer
    - No Content
  - - Info
    - Warning
    - Error
    - Success
    - Upload
  - - Default
    - With Form Elements
    - With Labelled Form Elements
  - - Default
    - Forms
  - Widget boxes
- - - Default
    - Manual Overwrite
- - - Default
    - With toggable filter section
  - Filters
- - Frame
  - Stream
- - - Default
    - As Link
  - - Default
    - Primer
  - - Default
    - Success
    - Danger
    - Unique Key
    - Button
  - Form
- - - Work Based
    - Status Based
- - - Gate
    - Stage
- - Sort By
- - - Project Query
    - Work Package
- - - Default
    - Sizes
- - Info Line
  - - - New
      - Edit
  - Split View
  - Status Badge
  - Status Button

No matching results.

The OP Heading component is a custom component which should be used for individual headers on a page below the Primer::OpenProject::PageHeader. It allows you to use a standard HTML heading with appropriate styling for use within OpenProject.

Note

The OP Heading is not meant as a complete replacement of the Primer Heading as that one might can still be used, for example in the Primer::OpenProject::SidePanel.

Overview

Anatomy

The OP Heading consists simply of a regular HTML h tag. It takes one input to specify which level of heading (from h1 to h6) should be used.

Options

Currently, there are no additional options implemented. It is planned to support an optional divider at the bottom.

This is useful in places like Settings pages that might need more visual differentiation between sections.

Used in

The Heading is used:

Recurring meetings and meeting series index pages

Technical notes

Internally, the Primer::OpenProject::Heading component calls the normal Primer::Beta::Heading with an overwritten (lower) font-weight.