-
Notifications
You must be signed in to change notification settings - Fork 1
/
Identifier.svelte
52 lines (49 loc) · 1.4 KB
/
Identifier.svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<script>
/**
* @type {string} [description=""]
*/
export let description = "";
/**
* @type {string} [domain=""]
*/
export let domain = "";
/**
* @type {string} [disclaimer=""]
*/
export let disclaimer = "";
</script>
<div {...$$restProps} class="usa-identifier">
<section class="usa-identifier__section usa-identifier__section--masthead">
<div class="usa-identifier__container">
<slot name="logos" props="{{ class: 'usa-identifier__logos' }}" />
<div class="usa-identifier__identity">
<p class="usa-identifier__identity-domain">
<slot name="domain">{domain}</slot>
</p>
<p class="usa-identifier__identity-disclaimer">
<slot name="disclaimer">{disclaimer}</slot>
</p>
</div>
</div>
</section>
<nav
class="usa-identifier__section usa-identifier__section--required-links"
aria-label="Important links"
>
<div class="usa-identifier__container">
<ul class="usa-identifier__required-links-list">
<slot />
</ul>
</div>
</nav>
<section class="usa-identifier__section usa-identifier__section--usagov">
<div class="usa-identifier__container">
<slot
name="description"
props="{{ class: 'usa-identifier__usagov-description' }}"
>
<div class="usa-identifier__usagov-description">{description}</div>
</slot>
</div>
</section>
</div>