Footer
Defines the global footer section of the page.
It renders credits, social icons and navigation links, which are configured in app.config.ts
.
AppFooter
is used inside AppLayout
component.
This is not a MDC component, but you can control it's visibility with configuration or front-matter (WIP ๐ง).
Configuration
app.config.ts
export default defineAppConfig({
docux: {
footer: {
credits: {
icon: 'Icondocux',
text: 'Powered by docux',
href: 'https://docux.dev'
},
textLinks: [],
iconLinks: [],
},
}
})
Design Tokens
tokens.config.ts
import { defineTheme } from 'pinceau'
export default defineTheme({
docux: {
app: {
footer: {
height: {
initial: '145px',
sm: '100px'
},
padding: '{space.4} 0',
borderTopWidth: '1px',
borderTopStyle: 'solid',
borderTopColor: '{elements.border.primary.static}',
layout: {
gridTemplateColumns: 'repeat(12, minmax(0, 1fr))',
justifyItems: {
initial: 'center',
sm: 'stretch'
},
gap: '{space.2}',
left: {
gridColumn: {
initial: 'span 12 / span 12',
sm: 'span 3 / span 3'
},
order: {
initial: '1',
sm: '0'
},
paddingY: '{space.4}'
},
center: {
gridColumn: {
initial: 'span 12 / span 12',
sm: 'span 6 / span 6'
},
flexDirection: {
initial: 'column',
sm: 'row'
},
alignItems: 'center',
justifyContent: {
initial: 'flex-start',
sm: 'center'
}
},
right: {
gridColumn: {
initial: 'span 12 / span 12',
sm: 'span 3 / span 3'
},
marginInlineEnd: {
initial: '0px',
sm: 'calc(0px - {space.4})'
}
}
},
credits: {
fontSize: '{text.xs.fontSize}',
lineHeight: '{text.xs.lineHeight}',
fontWeight: '{fontWeight.medium}',
icon: {
size: '{space.4}',
marginInlineEnd: '{space.2}',
color: 'currentColor'
}
},
icon: {
size: '{space.4}'
},
textLink: {
padding: '{space.2}',
fontSize: '{text.sm.fontSize}',
lineHeight: '{text.sm.lineHeight}',
fontWeight: '{fontWeight.medium}'
},
iconLink: {
padding: '{space.4}'
}
},
}
}
})