Table of contents
Hero modules
There are 5 different options to choose from. The most commonly used is the "Header" module.
Optional Eyebrow
"Mini Header" module
Optional Text. Note the "Eyebrow" can be set as the h1 if desired.
Optional Eyebrow
"Mini Header" module with image
Optional Text. Note the "Eyebrow" can be set as the h1 if desired.
"Customer Story Hero" module
Intro modules
These modules are usually used to set up a page after the hero.
"Table of Contents" module
This is only available with a white background and is really only used on SEO pages, but might be used if you are creating a guide in the Resource Center. You can add items to the left hand side and create anchor links to various sections.
Text modules
Here are all the various ways you can display content on a page. Most are available in 3 different background colors.
Optional eyebrow
"Text Media" module
This is a very common way to display content on an informational page. You can choose which side you want the image on under Layout.
- Bullet 1
- Bullet 2
"Text" module
This is the most flexible of modules but is really only used on SEO pages, blog posts, customer stories, etc. where you need a larger block of copy. You can choose to align the text left or centered. Most often blocks of copy are left-aligned. On the SEO pages, we have updated the headline styles and added a setting to make the margins not as wide. Eventually we can roll this out to other post types.
This is an h2 which you would use for a section headline.
This is the "paragraph" style.
Here is an example of what bullets look like:
- Bullet 1
- If needed
- If needed
- Bullet 2
- Bullet 3
Here is an example of what a numbered list looks like:
- Bullet 1
- Bullet 2
- Bullet 3
This is an h3 which you would use for a sub-section headline.
This is an h4 which you would use if you needed a headline for a subsection below the h3 headline.
You can also insert an image by selecting "Add Media" above. You can choose the size (most often full width and centered" by clicking on the edit symbol.
"Cards" module
This can be used with and without icons or images.
Card headline
Descriptive text - you can choose how many columns you want in the Layout section. Most common is 3 column but it will depend on how many items you have.
Card headline
Descriptive text - you can choose how many columns you want in the Layout section. Most common is 3 column but it will depend on how many items you have.
Card headline
Descriptive text - you can choose how many columns you want in the Layout section. Most common is 3 column but it will depend on how many items you have.
Card headline
Descriptive text - you can choose how many columns you want in the Layout section. Most common is 3 column but it will depend on how many items you have.
Card headline
Descriptive text - you can choose how many columns you want in the Layout section. Most common is 3 column but it will depend on how many items you have.
Card headline
Descriptive text - you can choose how many columns you want in the Layout section. Most common is 3 column but it will depend on how many items you have.
Card headline
Descriptive text - you can choose how many columns you want in the Layout section. Most common is 3 column but it will depend on how many items you have.
Card headline
Descriptive text - you can choose how many columns you want in the Layout section. Most common is 3 column but it will depend on how many items you have.
Lorem ipsum
Lorem ipsum
Lorem ipsum
"CTA Band" module
Note there are multiple variations of this. We will be creating a place where all "promos" can be managed and then you would just add a module and select which promo to add to the page.
"Customer Story" modules
"Customer Stats" module
This is used in conjunction with the Customer Story hero module. It will overlap the hero when used.
Text
Text
Text
"Customer Overview" module
Industry
Put industry here
Product
Put product here
Technology
Put technology here (change to Microsoft product?)
Region
Put region here
CTA text goes here?
CTAChallenge
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet lorem in eros posuere convallis sit amet et diam.
Curabitur sed purus suscipit, molestie diam vitae, sollicitudin mi. Fusce tincidunt lectus vitae urna euismod efficitur. Proin in convallis orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla viverra rhoncus sem, vel consequat mi scelerisque eu. Nullam eu est a mi hendrerit suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
Solution
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sit amet lorem in eros posuere convallis sit amet et diam.
Curabitur sed purus suscipit, molestie diam vitae, sollicitudin mi. Fusce tincidunt lectus vitae urna euismod efficitur. Proin in convallis orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nulla viverra rhoncus sem, vel consequat mi scelerisque eu. Nullam eu est a mi hendrerit suscipit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
"Logo Ticker" module
This overlaps the module above.
Trusted by thousands of organizations and millions of users
"Stats" module - full width
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. Vitae libero.
- Metric 1Lorem ipsum
- Metric 2Lorem ipsum
- Metric 3Lorem ipsum
- Metric 4Lorem ipsum
"Stats" module - contained
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. Vitae libero.
- 0,1234nunc luctus leo et
- 0,1234nunc luctus leo et
- 0,1234nunc luctus leo et
- 0,1234nunc luctus leo et
"Quote" module
This can be a carousel with multiple quotes or not.
Quote goes here
Optional Name
Optional Title
Quote goes here
Optional Name
Optional Title
"Testimonial Slider" module
In nisi leo feugiat vitae velit sit amet, pharetra suscipit arcu.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. Vitae libero.
30K
Dolor sit amet consectetur. Dictumst morbi ornare.
40k
lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. Vitae libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. Vitae libero.
30K
Dolor sit amet consectetur. Dictumst morbi ornare.
543
Dolor sit amet consectetur. Dictumst morbi ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. Vitae libero.
30K
Dolor sit amet consectetur. Dictumst morbi ornare.
543
Dolor sit amet consectetur. Dictumst morbi ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. Vitae libero.
30K
Dolor sit amet consectetur. Dictumst morbi ornare.
543
Dolor sit amet consectetur. Dictumst morbi ornare.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. Vitae libero.
30K
Dolor sit amet consectetur. Dictumst morbi ornare.
543
Dolor sit amet consectetur. Dictumst morbi ornare.
Miscellaneous
Optional Eyebrow
"Accordion" module
This is most often used for FAQs. Right now it only exists in white. If you want to break things up, you can use the divider module that you see right above this.
Answer 1
Answer 2
"Chart" module
Optional intro text goes here. You can make a table with or without a heading. This only exists on white right now.
Column 1 Heading | Column 2 Heading | Column 3 Heading | Column 4 Heading |
|---|---|---|---|
Row 1 content | Row 1 content | Row 1 content | Row 1 content |
Row 2 content | Row 2 content | Row 2 content | Row 2 content |
test
test
item1 | item 2 |
|---|---|
item 3 | item4iiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii |
item 5 | item 6 |
"Autotabs" module
In nisi leo feugiat vitae velit sit amet, pharetra suscipit arcu.
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin.
Lorem Ipsum 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. 2
Lorem Ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin.
Lorem Ipsum 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. 2
"Media Tabs" module
In nisi leo feugiat vitae velit sit amet, pharetra suscipit arcu.
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. Vitae libero.
- Test
- One
- Two
Lorem ipsum 2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. Vitae libero.
- Test
- One
- Two
Lorem ipsum 3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. Vitae libero.
- Test
- One
- Two
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. Vitae libero.
- Test
- One
- Two
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. Vitae libero.
- Test
- One
- Two
"Resources" module
This module is often put at the bottom of a page to give a user more options to get related content. You can pick a category or select resources manually.
"Featured Events" module
CTANunc luctus leo
"Text Form" module
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc, luctus leo et etiam tristique sollicitudin elit leo proin. Vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
H6 Pellentesque purus auctor nulla facilisis vitae feugiat purus. Iaculis cursus nunc id aliquam arcu. Tortor urna neque
- Test
- Cue sollicitudin elit leo proin. Vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
"Pricing Cards" module
Lorem ipsum dolor
"Features Table" module
$6 per AVD user/mo
$10 per AVD user/mo
Physical Endpoints
$1 per user/mo
Windows 365
$3 per W365 user/mo
Azure Virtual Desktop
Core
$6 per AVD user/mo
Premium
$10 per AVD user/mo