Gatsby custom components
These are custom MWF components built on a Gatsby.js platform verified by Ten Gun QA. They are ready for use on projects using Gatsby.js.
Content placement with pagination
Attributes:
- headline: heading text
- paragraph: paragraph text
- badge: badge text (leave blank for none)
- badge-color: options: #99d5f7 (light blue), #29abe1 (blue), white
- image: image file location
- alt: alt text
- cta-text: cta text
- cta-url: cta url (where the link directs users)
- cta-data-bi-name: analytics data-bi-name
- cta-data-bi-id: analytics data-bi-id
- cta-aria: cta aria label
Test BadgeTest content Placement Headline 1
This is the paragraph for the content placement. This is where we'll write some text for the content placement.
Learn moreTest BadgeTest content Placement Headline 2
This is the paragraph for the content placement. This is where we'll write some text for the content placement.
Learn moreTest BadgeTest content Placement Headline 3
This is the paragraph for the content placement. This is where we'll write some text for the content placement.
Learn more
- Test Badge
Test content Placement Headline 4
This is the paragraph for the content placement. This is where we'll write some text for the content placement.
Learn moreTest BadgeTest content Placement Headline 5
This is the paragraph for the content placement. This is where we'll write some text for the content placement.
Learn moreTest BadgeTest content Placement Headline 6
This is the paragraph for the content placement. This is where we'll write some text for the content placement.
Learn more
- Test Badge
Test content Placement Headline 7
This is the paragraph for the content placement. This is where we'll write some text for the content placement.
Learn moreTest BadgeTest content Placement Headline 8
This is the paragraph for the content placement. This is where we'll write some text for the content placement.
Learn more
Event Calendar
Attributes:
- file: location of json file used to populate calendar
(Area Heading works with 0-4 ctas. See example below for adding multiple ctas)
Test Event 6
Backstage
View detailsTest Event 4
Upcoming EventsTest Event
Backstage
Download pdf
Watch VideoTest Event 2
SpotlightTest Event 3
StarsTest Event 5
Past Conferences<event-calendar></event-calendar>
Filtered list
Attributes:
Hero Audio Embed
Attributes:
- headline: heading text
- subheadline: subheadline text
- vp1-vp3: image path (see below for example of sizes for different breakpoints)
- alt: alt text
- aria: aria-label
- audio-src: audio file
- audio-data-bi-name: tagging for audio file
- audio-data-bi-id: tagging for audio file
- download-src: download source file
- download-data-bi-name: tagging for audio file
- download-data-bi-id: tagging for audio file
- download-text: cta text
- download-aria: cta aria label
Hero Quiz
Attributes:
none
Which websites must be registered?
Answer a few brief questions
Custom Mosaic
Attributes:
- headline: heading text
- vp1-vp5: image path (see below for example of sizes for different breakpoints)
- alt: alt text
- background: options: blue, lightblue, green
- theme: options: light or dark
- mask: options: 20, 40, 50, 60, 80, 100
- cta-text: cta text
- cta-url: cta url (where the link directs users)
- cta-data-bi-name: analytics data-bi-name
- cta-data-bi-id: analytics data-bi-id
- cta-aria: cta aria label (mosiac works with either 3 slides )
<mwf-mosaic-custom
headline-1="AI"
alt-1="mosaic alt text"
vp3-1="/images/CAI-Careers_Mosaic-Square_AI_1084_890x800.jpg"
vp2-1="/images/CAI-Careers_Mosaic-Square_AI_0_768x400.jpg"
vp1-1="/images/CAI-Careers_Mosaic-Square_AI_542x400.jpg"
cta-text-1="Link to curated project details page"
cta-url-1="#"
cta-aria-1="Placeholder aria label"
cta-data-bi-name-1="placeholder"
cta-data-bi-id-1="placeholder"
headline-2="Fluent UI"
vp1-2="/images/CAI-Careers_Mosaic-Square_FluentUI_542x400.jpg"
alt-2="mosaic alt text"
cta-text-2="Link to curated project details page"
cta-url-2="#"
cta-aria-2="Placeholder aria label"
cta-data-bi-name-2="placeholder"
cta-data-bi-id-2="placeholder"
theme-2="dark"
headline-3="Mosaic Test"
vp1-3="/images/CAI-Careers_Mosaic-Wide_Azure_1083x400.jpg"
alt-3="mosaic alt text"
cta-text-3="Link to curated project details page"
cta-url-3="#"
cta-aria-3="Placeholder aria label"
cta-data-bi-name-3="placeholder"
cta-data-bi-id-3="placeholder">
</mwf-mosaic-custom>
Padding
Attributes:
There are built in spacing divs that you can use to add space between components on your page.
Spacing with className = "static" stay the same at all breakpoints. Spacing with className = "pad" will not add padding at mobile breakpoints.
Use \ tag to add a line break on the page.
static12
static24
static48
static96
pad12
pad24
pad48
pad96
static12
<div className="static12"></div>
static24
<div className="static24"></div>
static48
<div className="static48"></div>
static96
<div className="static96"></div>
pad12
<div className="pad12"></div>
pad24
<div className="pad24"></div>
pad48
<div className="pad48"></div>
pad96
<div className="pad96"></div>
Social Share
Attributes:
<mwf-social-share>
</mwf-social-share>
Parallax
Attributes:
Parallax wraps around the components that should appear inside of it. It will require spacers on either end.
Module Placeholder
Any type of element can go here inside the parallax wrapper.
<mwf-parallax>
<div className="static96"></div>
<mwf-area-heading
headline="Let the Games begin – Register Today!"
headline-level="2"
subheadline="Reserve your ticket to changeable game world of the Kingdom of Fluff, live worldwide on June 23-24th at 9am PT/7pm GMT+3.<br> <a href='/bluehat/BlueHat-2021_Game-Changer-Contest_Official-Rules.pdf' aria-label='Read game terms and conditions here, downloads the terms and conditions P D F' download>Read game terms and conditions here.</a>"
paragraph="">
</mwf-area-heading>
<div className="static96"></div>
<div className="static96"></div>
</mwf-parallax>
Quote
Attributes:
- quote: quote text
- byline: byline text (Quote works with 1-4 quotes)
Microsoft websites reinforce our brand. Our websites must be in compliance to deliver an experience people trust and value.
Chris Capossela, Chief Marketing Officer and EVPNever gonna give you up. Never gonna say goodbye.
Rick Astley, 27 July, 1987
<mwf-quote-image
quote-1="Microsoft websites reinforce our brand. Our websites must be in compliance to deliver an experience people trust and value."
byline-1="Chris Capossela, Chief Marketing Officer and EVP"
image-1="/images/WMC-DES-CL-Capossela_200x200.png"
imageAlt-1="Microsoft Chief Marketing Officer and EVP Chris Capossela."
quote-2="Never gonna give you up. Never gonna say goodbye."
byline-2="Rick Astley, 27 July, 1987"
image-2="/images/WMC-DES-CL-Capossela_200x200.png"
imageAlt-2="Rick Astley">
</mwf-quote-image>
Sneak Slider
Attributes:
- headline: headline text
- subheadline: subheadline text
- paragraph: paragraph text
- cta-url: url the cta should follow
- cta-text: cta text
- cta-aria: cta-aria
- image: image src
- alt: image alert Note: Sneak slider can handle multiple slides. The above attribues should be used with "-1" etc after them to differentiate slides.
Cassie Klingler
Principal Design Manager
We're trying to modernize some STEM learnings and make it accessible to all students.
View jobs like this
Lightbox
Attributes:
- button-text: text to show in the trigger button
- id: id for lightbox (can only be used once per page)
- video-src: src file for the video in the lightbox
<mwf-lightbox
button-text="trigger"
id="test-lightbox"
video-src="https://www.microsoft.com/en-us/videoplayer/embed/RE1LGmb?autoplay=false">
</mwf-lightbox>