UI Components and Headings

Technical Questions
1

When you’re creating reusable Components, it’s placement on a page will likely have a heading associated with it.
That heading may be contextual, so the heading could be defined on the page itself, with teh component below it.
OR the heading could be defined in the Component, passing in the heading level or even the text associated.

Is there a best practice around this? Perhaps styling comes into play here in terms of where a heading is defined?

2

and other related questions, like should we have an optional label, or have the heading and label be done by the parent…and what about styling, which way is better?

3

The pattern you are asking about is used in several places in the Dynamic Component Library. Here is the typical pattern for the component:

  • Optional “label” input that defines the text content of the heading. If it is there, a heading is added. If it is not, a heading is not added.
  • Optional “headingLevel” input that defines the heading level with a default of 2.
  • A set of H1 through H3 (or whatever) tags at the top of the component template with conditional logic based on the label and heading level inputs.

Styling should be a non-issue. You will typically set the style of headings at the project level and it would be applied whether the heading was put inside the component or not.