The official website banner is a banner that displays that the website is an official government website.
import { DapDSOfficialWebsiteBanner } from 'dap-design-system'
import { DapDSOfficialWebsiteBannerReact } from 'dap-design-system/react'
For optimal bundle sizes, use the tree-shakeable import syntax:
import { DapDSOfficialWebsiteBanner } from 'dap-design-system/components'
| Property | Type | Default | Description |
|---|---|---|---|
size | 'sm', 'lg' | The size of the official website banner. Default is sm. | |
heading | string | The heading text of the accordion, this will be used as the aria label of the heading also if ariaLabel is not provided | |
headingLevel | 1, 2 , 3 , 4 , 5 , 6 | The heading level of the accordion. Default is 4. | |
opened | boolean | Whether the accordion is opened. Default is false. | |
iconLocation | 'left', 'right' | The location of the icon. Default is right. | |
variant | 'default', 'collapsed' , 'clean' , 'clean-collapsed' | The variant of the accordion. | |
lastItem | boolean | Whether the accordion is the last item. |
| Name | Description |
|---|---|
default | The content of the accordion. |
heading | The heading of the accordion. |
icon-opened | The icon when the accordion is opened. |
icon-closed | The icon when the accordion is closed. |
| Event Name | Description | Type |
|---|---|---|
dds-opened | Event fired when the accordion is opened. | {void } |
dds-closed | Event fired when the accordion is closed. | {void } |
| Part Name | Description |
|---|---|
base | The main accordion container. |
heading | The heading of the accordion. |
button | The button of the accordion. |
content | The content of the accordion. |
content-container | The container of the accordion content. |
icon-wrapper | The icon wrapper of the accordion. |
open-icon | The icon when the accordion is opened. |
open-icon-base | The base of the icon when the accordion is opened. |
close-icon | The icon when the accordion is closed. |
close-icon-base | The base of the icon when the accordion is closed. |
You can style CSS parts using the ::part() pseudo-element selector:
/* Target a specific part */
.my-custom-dap-ds-official-website-banner::part(base) {
/* Your custom styles */
}
/* Target multiple parts */
.my-custom-dap-ds-official-website-banner::part(base),
.my-custom-dap-ds-official-website-banner::part(heading) {
/* Shared styles */
}
Example usage:
<dap-ds-official-website-banner class="my-custom-dap-ds-official-website-banner">
Official website banner
</dap-ds-official-website-banner>
.my-custom-dap-ds-official-website-banner::part(base) {
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
CSS parts allow you to style internal elements of the component while maintaining encapsulation. Learn more in our styling guide.
| Property Name | Description |
|---|---|
--dds-official-banner-background-color | The background color of the official website banner (default: var(--dds-background-brand-medium-inverted)) |
--dds-official-banner-text-color | The text color of the official website banner (default: var(--dds-text-neutral-on-inverted)) |
--dds-official-banner-heading-hover-color | The heading hover color of the official website banner (default: var(--dds-background-brand-medium-inverted)) |
--dds-official-banner-border-radius | The border radius of the official website banner (default: 0) |
--dds-official-banner-icon-color | The icon color of the official website banner (default: var(--dds-text-neutral-on-inverted)) |
--dds-official-banner-icon-color-hover | The icon hover color of the opener icon official website banner (default: var(--dds-text-neutral-on-inverted)) |
CSS custom properties (CSS variables) can be set directly on the component or in your stylesheet:
Method 1: Inline styles (Quick customization)
<dap-ds-official-website-banner
style="--dds-official-banner-background-color: value; --dds-official-banner-text-color: value;">
Official website banner
</dap-ds-official-website-banner>
Method 2: CSS classes (Reusable styles)
.my-custom-dap-ds-official-website-banner {
--dds-official-banner-background-color: value;
--dds-official-banner-text-color: value;
--dds-official-banner-heading-hover-color: value;
}
<dap-ds-official-website-banner class="my-custom-dap-ds-official-website-banner">
Official website banner
</dap-ds-official-website-banner>
Method 3: Global theme customization
/* Apply to all instances */
dap-ds-official-website-banner {
--dds-official-banner-background-color: value;
--dds-official-banner-text-color: value;
}
CSS custom properties inherit through the Shadow DOM, making them perfect for theming. Changes apply immediately without rebuilding.
