Subheader

Overview

A subheader can be used to title subsections of content within a display block.

The subheader comes in medium and small sizes. It can also optionally display a horizontal separator line that, in some cases, can help visually tie together different elements that are titled by the separator.

A subheader can be used to title sections of an edit form. Use the smaller size for the subheader component within edit forms. Also, display the optional separator line for subheaders in edit forms, since this helps visually reinforce that the label and input sub-columns are part of one logical edit column.

For some use cases, consider using a subheader as a visually lightweight alternative to a group box, which is used to contain a subsection of content within a display block. The group box has a heavier appearance than the subheader, with its contrasting header and border.

Record detail has its own separate subheader for titling record detail sections, although this is styled identically to the generic subheader.

Development

Web component development

Component reference

rui-subheader

Implementation

Use rui-subheader to title subsections of content, including sections of edit forms.

Use rui-subheader instead of the native h1-h6 elements.

Begin by importing the rui-layout module into your application.

// import into app.module
import '@jkhy/responsive-ui-wc/components/rui-layout/rui-layout-imports';

Use the rui-subheader element to create a subheader.

<rui-subheader text="This is a subheader"></rui-subheader>

Set the size attribute to a value of “small” for small subheaders.

<rui-subheader text="This is a small subheader" size="small"></rui-subheader>

Set the displaySeparator attribute to a value of “true” to display the optional separator line.

<rui-subheader text="This subheader has a separator line" [displaySeparator]="true"></rui-subheader>

The rui-subheader also contains a slot to allow the addition of an rui-info-tooltip if additional information is required.

<rui-subheader text="This subheader has a tooltip" [displaySeparator]="true">
    <rui-info-tooltip location="left">
        This is an info tooltip.
    </rui-info-tooltip>
</rui-subheader>

Angular wrapper development

Wrapper reference

jha-subheader

Implementation

Use jha-subheader to title subsections of content, including sections of edit forms.

Use jha-subheader instead of the native h1-h6 elements.

Begin by importing the JhaLayoutModule module into your application.

// import into app.module
import { JhaLayoutModule } from '@jkhy/responsive-ui-angular/jha-layout';

@NgModule({
    imports: [
        ...
        JhaLayoutModule,
        ...
    ]
})

export class AppModule(){}

Use the jha-subheader element to create a subheader.

<jha-subheader jhaText="This is a subheader"></jha-subheader>

Set the jhaSize attribute to a value of “small” for small subheaders.

<jha-subheader jhaText="This is a small subheader" jhaSize="Small"></jha-subheader>

Bind the jhaDisplaySeparator attribute to a value of “true” to display the optional separator line.

<jha-subheader jhaText="This is a small subheader" [jhaDisplaySeparator]="true"></jha-subheader>

Component playground

Design

Figma design

A subheader can be used to title subsections of content within a display block or to title sections of an edit form.

Titling subsections of content with a subheader

You have two options to choose from with a content subheader:

• The subheader size, which is either medium or small
• Whether or not to display a separator line to the right of the subheader text

Titling sections of an edit form with a subheader

We always use the small subheader size and display the separator line for subheaders that title sections of an edit form. The separator line helps tie the field label and field value sub columns together into one logical edit column.

Adobe XD design

A subheader can be used to title subsections of content within a display block or to title sections of an edit form.

Titling subsections of content with a subheader

You have two options to choose from with a content subheader:

• The subheader size, which is either medium or small
• Whether or not to display a separator line to the right of the subheader text

Here’s how to set up each of these options:

• Medium subheader with a separator line:
  • Add a JHA / Subheader component to the artboard.
  • Set the “Medium with Separator” state on the subheader component.
  • Change the subheader text to an appropriate value.
  • The text part of the component uses right alignment, so you’ll typically need to resize the separator line width within the component and the width of the subheader component.
• Small subheader with a separator line:
  • Add a JHA / Subheader component to the artboard.
  • Set the “Small with Separator” state on the subheader component.
  • Change the subheader text to an appropriate value.
  • The text part of the component uses right alignment, so you’ll typically need to resize the separator line width within the component and the width of the subheader component.
• Medium subheader without a separator line:
  • Add a text element to the artboard and apply the “JHA / Text / Subheader / Medium” character style.
  • Set the text to an appropriate value.
• Small subheader without a separator line:
  • Add a text element to the artboard and apply the “JHA / Text / Subheader / Small” character style.
  • Set the text to an appropriate value.

Titling sections of an edit form with a subheader

We always use the small subheader size and display the separator line for subheaders that title sections of an edit form. The separator line helps tie the field label and field value sub columns together into one logical edit column.

Add a subheader component to an artboard with an edit form and position it above the section of the edit form that it titles. Set the component’s state to “Small with Separator”. Change the subheader text to an appropriate value.