Footer

Updated Oct 16, 2026 v0.0.10

v0.0.10StableComponentStatelessApache-2.0

Installation mix mishka.ui.gen.component footer

Source View Source

Overview of the Phoenix and LiveView Footer Component

The Mishka Chelekom footer component is a Phoenix LiveView component that enables developers to create fully customizable and responsive footers, perfect for enhancing the user experience. It offers flexible design options, allowing for adjustments in text alignment, padding, and layout, ensuring a clean and professional appearance.

Overview of the Phoenix and LiveView Footer Component

This Phoenix LiveView component supports multiple design variants such as default, outline, transparent, and shadow, making it ideal for improving both the aesthetic and functionality of your application's footer. With its responsive design and ease of customization, this footer component enhances the presentation and usability of your website's lower sections.

Base color Variant

heex

<.footer>All Rights Reserved</.footer>

Default Variant

The default style of the Mishka Chelekom footer applies a solid background and border that change based on user interaction, making it perfect for delivering important notifications. With just a single setting, you can select from a range of color options, ensuring easy customization to match various design styles. Default variant have also white and dark colors which are the same colors in the dark and light mode.

Default Variant

heex

<.footer variant="default" color="natural"></.footer>

<.footer variant="default" color="white"></.footer>

<.footer variant="default" color="primary"></.footer>

<.footer variant="default" color="secondary"></.footer>

<.footer variant="default" color="dark"></.footer>

<.footer variant="default" color="success"></.footer>

<.footer variant="default" color="warning"></.footer>

<.footer variant="default" color="danger"></.footer>

<.footer variant="default" color="info"></.footer>

<.footer variant="default" color="silver"></.footer>

<.footer variant="default" color="misc"></.footer>

<.footer variant="default" color="dawn"></.footer>

Outline Variant

The outline style of the Mishka Chelekom footer features a border. Using a single setting, you can choose from various color variants to suit your design needs.

Outline Variant

heex

<.footer variant="outline" color="natural"></.footer>

<.footer variant="outline" color="primary"></.footer>

<.footer variant="outline" color="secondary"></.footer>

<.footer variant="outline" color="dark"></.footer>

<.footer variant="outline" color="success"></.footer>

<.footer variant="outline" color="warning"></.footer>

<.footer variant="outline" color="danger"></.footer>

<.footer variant="outline" color="info"></.footer>

<.footer variant="outline" color="silver"></.footer>

<.footer variant="outline" color="misc"></.footer>

<.footer variant="outline" color="dawn"></.footer>

Shadow Variant

The shadow variant of the Mishka Chelekom footer is similar to the default variant, but it also includes a subtle shadow along with a border and white background in light mode.

Shadow Variant

heex

<.footer variant="shadow" color="natural"></.footer>

<.footer variant="shadow" color="primary"></.footer>

<.footer variant="shadow" color="secondary"></.footer>

<.footer variant="shadow" color="success"></.footer>

<.footer variant="shadow" color="warning"></.footer>

<.footer variant="shadow" color="danger"></.footer>

<.footer variant="shadow" color="info"></.footer>

<.footer variant="shadow" color="silver"></.footer>

<.footer variant="shadow" color="misc"></.footer>

<.footer variant="shadow" color="dawn"></.footer>

bordered Variant

The Bordered variant of the Mishka Chelekom footer has lighter background and a border. Bordered variant have also white and dark colors which are the same colors in the dark and light mode.

bordered Variant

heex

<.footer variant="bordered" color="natural"></.footer>

<.footer variant="bordered" color="white"></.footer>

<.footer variant="bordered" color="dark"></.footer>

<.footer variant="bordered" color="primary"></.footer>

<.footer variant="bordered" color="secondary"></.footer>

<.footer variant="bordered" color="dark"></.footer>

<.footer variant="bordered" color="success"></.footer>

<.footer variant="bordered" color="warning"></.footer>

<.footer variant="bordered" color="danger"></.footer>

<.footer variant="bordered" color="info"></.footer>

<.footer variant="bordered" color="silver"></.footer>

<.footer variant="bordered" color="misc"></.footer>

<.footer variant="bordered" color="dawn"></.footer>

Transparent Variant

The transparent variant of the Mishka Chelekom footer is similar to the default variant, but without border and background color.

Transparent Variant

heex

<.footer variant="transparent" color="natural"></.footer>

<.footer variant="transparent" color="primary"></.footer>

<.footer variant="transparent" color="secondary"></.footer>

<.footer variant="transparent" color="success"></.footer>

<.footer variant="transparent" color="warning"></.footer>

<.footer variant="transparent" color="danger"></.footer>

<.footer variant="transparent" color="info"></.footer>

<.footer variant="transparent" color="silver"></.footer>

<.footer variant="transparent" color="misc"></.footer>

<.footer variant="transparent" color="dawn"></.footer>

Gradient Variant

The gradient variant of the Mishka Chelekom footer has gradients in various colors.

Gradient Variant

heex

<.footer variant="gradient" color="natural"></.footer>

<.footer variant="gradient" color="primary"></.footer>

<.footer variant="gradient" color="secondary"></.footer>

<.footer variant="gradient" color="success"></.footer>

<.footer variant="gradient" color="warning"></.footer>

<.footer variant="gradient" color="danger"></.footer>

<.footer variant="gradient" color="info"></.footer>

<.footer variant="gradient" color="silver"></.footer>

<.footer variant="gradient" color="misc"></.footer>

<.footer variant="gradient" color="dawn"></.footer>

Rounded prop in Phoenix LiveView footer Component

The rounded prop offers values like extra_small, small, medium, large, and extra_large. These values control the border radius of the footer, allowing for different levels of rounding from subtle to more pronounced corners, depending on the design needs.

heex

<.footer rounded="extra_small"></.footer>
<.footer rounded="small"></.footer>
<.footer rounded="medium"></.footer>
<.footer rounded="large"></.footer>
<.footer rounded="extra_large"></.footer>

Border prop

The border prop offers values like extra_small, small, medium, large, and extra_large. These values control the border size of the footers, allowing you to adjust the thickness to suit your design.

Border prop

heex

<.footer border="extra_small"></.footer>
<.footer border="small"></.footer>
<.footer border="medium"></.footer>
<.footer border="large"></.footer>
<.footer border="extra_large"></.footer>

Space prop

The space prop offers values such as extra_small, small, medium, large, and extra_large. These values control the vertical spacing between elements within the footers.

Space prop

heex

<.footer space="extra_small"></.footer>
<.footer space="small"></.footer>
<.footer space="medium"></.footer>
<.footer space="large"></.footer>
<.footer space="extra_large"></.footer>

Padding prop

The padding prop offers values such as extra_small, small, medium, large, and extra_large. These values control the padding around the content inside the footers.

Padding prop

heex

<.footer padding="extra_small"></.footer>
<.footer padding="small"></.footer>
<.footer padding="medium"></.footer>
<.footer padding="large"></.footer>
<.footer padding="extra_large"></.footer>

Max width prop

The max_width attribute controls the maximum width of the footer component, ensuring that the content stays within a defined boundary, which is especially useful for creating consistent layouts. By setting the max_width value, you can easily limit how wide the footer can extend, maintaining a structured appearance across different screen sizes. This attribute allows the footer to remain centered and visually balanced, enhancing the overall presentation of the component in any layout.

Max width prop

heex

<.footer max_width="extra_small"></.footer>
<.footer max_width="small"></.footer>
<.footer max_width="medium"></.footer>
<.footer max_width="large"></.footer>
<.footer max_width="extra_large"></.footer>

Text position prop

The text_position attribute controls the alignment of text within a component, ensuring that content is properly positioned based on the design needs. With options like left, right, and center, you can align text to the left, right, or center of the component, respectively. This flexibility allows developers to manage how textual content is presented, enhancing readability and improving the visual structure of the component. If no specific value is provided, a default alignment is applied, typically aligning the text to the left.

Text position prop

heex

<.footer text_position="left"></.footer>
<.footer text_position="center"></.footer>
<.footer text_position="right"></.footer>

Footer font weight prop

The font_weight prop controls the font weight of the text. By setting this prop, you can determine how bold or light the text appears within the title section. The default value is font-normal. You can customize this value to apply different font weights, such as making the text lighter or bolder, depending on the visual style and emphasis you want to create for the footer. This provides flexibility in ensuring the title stands out appropriately within the overall footer layout.

heex

<.footer font_weight="font-light"></.footer>
<.footer font_weight="font-bold"></.footer>
<.footer font_weight="font-medium"></.footer>

Footer section component

The footer_section component is a versatile part of the overall footer structure, designed to handle individual sections within the footer, such as text, links, or additional content. It supports a range of customization options, including padding, text_position, and space, allowing developers to adjust spacing, alignment, and layout to meet specific design needs. With the font_weight and class attributes, additional styling and custom CSS can be applied to ensure consistency and enhance the visual appearance. The footer_section also accepts an inner_block, making it flexible for rendering dynamic content, which can be tailored to different use cases, such as contact information, copyright notices, or navigation links.

Footer section component

heex

<.footer class="your_classes" color="secondary" padding="large" space="medium">
  <.footer_section class="your_clsses" padding="large">
    <.list color="secondary" space="large">
      <:item><.link navigate="/path">link</.link></:item>
      <:item><.link navigate="/path">link</.link></:item>
      <:item><.link navigate="/path">link</.link></:item>
    </.list>

    <p class="text-sm">A description inside footer section</p>
  </.footer_section>

  <.footer_section text_position="center" class="border-t" padding="small">
    Copyright
  </.footer_section>
</.footer>

Footer section space prop

The space prop control the vertical spacing between elements within the footer سثزفهخد. extra_small, small, medium, large, and extra_large.

heex

<.footer>
  <.footer_section class="your_clsses" space="extra_small"></.footer_section>
  <.footer_section class="your_clsses" space="small"></.footer_section>
  <.footer_section class="your_clsses" space="medium"></.footer_section>
  <.footer_section class="your_clsses" space="large"></.footer_section>
  <.footer_section class="your_clsses" space="extra_large"></.footer_section>
</.footer>

Footer section padding prop

The padding prop control the padding around the content inside the footer section extra_small, small, medium, large, and extra_large.

heex

<.footer>
  <.footer_section class="your_clsses" padding="extra_small"></.footer_section>
  <.footer_section class="your_clsses" padding="small"></.footer_section>
  <.footer_section class="your_clsses" padding="medium"></.footer_section>
  <.footer_section class="your_clsses" padding="large"></.footer_section>
  <.footer_section class="your_clsses" padding="extra_large"></.footer_section>
</.footer>

Footer section text position prop

The text_position attribute controls the alignment of text within component, ensuring that content is properly positioned based on the design needs. With options like left, right, and center, you can align text to the left, right, or center of the component, respectively.

Footer section text position prop

heex

<.footer>
  <.footer_section class="your_clsses" text_position="center"></.footer_section>
  <.footer_section class="your_clsses" text_position="right"></.footer_section>
  <.footer_section class="your_clsses" text_position="left"></.footer_section>
</.footer>

Footer section font weight prop

The font_weight prop controls the font weight of the text. By setting this prop, you can determine how bold or light the text appears within the title section. The default value is font-normal.

heex

<.footer>
  <.footer_section class="your_clsses" font_weight="font-bold"></.footer_section>
  <.footer_section class="your_clsses" font_weight="font-light"></.footer_section>
  <.footer_section class="your_clsses" font_weight="font-medium"></.footer_section>
</.footer>

Attributes

Name	Type	Default	Values	Required	Description
`id`	`string`	—	—	No	A unique identifier is used to manage state and interaction
`variant`	`string`	`base`	`defaultoutlinetransparentshadowborderedgradientbase`	No	Determines the style
`color`	`string`	`natural`	`basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn`	No	Determines color theme
`border`	`string`	`extra_small`	—	No	Determines border style
`text_position`	`string`	—	—	No	Determines the element's text position
`rounded`	`string`	—	`extra_smallsmallmediumlargeextra_largenone`	No	Determines the border radius
`max_width`	`string`	—	—	No	Determines the style of element max width
`space`	`string`	—	`extra_smallsmallmediumlargeextra_large`	No	Space between items
`font_weight`	`string`	`font-normal`	—	No	Determines custom class for the font weight
`padding`	`string`	—	`extra_smallsmallmediumlargeextra_large`	No	Determines padding for items
`class`	`any`	—	—	No	Custom CSS class for additional styling
`wrapper_class`	`string`	—	—	No	Custom CSS class for additional styling to footer content wrapper
`rest`	`global`	—	—	No	Global attributes can define defaults which are merged with attributes provided by the caller

Slots

Name	Required	Description
`inner_block`	No	Inner block that renders HEEx content

Options

Each option takes one or more of its values, separated by commas.

Option	Values
`--variant`	`defaultoutlinetransparentshadowborderedgradientbase`
`--color`	`basenaturalwhiteprimarysecondarydarksuccesswarningdangerinfosilvermiscdawn`
`--size`	`extra_smallsmallmediumlargeextra_large`
`--space`	`extra_smallsmallmediumlargeextra_large`
`--rounded`	`extra_smallsmallmediumlargeextra_largenone`
`--padding`	`extra_smallsmallmediumlargeextra_large`
`--type`	`footerfooter_section`
`--module`	A module name of your own

What it generates

Functions footerfooter_section

Helpers None

Generated with it None

Command mix mishka.ui.gen.component footer