1
0
mirror of https://github.com/bitwarden/browser synced 2026-02-05 11:13:44 +00:00
Files
browser/libs/components/src/callout/callout.component.html
Danielle Flinn 087e1a6155 [CL-866] Add default callout and update styles (#16481)
* Updated callout styles 
* Added default callout variant
* Refactored component to support icon + content variants (with no header)

---------

Co-authored-by: Vicki League <vleague@bitwarden.com>
Co-authored-by: Bryan Cunningham <bryan.cunningham@me.com>
2025-10-01 23:00:47 +00:00

27 lines
724 B
HTML

<aside
class="tw-mb-4 tw-box-border tw-border tw-border-solid tw-rounded-lg tw-bg-background tw-ps-4 tw-pe-4 tw-py-3 tw-leading-5 tw-flex tw-gap-2"
[ngClass]="[calloutClass()]"
[attr.aria-labelledby]="titleId"
>
@let title = titleComputed();
@let icon = iconComputed();
@if (icon) {
<i
class="bwi tw-relative"
[ngClass]="[icon, title ? 'tw-top-[3px] tw-self-start' : 'tw-top-[1px]']"
aria-hidden="true"
></i>
}
<div class="tw-flex tw-flex-col tw-gap-0.5">
@if (title) {
<header id="{{ titleId }}" class="tw-text-base tw-font-semibold">
{{ title }}
</header>
}
<div bitTypography="body2">
<ng-content></ng-content>
</div>
</div>
</aside>