Skip to content

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)

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

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
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 %>