Headings

The headings consists of both floating and static values. The fluid ones, calculates a current vmin value based on current screen size, from screen size 30rem up to 90rem, to create better adaptation to different devices automatically. In the code, the values are translated into the unit rem where 1rem is equal to 16px, set at the root.

  • Heading xxlarge

    Fluid value scales between 40px and 80px.

    CSS utility class
    .gh-heading-xxlarge

  • Heading xlarge

    Fluid value scales between 32px and 48px.

    CSS utility class
    .gh-heading-xlarge

  • Heading large

    Fluid value scales between 24px and 32px.

    CSS utility class
    .gh-heading-large

  • Heading medium

    Fluid value scales between 20px and 24px.

    CSS utility class
    .gh-heading-medium

  • Heading small

    Fluid value scales between 18px and 20px.

    CSS utility class
    .gh-heading-small

  • Heading xsmall

    Static value is 16px.

    CSS utility class
    .gh-heading-xsmall

  • Heading xxsmall

    Static value is 14px.

    CSS utility class
    .gh-heading-xxsmall