v-footer component is used for displaying general information that a user might want to access from any page within your site.
v-footer component in its simplest form is a container.
Select your desired component from below and see the available props, slots, events and functions.
Applies position: absolute to the component.
Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of
v-content component to function properly. You can more information about layouts on the application page.
Applies specified color to the control - it can be the name of material color (for example
purple) or css color (
rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
Applies the dark theme variant to the component. You can find more information on the Material Design documentation for dark themes.
Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page.
Applies position: fixed to the component.
Sets the height for the component.
Positions the toolbar offset from an application
Applies the light theme variant to the component.
Sets the maximum height for the component.
Sets the maximum width for the component.
Sets the minimum height for the component.
Sets the minimum width for the component.
Remove all padding from the footer
Specify a custom tag used on the root element.
Removes the component's border-radius.
Sets the width for the component.
The default Vue slot.
6px 16px !default;
background-color, left, right !default;
map-get($transition, 'fast-out-slow-in') !default;
Below is a collection of simple to complex examples.
absolute prop positions footers absolutely at the bottom of their parent container.
padless prop removes all default padding from the footer component.
The footer component as a basic company footer with links.
The footer component with Indigo background color and social media icons and button.
The footer component with a Teal color header and columns and rows of links.
Ready for more? Continue reading with: