Skip to main content

Adding components

For advanced user's who have already mastered building pages with existing modules you may be ready to build your own page or module from existing components.

Components are the most granular object's of MWF and always fill the space provided by the grid or parent containing element.

Wrap your component inside the grid container, define your column structure and assign any special options you may require. We recommend adding data grid attributes to define our structure first "col-", followed by class selectors for style "c-", then options "f-", then behaviors "js-" to improve readability.

Including a feature component in your page.

  • col-12: Compose structure first.
  • c-feature: Reference "c-" class selectors.
  • f-align-right: Set option for content alignment position.

<section data-grid="col-12" class="c-feature f-align-right">
    <picture>
        <!-- By design a couple viewports are not required for feature -->
        <source 
            srcset="images/feature-right-vp4.jpg" media="(min-width:1084px)">
        <source 
            srcset="images/feature-right-vp2.jpg" media="(min-width:540px)">
        <source 
            srcset="images/feature-right-vp1.jpg" media="(max-width:539px)">
        <img srcset="images/feature-right-vp4.jpg" 
            src="images/feature-right-vp4.jpg" alt="Surface pro displaying note-taking app." />
    </picture>
    <div>
        <!-- h1, h2, h3, ... on are dependent on the semantic content and should be changed when appropriate for SEO, however the class selector shall be maintained for styling -->
        <h1 class="c-heading">Creative canvas</h1>
        <p class="c-paragraph">Turn the screen around and reattach it to use Surface Book like a creative canvas. 
        By reconnecting it to the keyboard, you unlock its full creative power in a pen first mode. Use the multi-touch 
        PixelSense™ screen and Surface Pen to create with all the desktop software you already use, like Adobe® Photoshop®
        and Illustrator.</p>
        <a href="#" class="c-call-to-action c-glyph">Buy now</a>
    </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.