When implementing you may need to adjust the heading order of this component depending on your app.
Heads up! This is the documentation site for the Principal Design System Vanilla, which will soon be deprecated. Check out the latest documentation at design.principal.com
Tout
The tout pattern displays short snippets of content in a prominent way.
Variations
Tout 3 example
Industry-leading user experience
Principal ranked “best-in-class” plan sponsor financial service website1
Principal ranked #1 for participant website and online capabilities2
Principal participants who logged into the website have a 50% higher average deferral rate3
<section class="pds-tout">
<div class="container">
<div class="row pds-typography-center">
<div class="col-xs-12 col-lg-6 offset-lg-3">
<h2 class="pds-util-margin-vert-32">Industry-leading user experience</h2>
</div>
</div>
<div class="row">
<div class="pds-tout-content col-12 col-md-4 pds-tout-checkmark">
<i data-feather="check" aria-hidden="true"></i>
<p>Principal ranked “best-in-class” plan sponsor financial service website<sup>1</sup></p>
</div>
<div class="pds-tout-content col-12 col-md-4 pds-tout-checkmark">
<i data-feather="check" aria-hidden="true"></i>
<p>Principal ranked #1 for participant website and online capabilities<sup>2</sup></p>
</div>
<div class="pds-tout-content col-12 col-md-4 pds-tout-checkmark">
<i data-feather="check" aria-hidden="true"></i>
<p>Principal participants who logged into the website have a 50% higher average deferral rate<sup>3</sup></p>
</div>
</div>
<div class="row pds-row-items-center pds-tout-btn-row">
</div>
</div>
</section>
<Tout>
<React.Fragment key=".0">
<ToutTitle>
Industry-leading user experience
</ToutTitle>
<ToutItems>
<ToutItem>
<p>
Principal ranked “best-in-class” plan sponsor financial service website
<sup>
1
</sup>
</p>
</ToutItem>
<ToutItem>
<p>
Principal ranked #1 for participant website and online capabilities
<sup>
2
</sup>
</p>
</ToutItem>
<ToutItem>
<p>
Principal participants who logged into the website have a 50% higher average deferral rate
<sup>
3
</sup>
</p>
</ToutItem>
</ToutItems>
</React.Fragment>
</Tout>
Tout 6 example
Improving plan health and retirement readiness
We're evolving the Principal defined contribution and defined benefit retirement platform. It will incorporate the best capabilities from both Principal and Wells Fargo Institutional Retirement and Trust (IRT). Combined, these features can help drive results for plan sponsors and participants alike.
Flexible
Our system is built to be nimble and scalable to meet the complex needs of all clients.
Efficient
Plan administration tasks are just a click away and automated for efficiency.
Simple
Navigate to all of your retirement solutions in one place from a single sign-on.
Personal
Customized participant experience meets individuals where they are.
Robust
Interactive, engaging financial wellness tools and resources build confidence.
Actionable
One-touch contribution increases make taking action simple.
<section class="pds-tout">
<div class="container">
<div class="row pds-typography-center">
<div class="col-xs-12 col-lg-6 offset-lg-3">
<h2 class="pds-util-margin-vert-32">Improving plan health and retirement readiness</h2>
</div>
</div>
<div class="row pds-typography-center pds-tout-row-description">
<div class="col-xs-12 col-md-10 offset-md-1">
<p>We're evolving the Principal defined contribution and defined benefit retirement platform. It will incorporate the best capabilities from both Principal and Wells Fargo Institutional Retirement and Trust (IRT). Combined, these features can help drive results for plan sponsors and participants alike.</p>
</div>
</div>
<div class="row">
<div class="pds-tout-content col-12 col-sm-6 col-md-4 pds-center-md">
<h3 class="pds-typography-bold pds-tout-heading">Flexible</h3>
<p>Our system is built to be nimble and scalable to meet the complex needs of all clients.</p>
</div>
<div class="pds-tout-content col-12 col-sm-6 col-md-4 pds-center-md">
<h3 class="pds-typography-bold pds-tout-heading">Efficient</h3>
<p>Plan administration tasks are just a click away and automated for efficiency.</p>
</div>
<div class="pds-tout-content col-12 col-sm-6 col-md-4 pds-center-md">
<h3 class="pds-typography-bold pds-tout-heading">Simple</h3>
<p>Navigate to all of your retirement solutions in one place from a single sign-on.</p>
</div>
<div class="pds-tout-content col-12 col-sm-6 col-md-4 pds-center-md">
<h3 class="pds-typography-bold pds-tout-heading">Personal</h3>
<p>Customized participant experience meets individuals where they are.</p>
</div>
<div class="pds-tout-content col-12 col-sm-6 col-md-4 pds-center-md">
<h3 class="pds-typography-bold pds-tout-heading">Robust</h3>
<p>Interactive, engaging financial wellness tools and resources build confidence.</p>
</div>
<div class="pds-tout-content col-12 col-sm-6 col-md-4 pds-center-md">
<h3 class="pds-typography-bold pds-tout-heading">Actionable</h3>
<p>One-touch contribution increases make taking action simple.</p>
</div>
</div>
<div class="row pds-row-items-center pds-tout-btn-row">
<button class="pds-button pds-button-secondary">
Preview our platform</button>
</div>
</div>
</section>
<Tout>
<React.Fragment key=".0">
<ToutTitle>
Improving plan health and retirement readiness
</ToutTitle>
<ToutDescription>
<p>
We're evolving the Principal defined contribution and defined benefit retirement platform. It will incorporate the best capabilities from both Principal and Wells Fargo Institutional Retirement and Trust (IRT). Combined, these features can help drive results for plan sponsors and participants alike.
</p>
</ToutDescription>
<ToutItems>
<ToutItem label="Flexible">
<p>
Our system is built to be nimble and scalable to meet the complexneeds of all clients.
</p>
</ToutItem>
<ToutItem label="Efficient">
<p>
Plan administration tasks are just a click away and automated for efficiency.
</p>
</ToutItem>
<ToutItem label="Simple">
<p>
Navigate to all of your retirement solutions in one place from a single sign-on.
</p>
</ToutItem>
<ToutItem label="Personal">
<p>
Customized participant experience meets individuals where they are.
</p>
</ToutItem>
<ToutItem label="Robust">
<p>
Interactive, engaging financial wellness tools and resources build confidence.
</p>
</ToutItem>
<ToutItem label="Actionable">
<p>
One-touch contribution increases make taking action simple.
</p>
</ToutItem>
</ToutItems>
<ToutButton variant="secondary">
Preview our platform.
</ToutButton>
</React.Fragment>
</Tout>
Accessibility notes
Installation examples
Choose from one of the options for implementation below.
<!-- Tout CSS -->
<link href="https://www.principalcdn.com/css/principal-design-system/tout/v17/tout.min.css" rel="stylesheet">
npm install @pds/tout
npm install @pds-react/tout
Implementation notes
When using touts, the recommendation is to only use three or six touts. If three or six doesn't meet the need, a tout may not be the appropriate component for your use case.
This component relies on grid, which must be installed in your application separately.