Home Components Text
Text
Overview Playground API
Typography are used for rendering headlines, paragraphs and captions.
Fixed heading styles The fixed heading styles are used for product pages where multiple containers are used and space efficiency is key. Fixed means they are not responsive. The type size remains constant regardless of break point.
This is for component and layout headings. It pairs with $body-01. This is for smaller layout headings. It pairs with $body-02. This is for component and layout headings. This is for layout headings. This is for layout headings. This is for layout headings. This is for layout headings. 

  <goat-text type="heading" heading-size="1">
    This is for component and layout headings. It pairs with $body-01.
  </goat-text>
  <goat-text type="heading" heading-size="2">
    This is for smaller layout headings. It pairs with $body-02.
  </goat-text>
  <goat-text type="heading" heading-size="3">
    This is for component and layout headings.
  </goat-text>
  <goat-text type="heading" heading-size="4">
    This is for layout headings.
  </goat-text>
  <goat-text type="heading" heading-size="5">
    This is for layout headings.
  </goat-text>
  <goat-text type="heading" heading-size="6">
    This is for layout headings.
  </goat-text>
  <goat-text type="heading" heading-size="7">
    This is for layout headings.
  </goat-text>
Body styles There are two body styles for productive and expressive moments. Productive styles have a suffix of `-01` and expressive styles have a suffix of `-02`.
This is for short paragraphs with no more than four lines and is commonly used in components.
This is for short paragraphs with no more than four lines. Use in expressive components, such as button and link.
With a slightly taller line height than body-compact-01, this body style is used in productive layouts for long paragraphs with more than four lines. Use also for longer body copy in components such as accordion or structured list. It is always left-aligned. Body-long-01 can also be used for productive moments within expressive experiences.
With a slightly taller line height than body-compact-02, this style is commonly used in expressive layouts for long paragraphs with four lines or more. It is always left-aligned. 

  <goat-text type="body-compact">
    This is for short paragraphs with no more than four lines and is commonly used in components.
  </goat-text>

  <br>

  <goat-text type="body-compact" expressive="true">
    This is for short paragraphs with no more than four lines. Use in expressive components, such as button and link.
  </goat-text>

  <br>

  <goat-text type="body">
    With a slightly taller line height than body-compact-01, this body style is used in productive layouts for long
    paragraphs with more than four lines. Use also for longer body copy in components such as accordion or structured
    list. It is always left-aligned. Body-long-01 can also be used for productive moments within expressive experiences.
  </goat-text>

  <br>

  <goat-text type="body" expressive="true">
    With a slightly taller line height than body-compact-02, this style is commonly used in expressive layouts for long
    paragraphs with four lines or more. It is always left-aligned.
  </goat-text>
Utility styles The utility styles are used with productive and expressive moments and include styles for code snippets, labels for captions and helper text, as well as legal copy. Productive styles have a suffix of `-01` and expressive styles have a suffix of `-02`.
This is for inline code snippets and smaller code elements. This is for large code snippets and larger code elements.
This is a multipurpose type style that can be used for field labels in components, error messages, and captions. It should not be used for body copy. This is a multipurpose type style that can be used for field labels in components, error messages, and captions. It should not be used for body copy.
This is for explanatory helper text that appears below a field title within a component. This is for explanatory helper text that appears below a field title within a component.
This is for legal copy appearing in product pages. This is for legal copy appearing in web pages. 

  <goat-text type="code">
    This is for inline code snippets and smaller code elements.
  </goat-text>
  <goat-text type="code" expressive="true">
    This is for large code snippets and larger code elements.
  </goat-text>

  <br>

  <goat-text type="label">
    This is a multipurpose type style that can be used for field labels in components, error messages, and captions. It
    should not be used for body copy.
  </goat-text>

  <goat-text type="label" expressive="true">
    This is a multipurpose type style that can be used for field labels in components, error messages, and captions. It
    should not be used for body copy.
  </goat-text>

  <br>

  <goat-text type="helper-text">
    This is for explanatory helper text that appears below a field title within a component.
  </goat-text>
  <goat-text type="helper-text" expressive="true">
    This is for explanatory helper text that appears below a field title within a component.
  </goat-text>

  <br>

  <goat-text type="legal">
    This is for legal copy appearing in product pages.
  </goat-text>
  <goat-text type="legal" expressive="true">
    This is for legal copy appearing in web pages.
  </goat-text>
Fluid heading styles The fluid heading styles are primarily used in web pages, and are therefore part of the expressive set of type styles. These headings are responsive and the type styles actually change size incrementally (almost imperceptibly) between the different breakpoints — hence the name “fluid.”
This is for component and layout headings. This is for layout headings. This is for layout headings. This is for layout headings. 

  <goat-text type="fluid-heading" heading-size="3">
    This is for component and layout headings.
  </goat-text>
  <goat-text type="fluid-heading" heading-size="4">
    This is for layout headings.
  </goat-text>
  <goat-text type="fluid-heading" heading-size="5">
    This is for layout headings.
  </goat-text>
  <goat-text type="fluid-heading" heading-size="6">
    This is for layout headings.
  </goat-text>
Color Variants
Primary Secondary Tertiary / Helper Error Inverse
Primary
Primary 

  <goat-text type="text">Primary</goat-text>
  <goat-text type="text" color="secondary">Secondary</goat-text>
  <goat-text type="text" color="tertiary">Tertiary / Helper</goat-text>
  <goat-text type="text" color="error">Error</goat-text>
  <goat-text type="text" color="inverse">Inverse</goat-text>

  <style>
    .custom {
      --text-color: var(--color-green-50);
    }
  </style>

  <div class="custom">
    <goat-text type="text">Primary</goat-text>
  </div>

  <div style="color: brown">
    <goat-text type="text" class="inherit">Primary</goat-text>
  </div>
Fixed heading styles Body styles Utility styles Fluid heading styles Color Variants
Work in progress
Properties
Events
Methods
CSS Custom Properties
Previous Next