Skip to main content

Adding modules

Modules are the fundamental building blocks of an MWF web page. So, it is important to understand what they are and how they are used.

Basic principles

For modules, MWF markup is required, not optional, to achieve optimal performance and meet strict accessibility guidelines. Adding custom markup, styles and behaviors will increase risk of compliancy violations, unexpected bugs or regressions, and limit your ability to recieve design system updates for free.

Building pages with modules is the recommended approach to quickly achieving the high fidelity consistency and stability shared across other Microsoft properties.

Think of modules as cross sections of a page stacked one on top of another composed from components. When using modules, their position, including all margins and padding are programmatically determined based on their relationships to one another. Modules even include their own grid when appropriate.

Always start building with modules. If you don't see a module that fits your needs, simply ask. Majority of module requests with a business priority are completed within 1 sprint and are made available as soon as completed through our continuous integration style sheet.

The making of a hero item module

  • m-hero-item: Modules are referenced with "m-" class selectors.
  • f-medium: Options are referenced with "f-" class selectors. This option sets the size.
  • f-x-left: Sets the horizontal left position.
  • f-y-top: Sets the vertical top position.
  • context-accessory: This context is referenced with "context-" class selector and represents a shift in behavior, style, and position within a module for an accessory.
  • theme-dark: One of two themes can be applies by a "theme-" class selector, theme-dark or theme-light.

<section class="m-hero-item f-medium f-x-left f-y-top context-accessory theme-dark">
    <!-- The picture element and its containing elements are required to serve responsive, highly crafted, optimized and accessible images for each viewport. -->
    <picture>
        <!-- The source elements contain reference for each image at different viewport sizes -->
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" 
            media="(min-width: 1779px)">
        <source srcset="http://placehold.it/1600x600/2F2F2F/171717" 
            media="(min-width: 1400px)">
        <source srcset="http://placehold.it/1259x472/2F2F2F/171717" 
            media="(min-width: 1084px)">
        <source srcset="http://placehold.it/1083x609/2F2F2F/171717" 
            media="(min-width:768px)">
        <source srcset="http://placehold.it/767x431/2F2F2F/171717" 
            media="(min-width:540px)">
        <source srcset="http://placehold.it/539x303/2F2F2F/171717" 
            media="(min-width:0)">
        <!-- A single img element contains the value for the current viewport size including alternative text for screen readers -->
        <img srcset="http://placehold.it/1259x472/2F2F2F/171717" 
            src="http://placehold.it/1259x472/2F2F2F/171717" 
            alt="Placeholder with grey background and dimension watermark without any imagery">
    </picture>
    <div>
        <div>
            <h1 class="c-heading">Heading</h1>
            <p class="c-subheading">Subheading</p>
            <!-- Search engines, web crawlers, and browsers can extract and process Microdata (itemprop's) from a web page and use it to provide a richer browsing experience for users -->
            <div class="c-price" itemprop="offers" itemscope itemtype="http://schema.org/Offer">
                <meta itemprop="priceCurrency" content="USD">
                <span>$</span>
                <span itemprop="price">10</span>
                <link itemprop="availability" href="http://schema.org/InStock">
            </div>
            <div>
                <a href="#" class="c-call-to-action c-glyph">
                    <span>CALL TO ACTION</span>
                </a>
            </div>
        </div>
    </div>
</section>
    

NOTE: MWF markup is required, not optional, to achieve optimal performance and meet strict accessibility guidelines. Adding custom markup, styles and behaviors will increase risk of compliancy violations, bugs, and regressions.