Custom components

These are custom components based on MWF and verified by Ten Gun QA. They are ready for use on projects using standard HTML, CSS, and Javascript.


Content Placements with Pagination

Content placement with pagination with MWF styling
  • placeholder image
    BADGE

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

    Call To Action
    placeholder image

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

    Call To Action
    placeholder image

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

    Call To Action
  • placeholder image
    BADGE

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

    placeholder image

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

    placeholder image

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

  • placeholder image
    BADGE

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

    placeholder image

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

    placeholder image

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

  • placeholder image
    BADGE

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

    placeholder image

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

    placeholder image

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

  • placeholder image
    BADGE

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

    placeholder image

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

    placeholder image

    Heading

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut id faucibus ex, eget aliquet ligula. Sed vel ligula consequat, euismod ligula quis, pharetra magna. Fusce commodo pretium tellus non ultricies. Vestibulum fringilla tempor lectus, at pharetra lacus lobortis vel.

Event Calendar

Module description goes here
Filters Event Timing CourseType Tools
OCT
31

Test Event 4

Upcoming Events
2021-10-31 1:00 pm
1 Microsoft Way, Redmond, WA 98052 Microsoft Campus
Brief description of the event goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
NOV
20

Test Event

Backstage
2021-11-20 1:00 pm
1 Microsoft Way, Redmond, WA 98052 Microsoft Campus
Brief description of the event goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Watch Video
Watch Video
Watch Video
NOV
20

Test Event 2

Spotlight
2021-11-20 1:00 pm
1 Microsoft Way, Redmond, WA 98052 Microsoft Campus
Brief description of the event goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
NOV
20

Test Event 3

Stars
2021-11-20 1:00 pm
1 Microsoft Way, Redmond, WA 98052 Microsoft Campus
Brief description of the event goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
DEC
15

Test Event 5

Past Conferences
2021-12-15 1:00 pm
1 Microsoft Way, Redmond, WA 98052 Microsoft Campus
Brief description of the event goes here. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Filtered list

Module description goes here

Filters

Choose a link below to refine and filter your results


  • All filters
  • Filter #1
  • Filter #2
  • Filter #3
  • Filter #4
  • Filter #5
  • Filter #1

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


  • Filter #1 two

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


  • Filter #2

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


  • Filter #3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


  • Filter #4

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


  • Filter #5

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


  • Filter #5 two

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


  • Filter #5 three

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


Hero audio embed

Hero audio embed
placeholder image

x-align-center

Subheading

Hero quiz

Module description goes here
Three people work on laptop computers at a communal table.

Free training and career resources.
Starting with you.
Answer 4 short questions to find your customized learning path.

Module description goes here

Which websites must be registered?

Answer a few brief questions

Padding

static12
static24
static48
static96
pad12
pad24
pad48
pad96

Parallax

placeholder image
BADGE

Heading

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.

Call To Action
placeholder image
BADGE

Heading

Paragraph text. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Call To Action

Quote

Quote
Microsoft Chief Marketing Officer and EVP Chris Capossela.
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 EVP
Quote Carousel

Sneak Slider

Module description goes here