Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use <h2> instead of <div> on Subhead-heading docs #1953

Merged
merged 1 commit into from
Feb 24, 2022
Merged

Use <h2> instead of <div> on Subhead-heading docs #1953

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/shaggy-coats-relate.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/css": patch
---

Use <h2> instead of <div> on Subhead-heading docs
18 changes: 9 additions & 9 deletions docs/content/components/subhead.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,29 +8,29 @@ bundle: subhead
---


The basic Subhead consists of a `.Subhead` container, which has a light gray bottom border. Use `.Subhead-heading` for the heading itself. It's an `<h2>` sized heading with normal font-weight.
The basic Subhead consists of a `.Subhead` container, which has a light gray bottom border. Use `.Subhead-heading` for the heading itself. It is styled as an `<h2>` sized heading with normal font-weight.

Use a heading element whenever possible as they can be used as navigation for assistive technologies, and avoid skipping levels.

```html live title="Subhead"
<div class="Subhead">
<div class="Subhead-heading">Plain subhead</div>
<h2 class="Subhead-heading">Plain subhead</h2>
</div>
```

To add a top margin to the Subhead, use `.Subhead--spacious`. This is useful for separating sections on a settings page.

```html live title="Spacious Subhead"
<div class="Subhead Subhead--spacious">
<div class="Subhead-heading">Spacious subhead</div>
<h2 class="Subhead-heading">Spacious subhead</h2>
</div>
```

You can add a one line description to the subhead with `.Subhead-description`.

```html live title="Subhead with description"
<div class="Subhead">
<div class="Subhead-heading">Subhead with description</div>
<h2 class="Subhead-heading">Subhead with description</h2>
<div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
</div>
```
Expand All @@ -39,7 +39,7 @@ For longer descriptions, it is recommended that you use a paragraph below the Su

```html live title="Subhead with longer description"
<div class="Subhead">
<div class="Subhead-heading">Plain subhead</div>
<h2 class="Subhead-heading">Plain subhead</h2>
</div>
<p>
This is a longer description that is sitting below the Subheader. It's much longer than a description that could sit comfortably in the Subhead. It might even have <strong>bold</strong> text. <a href="#">Click to learn more.</a>
Expand All @@ -50,12 +50,12 @@ You can add a button or something to the right of `.Subhead-heading` with the `.

```html live title="Subhead with actions"
<div class="Subhead">
<div class="Subhead-heading">Subhead with button</div>
<h2 class="Subhead-heading">Subhead with button</h2>
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
</div>

<div class="Subhead Subhead--spacious">
<div class="Subhead-heading">Subhead with link</div>
<h2 class="Subhead-heading">Subhead with link</h2>
<div class="Subhead-actions"><a href="#url">Learn more</a></div>
</div>
```
Expand All @@ -64,7 +64,7 @@ Use all the elements together to create a Subhead with actions and a description

```html live title="Subhead with actions and description"
<div class="Subhead">
<div class="Subhead-heading">Subhead with actions and description</div>
<h2 class="Subhead-heading">Subhead with actions and description</h2>
<div class="Subhead-actions"><a href="#url" class="btn btn-sm btn-primary" role="button">Action</a></div>
<div class="Subhead-description">The subhead is a subdued header style with a light bottom border.</div>
</div>
Expand All @@ -74,6 +74,6 @@ Use the `.Subhead-heading--danger` modifier to make the text bold and red. This

```html live title="Subhead danger"
<div class="Subhead">
<div class="Subhead-heading Subhead-heading--danger">Danger zone</div>
<h2 class="Subhead-heading Subhead-heading--danger">Danger zone</h2>
</div>
```