## Purpose As part of https://gitlab.com/gitlab-org/gitlab-services/design.gitlab.com/-/issues/1522#note_1468187373 and related conversations, it could be helpful to determine a consistent scale for headings that are within a component. In all cases, a semantically correct heading is likely a level 2 (`h2`) heading, because typically these components are an isolated section of content within the main page region. The size and prominence of a level 2 heading style is mostly not desirable because the components themselves have additional visual affordance. The goal would be to leverage a smaller scale so that the heading still stands out, but does not compete as much with other page content. The reason for a consistent scale across all impacted components is because the intent is the same, and also to promote more predictable visual hierarchy when these components are used in combination with other page content, and also when present with each other along with other page content. **Current components that contain a heading:** - [Alert](https://design.gitlab.com/components/alert) - [Banner](https://design.gitlab.com/components/banner) - [Drawer](https://design.gitlab.com/components/drawer) - [Modal](https://design.gitlab.com/components/modal) **Note:** Patterns and page templates that contain headings are out of scope as headings within that content should follow the default heading structure and scale. ## Concept  [View exploration in Figma →](https://www.figma.com/file/PtmZPH5KpF3YwhMFEwOQLT/%2611014-component-headings?type=design&node-id=2-115&mode=design&t=z1NNa36R7Dj2qDc5-11)