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}'
}
},
}
}
})