67 lines
1.5 KiB
Plaintext
67 lines
1.5 KiB
Plaintext
import SectionHeader from "./SectionHeader.wrn"
|
|
import TextLink from "./TextLink.wrn"
|
|
|
|
component MarketingSectionHeader {
|
|
props {
|
|
id: string = ""
|
|
eyebrow: string = ""
|
|
title: string = ""
|
|
description: string = ""
|
|
align: string = "split"
|
|
size: string = "default"
|
|
color: string = "primary"
|
|
actionLabel: string = ""
|
|
actionHref: string = ""
|
|
actionIcon: string = ""
|
|
actionExternal: boolean = false
|
|
class: string = ""
|
|
}
|
|
|
|
view {
|
|
<div
|
|
{...attrs}
|
|
data-ui-component="MarketingSectionHeader"
|
|
data-size='{size}'
|
|
data-color='{color}'
|
|
class='wrn-marketing-section-header {class}'
|
|
>
|
|
<SectionHeader
|
|
id='{id}'
|
|
eyebrow='{eyebrow}'
|
|
title='{title}'
|
|
description='{description}'
|
|
align='{align}'
|
|
size='{size}'
|
|
color='{color}'
|
|
headingLevel="2"
|
|
maxWidth="3xl"
|
|
>
|
|
<div data-slot="icon">
|
|
<slot name="icon"></slot>
|
|
</div>
|
|
|
|
<div data-slot="actions">
|
|
{#if actionLabel}
|
|
<TextLink
|
|
label='{actionLabel}'
|
|
href='{actionHref}'
|
|
external='{actionExternal}'
|
|
icon='{actionIcon}'
|
|
iconPosition="start"
|
|
showArrow="true"
|
|
color='{color}'
|
|
/>
|
|
{/if}
|
|
<slot name="actions"></slot>
|
|
</div>
|
|
|
|
<slot></slot>
|
|
</SectionHeader>
|
|
</div>
|
|
}
|
|
|
|
style {
|
|
.wrn-marketing-section-header { width: 100%; min-width: 0; }
|
|
}
|
|
}
|