Notification area that provides a detailed description or set of actions on an object.
All of your favorite people
Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.
Includes an icon to dismiss the callout.
All of your favorite people
Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.
Includes buttons to take action.
All of your favorite people
People automatically puts together all of the people you care most about in one place.
Draws attention to one aspect of the application during a product tour.
All of your favorite people
People automatically puts together all of the people you care most about in one place.
A smaller callout with an action.
Uploaded 2 items to Alton's OneDrive
This component has only the default state.
<head>
<link rel="stylesheet" href="fabric.min.css">
<link rel="stylesheet" href="fabric.components.min.css">
</head>
<div class="ms-Callout ms-Callout--arrowLeft">
<div class="ms-Callout-main">
<div class="ms-Callout-header">
<p class="ms-Callout-title">All of your favorite people</p>
</div>
<div class="ms-Callout-inner">
<div class="ms-Callout-content">
<p class="ms-Callout-subText">Message body is optional. If help documentation is available, consider adding a link to learn more at the bottom.</p>
</div>
<div class="ms-Callout-actions">
<a href="#" class="ms-Callout-link ms-Link ms-Link--hero">Learn more</a>
</div>
</div>
</div>
</div>
.ms-Callout-title
) with your content.This component has no dependencies.
Focus styles are included for all of the actions (links and buttons) included within a Callout.