<style include="cr-shared-style settings-shared">
#wrapper {
align-items: center;
display: flex;
justify-content: space-between;
padding: 0 20px;
}
#controlsColumn {
margin-top: 4px;
}
h2 {
color: var(--cr-primary-text-color);
font-size: 22px;
padding-top: 0;
}
#title {
font-weight: 400;
}
#bodyText {
padding-block-end: 16px;
}
#startButton {
margin-bottom: 4px;
margin-inline-end: 16px;
}
</style>
<div id="wrapper">
<div id="controlsColumn">
<h2 id="title">$i18n{privacyGuidePromoHeader}</h2>
<div id="bodyText" class="cr-secondary-text">
$i18n{privacyGuidePromoBody}
</div>
<cr-button class="action-button" id="startButton" role="button"
aria-describedby="title bodyText" on-click="onPrivacyGuideStartClick_">
$i18n{privacyGuidePromoStartButton}
</cr-button>
<cr-button id="noThanksButton" role="button"
on-click="onNoThanksButtonClick_">
$i18n{noThanks}
</cr-button>
</div>
<picture>
<source class="banner"
srcset="./images/privacy_guide/promo_banner_dark.svg"
media="(prefers-color-scheme: dark)">
<img class="banner" alt=""
src="./images/privacy_guide/promo_banner.svg">
</picture>
</div>