AisHeadline

The AisHeadline component encapsulates the UIDS headline styles and renders semantic heading elements (h1–h6). Headlines are fluid and adjust their size based on the browser window. Use the level, font, underline, and highlight props to customize the appearance. Use the div prop to render a div element instead of a heading element.

AisHeadline is intended for situations where you are trying to match UIDS styles. Headlines may not integrate smoothly with other components at this time due to things like size differences, but we want to start providing the tools to match UIDS styles when appropriate. Please provide feedback on Slack.

Note: This component is subject to change. Please let us know if you are using this component.

Default

AisHeadline renders an h1 element with the serif font by default.

Default Headline

<template>
  <AisHeadline>Default Headline</AisHeadline>
</template>

<script setup>
  import AisHeadline from '../AisHeadline.vue';
</script>

Props

level

The level prop is used to define the heading level. Valid values are h1 to h6. Note that sans level h1 renders as serif as specified by UIDS.

serif

sans

caps

Your Story Starts Here

Your Story Starts Here

Your Story Starts Here

Your Story Starts Here

Your Story Starts Here

Your Story Starts Here

<script setup lang="ts">
  import {ref} from 'vue';
  import AisHeadline from '../AisHeadline.vue';
  import {AisRadioGroup} from "@ais-public/ais-components";
  import type {Ref} from 'vue';
  import type {HeadlineFont, HeadlineLevel} from "@c/headline/types";

  const levels: HeadlineLevel[] = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
  const font: Ref<HeadlineFont> = ref('serif');
</script>

<template>
  <div class="grid gap-4">
    <AisRadioGroup
      :options="['serif', 'sans', 'caps']"
      v-model="font"
    />
    <div>
      <template v-for="level in levels" :key="level">
        <!--      <AisHeadline :level="level" font="caps">Headline '{{level}}'</AisHeadline>-->
        <AisHeadline :level :font>Your Story Starts Here</AisHeadline>
      </template>
    </div>
  </div>
</template>

underline

The boolean prop underline triggers the iconic UIDS gold underline style.

Underlined Headline

<script setup lang="ts">
  import AisHeadline from '../AisHeadline.vue';
</script>

<template>
  <AisHeadline underline level="h4">
    Underlined Headline
  </AisHeadline>
</template>

highlight

The boolean prop highlight triggers the block gold highlight treatment seen on sites like Iowa Now. The highlight prop should be used sparingly.

Highlighted Headline

<script setup lang="ts">
  import AisHeadline from '../AisHeadline.vue';
</script>

<template>
  <AisHeadline highlight level="h4">
    Highlighted Headline
  </AisHeadline>
</template>

font

The font prop toggles between the brand fonts. Valid values are serif (Zilla), sans (Roboto), and caps (Antonio). serif is the default value and should be preferred for page-level headlines. caps should be used sparingly.

Headline in serif

serif

sans

caps

<script setup lang="ts">
  import {ref} from 'vue';
  import AisHeadline from '../AisHeadline.vue';
  import {AisRadioGroup} from "@ais-public/ais-components";
  import type {Ref} from 'vue';
  import type {HeadlineFont} from "@c/headline/types";

  const font: Ref<HeadlineFont> = ref('serif');
</script>

<template>
  <div class="grid gap-4">
    <AisHeadline :font="font" level="h4">
      Headline in {{ font }}
    </AisHeadline>

    <AisRadioGroup
      :options="['serif', 'sans', 'caps']"
      v-model="font"
    />
  </div>
</template>

div

The div prop is a boolean property that allows the component to render as a div element instead of a header element like h1 or h2. This should be used when you want to simulate a presentation that does not fit in your heading hierarchy. View source for the example below to confirm it matches the html.

Div Headline

<script setup>
  import AisHeadline from '../AisHeadline.vue';
</script>

<template>
  <AisHeadline div level="h3">
    Div Headline
  </AisHeadline>
</template>

<div class="headline h3 headline--serif">Div Headline </div>