Section head

Use section headlines to structure the page content.

This allows you to structure sections or separate them more clearly from each other.

Recommendation#

  • Avoid too long or multiline text.
  • Only a two-line text is allowed as a maximum variant.

Overall styling#

  • Text style is always section head and centered.
  • The line-height is set to default.
  • Text color is gray-darker.
  • The lines/dividers color is gray-lighter and has a 2px thickness.
  • The width of the left and right line depends on the text length and are scaled completely identically over all stylings.

Spacing & measurements#

TypesAttributesPreview
LGheight: 32px
padding-left /-right: 16px
text-width: 60%		Section head: LG
MD-XSheight: 24px
padding-left /-right: 16px
text-width: 60%		Section head: MD-XS

What can be modified?#

  • Adjust the width according to the artboard size.
  • Modify the width of text but please stick to the spacing given in the documentation.
  • Modify section heads to your project needs by changing the colors of the text and the lines (i.e. to basic-white if you want to use the section head on a dark background).

Our workflow in Sketch#

  • Unfortunately, the symbol must be detached first to add demo content to a section head.
  • Simply adjust the lines/dividers to the distance defined for the text box.

Change log#

10.0.0 Fundamental & 10.0.0 Web - 2022-05-30#

Changed#

  • Sketch: "Section head" | Adjusted to new grid settings

9.0.0 Fundamental & 9.0.0 Web - 2022-05-03#

Changed#

  • Sketch: "Section head" | Adapted component to new grid settings

8.9.0 Fundamental & 8.9.0 Web - 2022-03-21#

Fixed#

  • Sketch: "Section head" | Fixed responsive behavior

8.1.0 Fundamental & 8.1.0 Web - 2021-07-22#

Changed#

  • Doc: "Section head" | Clean up the documentation for the right structure and sentence case

6.0.1 Fundamental & 6.0.1 Web - 2021-03-23#

Changed#

  • "Section head" | Changed symbol (LG): Text Layer from SECTIONHEAD to SECTION HEAD

6.0.0 Fundamental & 6.0.0 Web - 2021-03-22#

Changed#

  • "Section head" | Changed symbols: with layer-style settings

4.2.0 Core & 4.2.0 Web - 2020-01-16#

Fixed#

  • "Section head" | Fixed symbols for MD/XS: resizing