Skip to main content

Typographic intro

A typographic intro is an informational, structural heading that goes at the top of the page and extends the full viewport width. A typographic intro can integrate with the transparent header and can have a customizable background of neutral and brand colors, similar to mosaic and feature background color customization.

Example

Getting Started with MWF

MWF works together as a series of page types, modules, and components. It’s a system that allows site authors to consider how best to tell the story of Microsoft products and services with confidence that the modular pieces will support and work together. If you are new to MWF, take a look at the general workflows for designers and developers, or get started by downloading our files or connecting to our CDN. If you need further help, reach out to the MWF community.

Best practices

A typographic intro provides clear and concise heading and description that sets up the content on the page. Similar to hero, it has the same top-of-page position and can be paired with a transparent header. However, this module is not meant to highlight one specific product or action, and the main goal is not to navigate away, but to provide a set up for the content below.

Do

  • Use a clear and concise heading that describes the page.
  • Be mindful of the size of the paragraph content. Ideally, a longer description and a shorter description have distinct sizes that fit well for two columns and one, respectively.

Don’t

  • Don't use content and a call to action that does not tie in closely as an introduction to the rest of the page.

Also known as

Jumbotron
Spotlight

Related

Hero item
Carousel

Options

  • Transparent Header: Add a class of f-transparent when using typographic intro with the transparent header.
  • Brief: Add a class of f-brief to utilize the compact version of typographic intro.
  • Background Color: Use the f-background-* classes to style the background color of a typographic inro module, by default no background color is set. The table below shows possible options:
Class Color
.f-background-neutral-10
neutral-10
.f-background-neutral-20
neutral-20
.f-background-neutral-30
neutral-30
.f-background-neutral-45
neutral-45
.f-background-neutral-55
neutral-55
.f-background-neutral-65
neutral-65
.f-background-neutral-75
neutral-75
.f-background-neutral-80
neutral-80
.f-background-neutral-90
neutral-90
.f-background-neutral-100
neutral-100
.f-background-accent
accent

Development

  • Schema definition: The typographic-intro schema defines the acceptable configurations, requirements, and options for each module.

Code and preview

Long typographic intro (for use with default header)

Typography

Our typeface for Microsoft digital designs is Segoe UI. It offers a clean, light and open aesthetic that compliments the content in the system. We use a minimum of weights and sizes. On the web, Segoe UI needs to scale elegantly for different browser sizes. We’ve introduced a detailed responsive system where type sizes and weights adjust based on the user’s screen or browser size and work together through recommended pairings and sets. This allows our type ramp to always look beautiful and balanced with the rest of the page content regardless of device or browser window size.

<section class="m-typographic-intro f-background-accent">
    <div>
        <div>
            <h1 class="c-heading">Typography</h1>
            <p class="c-subheading">Our typeface for Microsoft digital designs is Segoe UI. It offers a clean, light and open aesthetic that compliments the content in the system. We use a minimum of weights and sizes. On the web, Segoe UI needs to scale elegantly for different
                browser sizes. We’ve introduced a detailed responsive system where type sizes and weights adjust based on the user’s screen or browser size and work together through recommended pairings and sets. This allows our type ramp to always look
                beautiful and balanced with the rest of the page content regardless of device or browser window size.</p>
        </div>
    </div>
</section>

Brief typographic intro (for use with default header)

Typography

Our typeface for Microsoft digital designs is Segoe UI. It offers a clean, light and open aesthetic that compliments the content in the system. We use a minimum of weights and sizes.

<section class="m-typographic-intro f-background-accent f-brief">
    <div>
        <div>
            <h1 class="c-heading">Typography</h1>
            <p class="c-subheading">Our typeface for Microsoft digital designs is Segoe UI. It offers a clean, light and open aesthetic that compliments the content in the system. We use a minimum of weights and sizes.</p>
        </div>
    </div>
</section>

Long typographic intro (for use with transparent header)

Typography

Our typeface for Microsoft digital designs is Segoe UI. It offers a clean, light and open aesthetic that compliments the content in the system. We use a minimum of weights and sizes. On the web, Segoe UI needs to scale elegantly for different browser sizes. We’ve introduced a detailed responsive system where type sizes and weights adjust based on the user’s screen or browser size and work together through recommended pairings and sets. This allows our type ramp to always look beautiful and balanced with the rest of the page content regardless of device or browser window size.

CALL TO ACTION
<section class="m-typographic-intro f-background-accent f-transparent">
    <div>
        <div>
            <h1 class="c-heading">Typography</h1>
            <p class="c-subheading">Our typeface for Microsoft digital designs is Segoe UI. It offers a clean, light and open aesthetic that compliments the content in the system. We use a minimum of weights and sizes. On the web, Segoe UI needs to scale elegantly for different
                browser sizes. We’ve introduced a detailed responsive system where type sizes and weights adjust based on the user’s screen or browser size and work together through recommended pairings and sets. This allows our type ramp to always look
                beautiful and balanced with the rest of the page content regardless of device or browser window size.</p>
            <a href="#" class="c-call-to-action c-glyph">
                <span>CALL TO ACTION</span>
            </a>
        </div>
    </div>
</section>

Brief typographic intro (for use with transparent header)

Typography

Our typeface for Microsoft digital designs is Segoe UI. It offers a clean, light and open aesthetic that compliments the content in the system. We use a minimum of weights and sizes.

<section class="m-typographic-intro f-background-accent f-transparent f-brief">
    <div>
        <div>
            <h1 class="c-heading">Typography</h1>
            <p class="c-subheading">Our typeface for Microsoft digital designs is Segoe UI. It offers a clean, light and open aesthetic that compliments the content in the system. We use a minimum of weights and sizes.</p>
        </div>
    </div>
</section>