AisFooter
Branded footer component
default footer
footer with custom links, socials, contacts
vue
<template>
<p>default footer</p>
<AisFooter class="ui-max" />
<p>footer with custom links, socials, contacts</p>
<AisFooter
:contacts="[
{ icon: faPhone, label: 'phone number', href: '#' },
{ icon: faEnvelope, label: 'email', href: '#' },
{ icon: faComment, label: 'chat', href: '#' },
]"
:socials="[
{ label: 'Facebook', icon: faFacebookSquare, href: '#' },
{ label: 'Twitter', icon: faTwitterSquare, href: '#' },
]"
>
<template #primary>
<AisFooterLinks
:heading="{ label: 'Functional Links', visible: false }"
:items="[
{ label: 'MAUI', href: 'https://maui.uiowa.edu' },
{ label: 'MyUI', href: 'https://myui.uiowa.edu' },
{ label: 'ICON', href: 'https://icon.uiowa.edu' },
{ label: 'Workflow', href: 'https://workflow.uiowa.edu' },
{ label: 'Self-Service', href: 'https://hris.uiowa.edu' }
]"
/>
</template>
<template #secondary>
<AisFooterLinks
:heading="{ label: 'University Links', visible: false }"
:items="[
{ label: 'Office of the President', href: 'https://maui.uiowa.edu' },
{ label: 'Office of Strategic Communications', href: 'https://myui.uiowa.edu' },
{ label: 'COVID Response', href: 'https://icon.uiowa.edu' },
]"
/>
</template>
</AisFooter>
</template>
<script setup>
import { AisFooter } from '@ais-public/ais-components'
import { AisFooterLinks } from '@ais-public/ais-components'
import { faFacebookSquare, faTwitterSquare } from "@fortawesome/free-brands-svg-icons";
import { faPhone, faEnvelope, faComment } from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
library.add(faFacebookSquare, faTwitterSquare)
</script>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
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