Skip to content
Primer/ViewComponents
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Development
CSSReactViewComponents
About
Getting started
ContributingSystem argumentsMigrationStatuses
Components
AutoCompleteAutoCompleteItemAvatarAvatarStackBlankslateBorderBoxBoxBreadcrumbButtonButtonGroupButtonMarketingClipboardCopyCloseButtonCounterDetailsDropdownDropdownMenuFlashFlexFlexItemHeadingHiddenTextExpanderImageCropIconButtonLabelLayoutLinkMenuMarkdownOcticonOcticonSymbolsPopoverProgressBarSpinnerStateSubheadTabContainerTabNavTextTimeAgoTimelineItemTooltipTruncateUnderlineNav
GitHub

Subhead

Table of contents
Beta
View sourceView storybook
Table of contents

Use Subhead as the start of a section. The :heading slot will render an <h2> font-sized text.

  • Optionally set the :description slot to render a short description and the :actions slot for a related action.
  • Use a succint, one-line description for the :description slot. For longer descriptions, omit the description slot and render a paragraph below the Subhead.
  • Use the actions slot to render a related action to the right of the heading. Use Button or Link.

Accessibility

The :heading slot defaults to rendering a <div>. Update the tag to a heading element with the appropriate level to improve page navigation for assistive technologies. Learn more about best heading practices (WAI Headings)

Examples

Default

My Heading

My Description
<%= render(Primer::SubheadComponent.new) do |component| %>
  <% component.heading(tag: :h3) do %>
    My Heading
  <% end %>
  <% component.description do %>
    My Description
  <% end %>
<% end %>

With dangerous heading

My Heading

My Description
<%= render(Primer::SubheadComponent.new) do |component| %>
  <% component.heading(tag: :h3, danger: true) do %>
    My Heading
  <% end %>
  <% component.description do %>
    My Description
  <% end %>
<% end %>

With long description

My Heading

This is a longer description that is sitting below the Subhead. It's much longer than a description that could sit comfortably in the Subhead. 

<%= render(Primer::SubheadComponent.new) do |component| %>
  <% component.heading(tag: :h3) do %>
    My Heading
  <% end %>
<% end %>
<p> This is a longer description that is sitting below the Subhead. It's much longer than a description that could sit comfortably in the Subhead. </p>

Without border

My Heading
My Description
<%= render(Primer::SubheadComponent.new(hide_border: true)) do |component| %>
  <% component.heading do %>
    My Heading
  <% end %>
  <% component.description do %>
    My Description
  <% end %>
<% end %>

With actions

My Heading
Action
My Description
<%= render(Primer::SubheadComponent.new) do |component| %>
  <% component.heading do %>
    My Heading
  <% end %>
  <% component.description do %>
    My Description
  <% end %>
  <% component.actions do %>
    <%= render(
      Primer::ButtonComponent.new(
        tag: :a, href: "http://www.google.com", scheme: :danger
      )
    ) { "Action" } %>
  <% end %>
<% end %>

Arguments

NameTypeDefaultDescription
spaciousBooleanfalseWhether to add spacing to the Subhead.
hide_borderBooleanfalseWhether to hide the border under the heading.
system_argumentsHashN/ASystem arguments

Slots

Heading

The heading

NameTypeDefaultDescription
tagSymbolN/AOne of :div, :h1, :h2, :h3, :h4, :h5, or :h6.
dangerBooleanN/AWhether to style the heading as dangerous.
system_argumentsHashN/ASystem arguments

Actions

Actions

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments

Description

The description

NameTypeDefaultDescription
system_argumentsHashN/ASystem arguments
Edit this page on GitHub