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.

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.

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.

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

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

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

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

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

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

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

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

<.footer color="light"></.footer>

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

<.footer 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.

<.footer variant="outline" color="white"></.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="light"></.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.

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

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

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

<.footer variant="shadow" color="dark"></.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="light"></.footer>

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

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

Unbordered Variant

The unbordered variant of the Mishka Chelekom footer is similar to the default variant, but without border.

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

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

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

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

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

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

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

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

<.footer variant="unbordered" color="light"></.footer>

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

<.footer variant="unbordered" 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.

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

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

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

<.footer variant="transparent" color="dark"></.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="light"></.footer>

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

<.footer variant="transparent" 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.

<.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.

<.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.

<.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.

<.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.

<.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.

<.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.

<.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 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 .

<.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 .

<.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>
  <.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 .

<.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>