Attributes:

• headline: heading text
• paragraph: paragraph text (can use inline links)
• close-button: true or false
• type: error (yellow), warning (red), or info (grey)

<mwf-alert
  headline="This is an alert!"
  paragraph="This is an example of an error alert with an inline <a href='/'>link</a>."
  close-button="true"
  type="error">
</mwf-alert>  

<mwf-alert
  headline="This is an alert!"
  paragraph="This is an example of a warning alert"
  close-button="false"
  type="warning">
</mwf-alert>  

<mwf-alert
  headline="This is an alert!"
  paragraph="This is an example of an info alert"
  close-button="false"
  type="info">
</mwf-alert>  

Attributes:

• headline: heading text
• headline-level: 1,2 (sets the h1, h2, h3, h4 level)
• subheadline: subheading text
• paragraph: paragraph text
• cta-text-1: call to action text
• cta-url-1: call to action url
• cta-data-bi-name-1: call to action data bi name for analytics
• cta-data-bi-id-1: call to action data bi id for analytics
• cta-aria-1: cta aria label

(Area Heading works with 0-4 ctas. See example below for adding multiple ctas)

<mwf-area-heading
  headline="On the Main Stage"
  headline-level="2"
  subheadline="BlueHat highlights the best security research the community has to offer. We turn our <b>Spotlight</b> to ‘top of mind’ security topics & deep dive <b>BackStage</b> into vulnerability research."
  paragraph="Test paragraph text goes here.  This is where the paragraph goes."
  cta-text-1="Click here"
  cta-url-1="/"
  cta-data-bi-name-1="test data bi"
  cta-data-bi-id-1="test_data_bi"
  cta-aria-1="Placeholder aria label"
  cta-text-2="Learn more"
  cta-url-2="/"
  cta-data-bi-name-2="test data bi"
  cta-data-bi-id-2="test_data_bi
  cta-aria-2="Placeholder aria label">
</mwf-area-heading>

Attributes:

• headline: heading text
• paragraph: paragraph text
• background: options: none, black, gray;
• logo-image: image for logo
• logo-title: title for logo
• logo-alt: alt for logo
• logo-aria: aria for logo
• cta-text: call to action text
• cta-url: call to action url
• cta-data-bi-name: call to action data bi name for analytics
• cta-data-bi-id: call to action data bi id for analytics
• cta-aria: cta aria label

logo title

On the Main Stage

Test paragraph text goes here. This is where the paragraph goes.

Learn more

<mwf-banner
  headline="On the Main Stage"
  paragraph="Test paragraph text goes here.  This is where the paragraph goes."
  logo-image="/images/100x30.png"
  logo-title="logo title"
  logo-alt="placeholder alt"
  logo-aria="placeholder aria label"
  cta-text="Learn more"
  cta-url="#"
  cta-data-bi-name="banner cta"
  cta-data-bi-id="banner_cta"
  cta-aria="placeholder aria label">
</mwf-banner>

logo title

On the Main Stage

Test paragraph text goes here. This is where the paragraph goes.

Learn more

<mwf-banner
  headline="On the Main Stage"
  paragraph="Test paragraph text goes here.  This is where the paragraph goes."
  background="black"
  logo-image="/images/100x30.png"
  logo-title="logo title"
  logo-alt="placeholder alt"
  logo-aria="placeholder aria label"  
  cta-text="Learn more"
  cta-url="#"
  cta-data-bi-name="banner cta"
  cta-data-bi-id="banner_cta"
  cta-aria="placeholder aria label">
</mwf-banner>

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

Content placements - 2 placements

Test Badge

Test content Placement Headline

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

This is the paragraph for the content placement. This is where we'll write some text for the content placement.

Learn more

<mwf-content-placement
  badge-1="Test Badge"
  badge-color-1="#29abe1"
  headline-1="Test content Placement Headline"
  paragraph-1="This is the paragraph for the content placement.  This is where we'll write some text for the content placement."
  image-1="/images/BlueHat-Feature-Characters-1040x585.jpg"
  alt-1="Test alt"
  cta-text-1="Learn more"
  cta-url-1="/"
  cta-data-bi-name-1="test data bi"
  cta-data-bi-id-1="test_data_bi"
  cta-aria-1="Placeholder aria label"
  badge-2="Test Badge"
  badge-color-2="white"
  headline-2="Test content Placement Headline"
  paragraph-2="This is the paragraph for the content placement.  This is where we'll write some text for the content placement."
  image-2="/images/BlueHat-Feature-Characters-1040x585.jpg"
  alt-2="Test alt"
  cta-text-2="Learn more"
  cta-url-2="/"
  cta-data-bi-name-2="test data bi"
  cta-data-bi-id-2="test_data_bi"
  cta-aria-2="Placeholder aria label">
</mwf-content-placement>

Content placements - 3 placements

Test Badge

Test content Placement Headline

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

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

This is the paragraph for the content placement. This is where we'll write some text for the content placement.

Learn more

<mwf-content-placement
  badge-1="Test Badge"
  badge-color-1="#99d5f7"
  headline-1="Test content Placement Headline"
  paragraph-1="This is the paragraph for the content placement.  This is where we'll write some text for the content placement."
  image-1="/images/BlueHat-Feature-Characters-1040x585.jpg"
  alt-1="Test alt"
  cta-text-1="Learn more"
  cta-url-1="/"
  cta-data-bi-name-1="test data bi"
  cta-data-bi-id-1="test_data_bi"
  cta-aria-1="Placeholder aria label"
  badge-2="Test Badge"
  badge-color-2="#99d5f7"
  headline-2="Test content Placement Headline"
  paragraph-2="This is the paragraph for the content placement.  This is where we'll write some text for the content placement."
  image-2="/images/BlueHat-Feature-Characters-1040x585.jpg"
  alt-2="Test alt"
  cta-text-2="Learn more"
  cta-url-2="/"
  cta-data-bi-name-2="test data bi"
  cta-data-bi-id-2="test_data_bi"
  cta-aria-2="Placeholder aria label"
  badge-3="Test Badge"
  badge-color-3="#99d5f7"
  headline-3="Test content Placement Headline"
  paragraph-3="This is the paragraph for the content placement.  This is where we'll write some text for the content placement."
  image-3="/images/BlueHat-Feature-Characters-1040x585.jpg"
  alt-3="Test alt"
  cta-text-3="Learn more"
  cta-url-3="/"
  cta-data-bi-name-3="test data bi"
  cta-data-bi-id-3="test_data_bi"
  cta-aria-3="Placeholder aria label">
</mwf-content-placement>

Content placements - 4 placements

Test Badge

Test content Placement Headline

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

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

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

This is the paragraph for the content placement. This is where we'll write some text for the content placement.

Learn more

<mwf-content-placement
  badge-1="Test Badge"
  badge-color-1="white"
  headline-1="Test content Placement Headline"
  paragraph-1="This is the paragraph for the content placement.  This is where we'll write some text for the content placement."
  image-1="/images/BlueHat-Feature-Characters-1040x585.jpg"
  alt-1="Test alt"
  cta-text-1="Learn more"
  cta-url-1="/"
  cta-data-bi-name-1="test data bi"
  cta-data-bi-id-1="test_data_bi"
  cta-aria-1="Placeholder aria label"
  badge-2="Test Badge"
  badge-color-2="white"
  headline-2="Test content Placement Headline"
  paragraph-2="This is the paragraph for the content placement.  This is where we'll write some text for the content placement."
  image-2="/images/BlueHat-Feature-Characters-1040x585.jpg"
  alt-2="Test alt"
  cta-text-2="Learn more"
  cta-url-2="/"
  cta-data-bi-name-2="test data bi"
  cta-data-bi-id-2="test_data_bi"
  cta-aria-2="Placeholder aria label"
  badge-3="Test Badge"
  badge-color-3="#99d5f7"
  headline-3="Test content Placement Headline"
  paragraph-3="This is the paragraph for the content placement.  This is where we'll write some text for the content placement."
  image-3="/images/BlueHat-Feature-Characters-1040x585.jpg"
  alt-3="Test alt"
  cta-text-3="Learn more"
  cta-url-3="/"
  cta-data-bi-name-3="test data bi"
  cta-data-bi-id-3="test_data_bi"
  cta-aria-3="Placeholder aria label"
  badge-4="Test Badge"
  badge-color-4="#99d5f7"
  headline-4="Test content Placement Headline"
  paragraph-4="This is the paragraph for the content placement.  This is where we'll write some text for the content placement."
  image-4="/images/BlueHat-Feature-Characters-1040x585.jpg"
  alt-4="Test alt"
  cta-text-4="Learn more"
  cta-url-4="/"
  cta-data-bi-name-4="test data bi"
  cta-data-bi-id-4="test_data_bi"
  cta-aria-4="Placeholder aria label">
</mwf-content-placement>

Attributes:

• html/markdown: Content Rich as either markdown or html on page

HTML example: Content rich block four up with button

Content rich block four up with button
<div class="flex">
  <div data-grid="col-12 pad-6x stack-3" class="m-rich-content-block">
      <div data-grid="col-3">
          <h2 class="c-heading-2">Heading</h2>
          <h3 class="c-heading-4">Subheading</h3>
          <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.</p>
          <a href="#" aria-label="placeholder aria label" class="c-call-to-action c-glyph">
              <span>Call To Action</span>
          </a>
      </div>
      <div data-grid="col-3">
          <h2 class="c-heading-2">Heading</h2>
          <h3 class="c-heading-4">Subheading</h3>
          <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.</p>
          <a href="#" aria-label="placeholder aria label" class="c-call-to-action c-glyph">
              <span>Call To Action</span>
          </a>
      </div>
      <div data-grid="col-3">
          <h2 class="c-heading-2">Heading</h2>
          <h3 class="c-heading-4">Subheading</h3>
          <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.</p>
          <a href="#" aria-label="placeholder aria label" class="c-call-to-action c-glyph">
              <span>Call To Action</span>
          </a>
      </div>
      <div data-grid="col-3">
          <h2 class="c-heading-2">Heading</h2>
          <h3 class="c-heading-4">Subheading</h3>
          <p class="c-paragraph-1">Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.</p>
          <a href="#" aria-label="placeholder aria label" class="c-call-to-action c-glyph">
              <span>Call To Action</span>
          </a>
      </div>
    </div>
  </div>

Markdown example: Built-in markdown styling

Heading 1

Heading 2

Subheading 3

Subheading 4

Subheading 5

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.

Emphasize Strong

A link.

Bulleted List:

• Item
• Item

Numbered List:

1. Item
2. Item

Mixed List:

1. Item

2. Item

   • Mixed
   • Mixed
3. Item

#Heading 1
##Heading 2
###Subheading 3
####Subheading 4
#####Subheading 5
Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet. Suspendisse eu tortor quis odio faucibus tempus sed vitae ipsum.  

*Emphasize*
**Strong**

A [link](http://example.com "Title").

I have more [^1] to say up here (check bottom of page for footnote).  

[^1]: To say down here.  

**Bulleted List:**

- Item
- Item

**Numbered List:**

1. Item
2. Item

**Mixed List:**

1. Item
2. Item
    - Mixed
    - Mixed  
3. Item

Attributes:

• label: Drawer label
• expanded: options: true or false

Drawer wraps the elements that should appear inside of it.

Test drawer

This is some markdown text inside the drawer. You can put anything inside the drawer including other components. Here is an example of an image inside the drawer...

<mwf-drawer label="Test drawer" expanded="true">

This is some markdown text inside the drawer.  You can put anything inside the drawer including other components.  Here is an example of an image inside the drawer...

<mwf-image
  vp5="/images/BlueHat-Image-Footer-1400_2048x600.jpg"
  vp4="/images/BlueHat-Image-Footer-1400_2048x600.jpg"
  vp3="/images/BlueHat-Image-Footer-1400_2048x600.jpg"
  vp2="/images/BlueHat-Image-Footer-768_1083x500.jpg"
  vp1="/images/BlueHat-Image-Footer-0_767x400.jpg"
  alt="Pixelated illustration of a house plant and cat across from a desk with  laptop, coffee mug, small fish bowl">
</mwf-image>

</mwf-drawer>

Attributes:

• headline: heading text
• headline-level: options: 1, 2, 3, 4 (corresponds to html h1-h4)
• paragraph: paragraph text
• vp1-vp3: image path (see below for example of sizes for different breakpoints)
• alt: alt text
• align: options: right (text on right), left (text on left)
• 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

Lorem ipsum dolor

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet.

Learn more

<mwf-feature
  headline="Lorem ipsum dolor"
  headline-level="2"
  paragraph="Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet."
  vp3="/images/BlueHat-Feature-Characters-1040x585.jpg"
  vp2="/images/BlueHat-Feature-Characters-1040x585.jpg"
  vp1="/images/BlueHat-Feature-Characters-1040x585.jpg"
  alt="Placeholder alt"
  cta-text="Learn more"
  cta-url="/"
  cta-data-bi-name="test data bi"
  cta-data-bi-id="test_data_bi"
  cta-aria="Placeholder aria label"
  align="right">
</mwf-feature>

Attributes:

• headline: heading text
• headline-level: options: 1, 2, 3, 4 (corresponds to html h1-h4)
• paragraph: paragraph text
• video: link to onePlayer url
• title: title of the video (needed for accessibility)
• align: options: right (text on right), left (text on left)
• 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

<mwf-video-feature
  headline="Crusty & Rusty: Magical Mavericks"
  headline-level="2"
  paragraph="We are proud to host these prominent wizards who will accompany us on a long and occasionally humorous journey to fill the world with good vibes, solve cryptic riddles and maybe save a kingdom or two."
  video="https://www.microsoft.com/en-us/videoplayer/embed/14b8051b-0100-4185-882c-185a674992a3"
  title="Blue hat logo animation"
  align="right">
</mwf-video-feature>

Attributes:

• title: slide title
• time: video time
• cta-url: cta url
• cta-text: cta text
• cta-aria: cta aria
• video-src: video source url
• video-aria: video aria
• image: placeholder video image
• new-tab: does link open in a new tab or not (default true)

Note: Media gallery can handle as many slides as needed in a carousel. Slides can either have time or cta not both.

<mwf-media-gallery
  title-1="Placeholder Title"
  time-1="hh:mm:ss"
  video-src-1="https://www.microsoft.com/en-us/videoplayer/embed/14b8051b-0100-4185-882c-185a674992a3"
  video-aria-1="Placeholder aria label"
  image-1="/images/358x201.png">
</mwf-media-gallery>

<mwf-media-gallery
  title-1="Placeholder Title"
  time-1="hh:mm:ss"
  video-src-1="https://www.microsoft.com/en-us/videoplayer/embed/14b8051b-0100-4185-882c-185a674992a3"
  video-aria-1="Placeholder aria label"
  image-1="/images/358x201.png">
</mwf-media-gallery>

Attributes:

• headline: heading text
• subheadline: subheading 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 4 or 6 slides )

Mosaic Test

BlueHat is back with a new dedicated home – and a virtual makeover!

Register now

Mosaic Test

BlueHat is back with a new dedicated home – and a virtual makeover!

Mosaic Test

BlueHat is back with a new dedicated home – and a virtual makeover!

Mosaic Test

BlueHat is back with a new dedicated home – and a virtual makeover!

<mwf-mosaic
  headline-1="Mosaic Test"
  subheadline-1="BlueHat is back with a new dedicated home – and a virtual makeover!"
  background-1="blue"
  alt-1="mosaic alt text"
  theme-1="light"
  cta-text-1="Register now"
  cta-url-1="#register"
  cta-aria-1="Placeholder aria label"
  cta-data-bi-name-1="Register CTA"
  cta-data-bi-id-1="register_cta"
  headline-2="Mosaic Test"
  subheadline-2="BlueHat is back with a new dedicated home – and a virtual makeover!"
  vp5-2="/images/WMC-Tech-Chooser-Hero-1084_1920x720.jpg"
  vp4-2="/images/WMC-Tech-Chooser-Hero-1084_1920x720.jpg"
  vp3-2="/images/WMC-Tech-Chooser-Hero-1084_1920x720.jpg"
  vp2-2="/images/WMC-Tech-Chooser-Hero-768_1083x609.jpg"
  vp1-2="/images/WMC-Tech-Chooser-Hero-0_767x431.jpg"
  mask-2="40"
  alt-2="mosaic alt text"
  theme-2="dark"
  headline-3="Mosaic Test"
  subheadline-3="BlueHat is back with a new dedicated home – and a virtual makeover!"
  background-3="lightblue"
  alt-3="mosaic alt text"
  headline-4="Mosaic Test"
  subheadline-4="BlueHat is back with a new dedicated home – and a virtual makeover!"
  background-4="green"
  alt-4="mosaic alt text">
</mwf-mosaic>

Mosaic Test

BlueHat is back with a new dedicated home – and a virtual makeover!

Register now

Mosaic Test

BlueHat is back with a new dedicated home – and a virtual makeover!

Mosaic Test

BlueHat is back with a new dedicated home – and a virtual makeover!

Mosaic Test

BlueHat is back with a new dedicated home – and a virtual makeover!

Mosaic Test

BlueHat is back with a new dedicated home – and a virtual makeover!

Register now

Mosaic Test

BlueHat is back with a new dedicated home – and a virtual makeover!

<mwf-mosaic
  headline-1="Mosaic Test"
  subheadline-1="BlueHat is back with a new dedicated home – and a virtual makeover!"
  background-1="lightblue"
  alt-1="mosaic alt text"
  theme-1="light"
  cta-text-1="Register now"
  cta-url-1="#register"
  cta-aria-1="Placeholder aria label"
  cta-data-bi-name-1="Register CTA"
  cta-data-bi-id-1="register_cta"
  headline-2="Mosaic Test"
  subheadline-2="BlueHat is back with a new dedicated home – and a virtual makeover!"
  vp5-2="/images/WMC-Tech-Chooser-Hero-1084_1920x720.jpg"
  vp4-2="/images/WMC-Tech-Chooser-Hero-1084_1920x720.jpg"
  vp3-2="/images/WMC-Tech-Chooser-Hero-1084_1920x720.jpg"
  vp2-2="/images/WMC-Tech-Chooser-Hero-768_1083x609.jpg"
  vp1-2="/images/WMC-Tech-Chooser-Hero-0_767x431.jpg"
  alt-2="mosaic alt text"
  theme-2="dark"
  headline-3="Mosaic Test"
  subheadline-3="BlueHat is back with a new dedicated home – and a virtual makeover!"
  background-3="lightblue"
  alt-3="mosaic alt text"
  headline-4="Mosaic Test"
  subheadline-4="BlueHat is back with a new dedicated home – and a virtual makeover!"
  background-4="green"
  alt-4="mosaic alt text"
  headline-5="Mosaic Test"
  subheadline-5="BlueHat is back with a new dedicated home – and a virtual makeover!"
  background-5="blue"
  alt-5="mosaic alt text"
  theme-5="light"
  cta-text-5="Register now"
  cta-url-5="#register"
  cta-aria-5="Placeholder aria label"
  cta-data-bi-name-5="Register CTA"
  cta-data-bi-id-5="register_cta"
  headline-6="Mosaic Test"
  subheadline-6="BlueHat is back with a new dedicated home – and a virtual makeover!"
  vp5-6="/images/WMC-Tech-Chooser-Hero-1084_1920x720.jpg"
  vp4-6="/images/WMC-Tech-Chooser-Hero-1084_1920x720.jpg"
  vp3-6="/images/WMC-Tech-Chooser-Hero-1084_1920x720.jpg"
  vp2-6="/images/WMC-Tech-Chooser-Hero-768_1083x609.jpg"
  vp1-6="/images/WMC-Tech-Chooser-Hero-0_767x431.jpg"
  alt-6="mosaic alt text">
</mwf-mosaic>

Attributes:

• headline: heading text
• headline-level: options: 1, 2, 3, 4 (corresponds to html h1-h4)
• paragraph: paragraph text
• image: image path (each slide can use either image or video)
• video: video path (each slide can use either image or video)
• type: options: image, video
• alt: alt text
• title: title of the video (needed for accessibility)
• align: options: right, left
• 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 (multi feature works with 1-6 slides)

<mwf-multi-feature
  headline-1="Spotlight #2: Rust, A “Game Changer”"
  headline-level-1="3"
  type-1="video"
  paragraph-1="Catch BlueHat’s latest Nonference Spotlight – Rust: A Systems Software Game Changer! Discover the issues of memory management and how the Rust programming language is addressing them from Microsoft’s own Izzy Whistlecroft!"
  video-1="https://www.microsoft.com/en-us/videoplayer/embed/RE4OCOT"
  alt-1="Rust: A Systems Software Game Changer, Izzy Whistlecroft Cloud Security. Image of speaker Izzy Whistlecroft"
  title-1="Rust A Game Changer"
  align-1="left"
  headline-2="Boorilla"
  headline-level-2="2"
  paragraph-2="The simian sorcerer."
  image-2="/images/BlueHat-Feature-Boo-1040x585.jpg"
  alt-2="Illustration of a pixelated gorilla character"
  align-2="left"
  cta-text-2="Find out more about the game"
  cta-url-2="/"
  cta-data-bi-name-2="game CTA"
  cta-data-bi-id-2="game_cta"
  cta-aria-2="Placeholder aria label">
</mwf-multi-feature>

Attributes:

• x-align: text x-align options: left, center, right
• y-align: text y-align options: top, center, bottom
• headline: heading text
• headline-level: options: 1, 2, 3, 4 (corresponds to html h1-h4)
• subheadline: subheadline text
• paragraph: paragraph text
• vp1-vp5: image path (see below for example of sizes for different breakpoints)
• alt: alt text
• theme: options: light, dark
• mask: options: 20, 40, 50, 60, 80, 100
• cta-text: cta text
• cta-url: cta url (where the link directs users)
• cta-aria: cta aria text
• cta-data-bi-name: analytics data-bi-name
• cta-data-bi-id: analytics data-bi-id

<mwf-hero
  x-align-1="center"
  y-align-1="bottom"
  headline-1="Nonference 2021 | Let the Games Begin!"
  headline-level-1="1"
  subheadline-1="BlueHat is back with a new dedicated home – and a virtual makeover!"
  paragraph-1='Until we can safely meet again in person, the "Nonference" includes specially designed content and events while staying focused on what matters most to the community, <b>security research</b>.'
  vp5-1="/images/BlueHat_KV-Hero-1084_1920x720.jpg"
  vp4-1="/images/BlueHat_KV-Hero-1084_1920x720.jpg"
  vp3-1="/images/BlueHat_KV-Hero-1084_1920x720.jpg"
  vp2-1="/images/BlueHat_KV-Hero-768_1083x609.jpg"
  vp1-1="/images/BlueHat_KV-Hero-0_767x431.jpg"
  alt-1="BlueHat, animation of a pixelated BlueHat button logo with glowing arrows on either side"
  theme-1="dark"
  mask-1="90"
  cta-text-1="Register now"
  cta-url-1="#register"
  cta-aria-1="Placeholder aria label"
  cta-data-bi-name-1="Register CTA"
  cta-data-bi-id-1="register_cta">
</mwf-hero>

Attributes:

• x-align: text x-align options: left, center, right
• y-align: text y-align options: top, center, bottom
• autoplay: set autoplay to true or false. default is false
• headline: heading text
• headline-level: options: 1, 2, 3, 4 (corresponds to html h1-h4)
• subheadline: subheadline text
• paragraph: paragraph text
• vp1-vp5: image path (see below for example of sizes for different breakpoints)
• alt: alt text
• theme: options: light, dark
• mask: options: 20, 40, 50, 60, 80, 100
• cta-text: cta text
• cta-url: cta url (where the link directs users)
• cta-aria: cta aria label text (include the text of the CTA in the aria label, preferably in the beginning for accessibility)
• cta-data-bi-name: analytics data-bi-name
• cta-data-bi-id: analytics data-bi-id
  (hero carousel works with 1-6 slides)

<mwf-hero
  x-align-1="center"
  y-align-1="bottom"
  autoplay-1="false"
  headline-1="Let the Games Begin!"
  headline-level-1="1"
  subheadline-1="BlueHat is back with a new dedicated home – and a virtual makeover!"
  paragraph-1='Until we can safely meet again in person, the "Nonference" includes specially designed content and events while staying focused on what matters most to the community, <b>security research</b>.'
  vp5-1="/images/BlueHat_KV-Hero-1084_1920x720.jpg"
  vp4-1="/images/BlueHat_KV-Hero-1084_1920x720.jpg"
  vp3-1="/images/BlueHat_KV-Hero-1084_1920x720.jpg"
  vp2-1="/images/BlueHat_KV-Hero-768_1083x609.jpg"
  vp1-1="/images/BlueHat_KV-Hero-0_767x431.jpg"
  alt-1="BlueHat, animation of a pixelated BlueHat button logo with glowing arrows on either side"
  theme-1="dark"
  mask-1="80"
  cta-text-1="Register now"
  cta-url-1="#register"
  cta-aria-1="Placeholder aria label"
  cta-data-bi-name-1="Register CTA"
  cta-data-bi-id-1="register_cta"
  x-align-2="left"
  y-align-2="top"
  headline-2="Headline 2"
  headline-level-2="1"
  subheadline-2="Subheadline 2 goes here"
  paragraph-2='Paragraph 2 goes here'
  vp5-2="/images/BlueHat_KV-Hero-1084_1920x720.jpg"
  vp4-2="/images/BlueHat_KV-Hero-1084_1920x720.jpg"
  vp3-2="/images/BlueHat_KV-Hero-1084_1920x720.jpg"
  vp2-2="/images/BlueHat_KV-Hero-768_1083x609.jpg"
  vp1-2="/images/BlueHat_KV-Hero-0_767x431.jpg"
  alt-2="BlueHat, animation of a pixelated BlueHat button logo with glowing arrows on either side"
  theme-2="dark"
  mask-2="20"
  cta-text-2="CTA 2"
  cta-url-2="#register"
  cta-aria-2="Placeholder aria label"
  cta-data-bi-name-2="Register CTA"
  cta-data-bi-id-2="register_cta">
</mwf-hero>

Attributes:

• x-align: text x-align options: left, center, right
• y-align: text y-align options: top, center, bottom
• super: super hero sized hero options: true, false
• autoplay: autoplay video options: true, false
• behindHeader: Top hero on page behind nav options: true, false
• loop: loop video options: true, false
• headline: heading text
• headline-level: options: 1, 2, 3, 4 (corresponds to html h1-h4)
• subheadline: subheadline text
• paragraph: paragraph text
• video: video path (Hero with animation should be used with animation type videos)
• mobile-image: still image to use at mobile breakpoints
• alt: alt text
• theme: options: light, dark
• cta-text: cta text
• cta-url: cta url (where the link directs users)
• cta-aria: cta aria label text (include the text of the CTA in the aria label, preferably in the beginning for accessibility)
• cta-data-bi-name: analytics data-bi-name
• cta-data-bi-id: analytics data-bi-id

<mwf-video-hero
  x-align="center"
  y-align="bottom"
  super="true"
  autoplay="true"
  behindHeader="true"
  loop="true"
  headline="Nonference 2021 | Let the Games Begin!"
  headline-level="1"
  subheadline="BlueHat is back with a new dedicated home – and a virtual makeover!"
  paragraph='Until we can safely meet again in person, the "Nonference" includes specially designed content and events while staying focused on what matters most to the community, <b>security research</b>.  <b>Next Up:</b> Get ready for a bit of friendly competition - register below for the BlueHat “Game Changer” event happening worldwide on June 23rd, 2021.'
  video="/images/Blackhat_Superhero_1920x1080.mp4"
  mobile-image="/images/BlueHat_Super-Hero-Logo-0_767x431.jpg"
  alt="BlueHat, animation of a pixelated BlueHat button logo with glowing arrows on either side"
  aria="Placeholder aria label"
  theme="dark"
  cta-text="Register now"
  cta-url="#register"
  cta-aria="Placeholder aria label"
  cta-data-bi-name="Register CTA"
  cta-data-bi-id="register_cta">
</mwf-video-hero>

Attributes:

• headline: heading text
• headline-level: options: 1, 2, 3, 4 (corresponds to html h1-h4)
• paragraph: paragraph text
• vp1-vp3: image path (see below for example of sizes for different breakpoints)
• alt: alt text
• align: options: left (text box on left), right (text box on right)
• 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 text

Lorem ipsum dolor

Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet.

Learn more

<mwf-highlight-feature
  headline="Lorem ipsum dolor"
  headline-level="2"
  paragraph="Paragraph lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vitae convallis eros, nec iaculis nisi. Duis imperdiet elementum diam, eu tempor quam tempus sit amet."
  vp3="/images/BlueHat_KV-Hero-1084_1920x720.jpg"
  vp2="/images/BlueHat_KV-Hero-768_1083x609.jpg"
  vp1="/images/BlueHat_KV-Hero-0_767x431.jpg"
  alt="Placeholder alt"
  align="left"
  cta-text="Learn more"
  cta-url="/"
  cta-data-bi-name="test data bi"
  cta-data-bi-id="test_data_bi"
  cta-aria="placeholder aria label">
</mwf-highlight-feature>

Attributes:

• vp1-vp5: image path (see below for example of sizes for different breakpoints)
• alt: alt text

<mwf-image
  vp3="/images/BlueHat-Image-Footer-1400_2048x600.jpg"
  vp2="/images/BlueHat-Image-Footer-768_1083x500.jpg"
  vp1="/images/BlueHat-Image-Footer-0_767x400.jpg"
  alt="Pixelated illustration of a house plant and cat across from a desk with  laptop, coffee mug, small fish bowl">
</mwf-image>

Attributes:

• text: nav text
• href: nav anchor links
• orientation: horizontal (default) or vertical (only needed for 1st tab)
• align: left (default) or center (only needed for 1st tab)
• sticky: true or false (default) (only needed for 1st tab)

Note: In Page Nav works with between 1 and 8 tabs in the navigation

In-page navigation left align horizontal

<mwf-in-page-nav
  text-1="Navigation Link 1"
  href-1="#anchor-1"
  orientation-1="horizontal"
  align-1="left"
  sticky-1="false"
  text-2="Navigation Link 2"
  href-2="#anchor-2"
  text-3="Navigation Link 3"
  href-3="#anchor-3">
</mwf-in-page-nav>

In-page navigation center align horizontal

<mwf-in-page-nav
  text-1="Navigation Link 1"
  href-1="#anchor-1"
  orientation-1="horizontal"
  align-1="center"
  sticky-1="false"
  text-2="Navigation Link 2"
  href-2="#anchor-2"
  text-3="Navigation Link 3"
  href-3="#anchor-3">
</mwf-in-page-nav>

In-page navigation center align horizontal sticky

Preview

<mwf-in-page-nav
  text-1="Navigation Link 1"
  href-1="#anchor-1"
  orientation-1="horizontal"
  align-1="center"
  sticky-1="true"
  text-2="Navigation Link 2"
  href-2="#anchor-2"
  text-3="Navigation Link 3"
  href-3="#anchor-3">
</mwf-in-page-nav>

In-page navigation vertical

<mwf-in-page-nav
  text-1="Navigation Link 1"
  href-1="#anchor-1"
  orientation-1="vertical"
  align-1="left"
  sticky-1="false"
  text-2="Navigation Link 2"
  href-2="#anchor-2"
  text-3="Navigation Link 3"
  href-3="#anchor-3">
</mwf-in-page-nav>

In-page navigation vertical sticky

Preview

<mwf-in-page-nav
  text-1="Navigation Link 1"
  href-1="#anchor-1"
  orientation-1="vertical"
  align-1="left"
  sticky-1="true"
  text-2="Navigation Link 2"
  href-2="#anchor-2"
  text-3="Navigation Link 3"
  href-3="#anchor-3">
</mwf-in-page-nav>

Attributes:

• left-align: true or false (defaults to false)
• heading-id: unique id (can only be used once per page)
• heading-level: 1 2 3 4 5 6 (font size will not change, only element tag)
• heading-text: text
• link-href-1: url or anchor
• link-text-1: text
• link-ariaLabel-1: descriptive text of link
• link-external-1: true or false (defaults to false)
• image-src-1: image source (maximum image height: 120px)
• image-alt-1: descriptive text of image

Navigation with links only

<mwf-linked-list>
  link-href-1="#"
  link-text-1="Go here 1"
  link-ariaLabel-1="Go here 1, to learn more about something"
  link-external-1="true"
  link-href-2="#"
  link-text-2="Go here 2"
  link-ariaLabel-2="Go here 2, to learn more about something"
  link-external-2="false"
  link-href-3="#"
  link-text-3="Go here 3"
  link-ariaLabel-3="Go here 3, to learn more about something"
  link-external-3="false">
</mwf-linked-list>

Navigation with links and a heading

<mwf-linked-list>
  heading-id="exampleID"
  heading-level="3"
  heading-text="Example H3 heading"
  link-href-1="#"
  link-text-1="Go here 1"
  link-ariaLabel-1="Go here 1, to learn more about something"
  link-external-1="true"
  link-href-2="#"
  link-text-2="Go here 2"
  link-ariaLabel-2="Go here 2, to learn more about something"
  link-external-2="false"
  link-href-3="#"
  link-text-3="Go here 3"
  link-ariaLabel-3="Go here 3, to learn more about something"
  link-external-3="false">
</mwf-linked-list>

Navigation with links, a heading, and left aligned

<mwf-linked-list>
  left-align="true"
  heading-id="exampleID"
  heading-level="3"
  heading-text="Example H3 heading"
  link-href-1="#"
  link-text-1="Go here 1"
  link-ariaLabel-1="Go here 1, to learn more about something"
  link-external-1="true"
  link-href-2="#"
  link-text-2="Go here 2"
  link-ariaLabel-2="Go here 2, to learn more about something"
  link-external-2="false"
  link-href-3="#"
  link-text-3="Go here 3"
  link-ariaLabel-3="Go here 3, to learn more about something"
  link-external-3="false">
</mwf-linked-list>

Navigation with links, a heading, and images

<mwf-linked-list>
  left-align="false"
  heading-id="exampleID"
  heading-level="3"
  heading-text="Example H3 heading"
  link-href-1="#"
  link-text-1="Go here 1"
  link-ariaLabel-1="Go here 1, to learn more about something"
  link-external-1="true"
  image-src-1="https://via.placeholder.com/120"
  image-alt-1="grey image with 120x120 pixels"
  link-href-2="#"
  link-text-2="Go here 2"
  link-ariaLabel-2="Go here 2, to learn more about something"
  link-external-2="false"
  image-src-2="https://via.placeholder.com/120"
  image-alt-2="grey image with 120x120 pixels"
  link-href-3="#"
  link-text-3="Go here 3"
  link-ariaLabel-3="Go here 3, to learn more about something"
  link-external-3="false"
  image-src-3="https://via.placeholder.com/120"
  image-alt-3="grey image with 120x120 pixels">
</mwf-linked-list>

Example of an H1 Headline

Example of an H2 Headline

Example of an H3 headline

Example of an H4 headline

Here is a paragraph formatted with standard markdown. If they want to add text to their blog pages, they can just type and it will appear like this on the page.

Here is another paragraph. I believe I need to add some css to make all of this work properly.

• Some bullets in markdown
• This is all just done with standard markdown

Here is another paragraph with an inline link in it. You can add links anywhere with markdown.

# Example of an H1 Headline  

## Example of an H2 Headline  

### Example of an H3 headline  

#### Example of an H4 headline  

Here is a paragraph formatted with standard markdown.  If they want to add text to their blog pages, they can just type and it will appear like this on the page.  

Here is another paragraph.  I believe I need to add some css to make all of this work properly.

  - Some bullets in markdown

  - This is all just done with standard markdown

Here is another paragraph with an inline [link]("/") in it.  You can add links anywhere with markdown.

Attributes:

• tabs: define titles for tabs 1 - 7

<mwf-pivot tab1="Module 1" tab2="Module 2" activeIndex="1">

<div>

<mwf-area-heading
  headline="Tab 1 Module Placeholder"
  headline-level="2"
  subheadline=""
  paragraph=""
  cta-text-1=""
  cta-url-1=""
  cta-data-bi-name-1=""
  cta-data-bi-id-1=""
  cta-aria-1="">
</mwf-area-heading>

</div>

<div>

<mwf-area-heading
  headline="Tab 2 Module Placeholder"
  headline-level="2"
  subheadline=""
  paragraph=""
  cta-text-1=""
  cta-url-1=""
  cta-data-bi-name-1=""
  cta-data-bi-id-1=""
  cta-aria-1="">
</mwf-area-heading>

</div>

</mwf-pivot>

Attributes:

• quote: quote text
• byline: byline text (Quote works with 1-4 quotes)

<mwf-quote
  quote-1="This is the first quote"
  byline-1="Kelly Dunford"
  quote-2="Second quote will go here"
  byline-2="Name goes here"
  quote-3="This is the third quote"
  byline-3="Another name">
</mwf-quote>

Attributes:

Markdown table

<mwf-table>

| Item         | Price     |
|--------------|-----------|
| Apples | 1.99      |
| Bananas      | 1.89  |
| Oranges      | 1.59  |

</mwf-table>

<mwf-table>

|                                                       | Reports                                    | Workspace                                                                                      |Report Builder                                                                                                           | Data Warehouse                                                                                          |
|------------------------------------------------------|--------------------------------------------------------|------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------|---------------------------------------------------------------------------------------------------------|
| Access Method                                        | Web browser solution for digital analysis.             | Web browser solution for building robust, custom analysis projects and democratizing insights. |Excel add-in that lets you build customized requests from Reports & Analytics data, and visualize using Microsoft Excel. | Web browser solution that generates reports in .csv format. You can also generate Tableau format files. |
| Report Breakdowns                                    | Up to 2 correlations                                   | Unlimited                                                                                      |Up to 2 correlations                                                                                                     | Performs fully expanded, unlimited breakdowns, break down by segment.                                   |
| Segment Comparisons                                  | Up to 2 segments                                       | Unlimited                                                                                      |Unlimited (data request stacking)                                                                                        | 1 segment. Supports multiple (stacked) segments.                                                        |
| Row Output Limit                                     | 200                                                    | 200                                                                                            |50,000                                                                                                                   | Unlimited                                                                                               |
| Unique Value Limits (within eVar/ prop reports)      | 500,000                                                | 500,000                                                                                        |500,000                                                                                                                  | Unlimited                                                                                               |
| Funnel/Pathing                                       | Yes                                                    | Yes (Fallout and Flow)                                                                         |Yes                                                                                                                      | No                                                                                                      |
| Advanced Customer Journey Analysis                   | No                                                     | Planned                                                                                        |No                                                                                                                       | No                                                                                                      |
| Cohort Analysis                                      | No                                                     | Yes                                                                                            |No                                                                                                                       | No                                                                                                      |
| Advanced Attribution                                 | Limited - first/last/linear depending on the dimension | Limited currently - first/last/linear depending on the dimension                               |Limited - first/last/linear depending on the dimension                                                                   | Limited - first/last/linear depending on the dimension                                                  |
| Enhanced Visualization Options                       | No                                                     | Yes                                                                                            |Yes                                                                                                                      | No                                                                                                      |
| Customizable Layout                                  | Yes - Dashboards                                       | Yes                                                                                            |Yes                                                                                                                      | Sort results by breakdown or by metrics.                                                                |
| Project Curation (Simplify reports for non-analysts) | No                                                     | Yes                                                                                            |Yes                                                                                                                      | No                                                                                                      |
| Project Sharing                                      | Yes; all/any users                                     | Yes; all/any users                                                                             |Yes; all/any users                                                                                                       | No                                                                                                      |
| Scheduled Report Delivery                            | Yes                                                    | Yes                                                                                            |Yes                                                                                                                      | Yes                                                                                                     |
| System Requirements                                  | Latest browser and system requirements                 | Latest browser and system requirements                                                         |Windows, MS Excel                                                                                                        | Web browser and program to open .csv files like MS Excel. Can generate Tableau format files.            |

</mwf-table>

Attributes:

• headline: heading text
• headline-level: options: 1, 2, 3, 4 (corresponds to html h1-h4)
• paragraph: paragraph text
• background: options: neutral-20, neutral-80, neutral-100, accent (blue)
• brief: options: true, false (default false)

<mwf-typographic-intro
  headline="Crusty & Rusty: Magical Mavericks"
  headline-level="2"
  paragraph="We are proud to host these prominent wizards who will accompany us on a long and occasionally humorous journey to fill the world with good vibes, solve cryptic riddles and maybe save a kingdom or two."
  background="neutral-20">
</mwf-typographic-intro>

Attributes

• src: source url
• title: title of the video (needed for accessibility)
• autoplay: autoplay video option, defaults to false
• showinfo: show video stats option, defaults to false
• startat: alternate start time in seconds

<mwf-video
  src="https://www.microsoft.com/en-us/videoplayer/embed/14b8051b-0100-4185-882c-185a674992a3"
  title="Test OnePlayer Video"
  showinfo="true">
</mwf-video>