<style include="shared-style cr-shared-style">
:host {
align-items: center;
display: flex;
}
#image {
height: 120px;
width: 248px;
}
a[href] {
color: var(--cr-link-color);
}
#promoContent {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
margin-block: 16px;
margin-inline-end: 6px;
margin-inline-start: 24px;
}
#actionButton {
margin-top: 6px;
width: fit-content
}
#closeButton {
margin-top: 10px;
margin-right: 10px;
margin-bottom: auto;
}
</style>
<picture id="image">
<if expr="_google_chrome">
<source class="banner" srcset="./images/[[promoCard.id]]_dark.svg"
media="(prefers-color-scheme: dark)">
<img class="banner" alt="" src="./images/[[promoCard.id]].svg">
</if>
<if expr="not _google_chrome">
<source class="banner"
srcset="./images/[[promoCard.id]]_dark_non_branded.svg "
media="(prefers-color-scheme: dark)">
<img class="banner" alt=""
src="./images/[[promoCard.id]]_non_branded.svg ">
</if>
</picture>
<div id="promoContent">
<span id="title" class="label">[[promoCard.title]]</span>
<div id="description" class="cr-secondary-text label"
inner-h-t-m-l="[[getDescription_(promoCard)]]"></div>
<cr-button id="actionButton" hidden="[[!promoCard.actionButtonText]]"
class="action-button" on-click="onActionButtonClick_">
[[promoCard.actionButtonText]]
</cr-button>
</div>
<cr-icon-button id="closeButton" class="icon-clear no-overlap"
on-click="onCloseClick_" title="$i18n{close}"
aria-label="$i18n{closePromoCardButtonAriaLabel}">
</cr-icon-button>