Mishka
Chelekom

Banner

v0.0.10

v0.0.10StableComponentStatelessJS-moduleApache-2.0
Installation mix mishka.ui.gen.component banner
Source View Source

Overview of the Phoenix and LiveView Banner Component

The Mishka Chelekom Banner module provides versatile banners with a variety of styles and colors. It offers an effective way to display announcements, notifications, or important information. Support components like Dismissable Banners, which allow users to hide banners with a smooth transition, enhancing user control and interactivity.

The Mishka Chelekom Banner component integrates seamlessly with Phoenix LiveView applications, offering customizable positioning and sizes to fit any design. With this Phoenix LiveView component, users can display banners for promotions, warnings, or announcements, with real-time updates.

Base Variant

Base Variant

Base color and variant banner component
heex
<.banner id="banner-base">Base banner color & variant</.banner>

Default Variant

The default style of the Mishka Chelekom banner 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

Banner Default variant natural
Banner Default variant White
Banner Default variant Dark
Banner Default variant Info
Banner Default variant Success
Banner Default variant Warning
Banner Default variant Danger
Banner Default variant silver
Banner Default variant Misc
Banner Default variant Dawn
Banner Default variant Primary
Banner Default variant Secondary
heex
<.banner id="banner-default-natural" variant="default" color="natural">Default natural</.banner>
<.banner id="banner-default-white" variant="default" color="white">Default white</.banner>
<.banner id="banner-default-dark" variant="default" color="dark">Default Dark</.banner>
<.banner id="banner-default-info" variant="default" color="info">Default Info</.banner>
<.banner id="banner-default-success" variant="default" color="success">Default Success</.banner>
<.banner id="banner-default-warning" variant="default" color="warning">Default Warning</.banner>
<.banner id="banner-default-danger" variant="default" color="danger">Default Danger</.banner>
<.banner id="banner-default-silver" variant="default" color="silver">Default Silver</.banner>
<.banner id="banner-default-misc" variant="default" color="misc">Default Misc</.banner>
<.banner id="banner-default-dawn" variant="default" color="dawn">Default Dawn</.banner>
<.banner id="banner-default-primary" variant="default" color="primary">Default Primary</.banner>
<.banner id="banner-default-secondary" variant="default" color="secondary">Default Secondary</.banner>

Outline Variant

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

Outline Variant

Banner outline variant natural 12
Banner outline variant Info 14
Banner outline variant Success 15
Banner outline variant Warning 16
Banner outline variant Danger 17
Banner outline variant silver 18
Banner outline variant Misc 19
Banner outline variant Dawn 20
Banner outline variant Primary 21
Banner outline variant Secondary 22
heex
<.banner id="banner-outline" variant="outline">Outline natural</.banner>
<.banner id="banner-outline-info" variant="outline" color="info">Outline Info</.banner>
<.banner id="banner-outline-success" variant="outline" color="success">Outline Success</.banner>
<.banner id="banner-outline-warning" variant="outline" color="warning">Outline Warning</.banner>
<.banner id="banner-outline-danger" variant="outline" color="danger">Outline Danger</.banner>
<.banner id="banner-outline-silver" variant="outline" color="silver">Outline Silver</.banner>
<.banner id="banner-outline-misc" variant="outline" color="misc">Outline Misc</.banner>
<.banner id="banner-outline-dawn" variant="outline" color="dawn">Outline Dawn</.banner>
<.banner id="banner-outline-primary" variant="outline" color="primary">Outline Primary</.banner>
<.banner id="banner-outline-secondary" variant="outline" color="secondary">Outline Secondary</.banner>

Shadow Variant

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

Shadow Variant

Banner shadow variant natural 23
Banner shadow variant Info 25
Banner shadow variant Success 26
Banner shadow variant Warning 27
Banner shadow variant Danger 28
Banner shadow variant silver 29
Banner shadow variant Misc 30
Banner shadow variant Dawn 31
Banner shadow variant Primary 32
Banner shadow variant Secondary 33
heex
<.banner id="banner-shadow" variant="shadow">Shadow natural</.banner>
<.banner id="banner-shadow-info" variant="shadow" color="info">Shadow Info</.banner>
<.banner id="banner-shadow-success" variant="shadow" color="success">Shadow Success</.banner>
<.banner id="banner-shadow-warning" variant="shadow" color="warning">Shadow Warning</.banner>
<.banner id="banner-shadow-danger" variant="shadow" color="danger">Shadow Danger</.banner>
<.banner id="banner-shadow-silver" variant="shadow" color="silver">Shadow Silver</.banner>
<.banner id="banner-shadow-misc" variant="shadow" color="misc">Shadow Misc</.banner>
<.banner id="banner-shadow-dawn" variant="shadow" color="dawn">Shadow Dawn</.banner>
<.banner id="banner-shadow-primary" variant="shadow" color="primary">Shadow Primary</.banner>
<.banner id="banner-shadow-secondary" variant="shadow" color="secondary">Shadow Secondary</.banner>

Bordered Variant

The Bordered variant of the Mishka Chelekom banner 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

Example of Bordered banner
Example of Bordered banner
Example of Bordered banner
Example of Bordered banner
Example of Bordered banner
Example of Bordered banner
Example of Bordered banner
Example of Bordered banner
Example of Bordered banner
Example of Bordered banner
heex
<.banner id="banner-bordered" variant="bordered">Bordered natural</.banner>
<.banner id="banner-bordered-dark" variant="bordered" color="dark">Bordered Dark</.banner>
<.banner id="banner-bordered-white" variant="bordered" color="white">Bordered White</.banner>
<.banner id="banner-bordered-info" variant="bordered" color="info">Bordered Info</.banner>
<.banner id="banner-bordered-success" variant="bordered" color="success">Bordered Success</.banner>
<.banner id="banner-bordered-warning" variant="bordered" color="warning">Bordered Warning</.banner>
<.banner id="banner-bordered-danger" variant="bordered" color="danger">Bordered Danger</.banner>
<.banner id="banner-bordered-silver" variant="bordered" color="silver">Bordered Silver</.banner>
<.banner id="banner-bordered-misc" variant="bordered" color="misc">Bordered Misc</.banner>
<.banner id="banner-bordered-dawn" variant="bordered" color="dawn">Bordered Dawn</.banner>
<.banner id="banner-bordered-primary" variant="bordered" color="primary">Bordered Primary</.banner>
<.banner id="banner-bordered-secondary" variant="bordered" color="secondary">Bordered Secondary</.banner>

Transparent Variant

Transparent Variant

Banner Transparent variant natural 45
Banner Transparent variant Info 47
Banner Transparent variant Success 48
Banner Transparent variant Warning 49
Banner Transparent variant Danger 50
Banner Transparent variant silver 51
Banner Transparent variant Misc 52
Banner Transparent variant Dawn 53
Banner Transparent variant Primary 54
Banner Transparent variant Secondary 55
heex
<.banner id="banner-transparent" variant="transparent">Transparent natural</.banner>
<.banner id="banner-transparent-info" variant="transparent" color="info">Transparent Info</.banner>
<.banner id="banner-transparent-success" variant="transparent" color="success">Transparent Success</.banner>
<.banner id="banner-transparent-warning" variant="transparent" color="warning">Transparent Warning</.banner>
<.banner id="banner-transparent-danger" variant="transparent" color="danger">Transparent Danger</.banner>
<.banner id="banner-transparent-silver" variant="transparent" color="silver">Transparent Silver</.banner>
<.banner id="banner-transparent-misc" variant="transparent" color="misc">Transparent Misc</.banner>
<.banner id="banner-transparent-dawn" variant="transparent" color="dawn">Transparent Dawn</.banner>
<.banner id="banner-transparent-primary" variant="transparent" color="primary">Transparent Primary</.banner>
<.banner id="banner-transparent-secondary" variant="transparent" color="secondary">Transparent Secondary</.banner>

Gradient Variant

Gradient Variant

Banner gradient variant natural
Banner gradient variant Info
Banner gradient variant Success
Banner gradient variant Warning
Banner gradient variant Danger
Banner gradient variant silver
Banner gradient variant Misc
Banner gradient variant Dawn
Banner gradient variant Primary
Banner gradient variant Secondary
heex
<.banner id="banner-gradient" variant="gradient">Gradient natural</.banner>
<.banner id="banner-gradient-info" variant="gradient" color="info">Gradient Info</.banner>
<.banner id="banner-gradient-success" variant="gradient" color="success">Gradient Success</.banner>
<.banner id="banner-gradient-warning" variant="gradient" color="warning">Gradient Warning</.banner>
<.banner id="banner-gradient-danger" variant="gradient" color="danger">Gradient Danger</.banner>
<.banner id="banner-gradient-silver" variant="gradient" color="silver">Gradient Silver</.banner>
<.banner id="banner-gradient-misc" variant="gradient" color="misc">Gradient Misc</.banner>
<.banner id="banner-gradient-dawn" variant="gradient" color="dawn">Gradient Dawn</.banner>
<.banner id="banner-gradient-primary" variant="gradient" color="primary">Gradient Primary</.banner>
<.banner id="banner-gradient-secondary" variant="gradient" color="secondary">Gradient Secondary</.banner>

Border prop in Phoenix LiveView banner component

The border prop offers values like extra_small, small, medium, large, and extra_large. These values control the border size of the banner, allowing you to adjust the thickness to suit your design. Additionally, you can use boolean props such as left_border, right_border, hide_border, and full_border to change the border position, add, or remove borders as needed for greater customization.

Border prop in Phoenix LiveView banner component

Border extra small of Banner 56
Border small of Banner 57
Border medium of Banner 58
Border large of Banner 59
Border extra large of Banner 60
heex
<.banner id="banner-border-extra-small" border="extra_small">Border extra small of Banner</.banner>
<.banner id="banner-border-small" border="small">Border small of Banner</.banner>
<.banner id="banner-border-medium" border="medium">Border medium of Banner</.banner>
<.banner id="banner-border-large" border="large">Border large of Banner</.banner>
<.banner id="banner-border-extra-large" border="extra_large">Border extra large of Banner</.banner>

Border position in Phoenix LiveView banner component

The border_position attribute in the Mishka Chelekom Banner component controls the placement of the border on the banner. It accepts values such as top, bottom, full, and none. By default, the border is positioned at the bottom of the banner. Setting the value to top adds a border at the top, while full applies a border around the entire banner. The none option removes the border entirely, offering full flexibility in banner styling.

Border position in Phoenix LiveView banner component

Border small of Banner 61
Border extra small of Banner 62
Border medium of Banner 63
Border large of Banner 64
heex
<.banner id="banner-border-position-top" border_position="top">Border top of Banner</.banner>
<.banner id="banner-border-position-bottom" border_position="bottom">Border bottom of Banner</.banner>
<.banner id="banner-border-position-full" border_position="full">Border full of Banner</.banner>
<.banner id="banner-border-position-none" border_position="none">No border on Banner</.banner>

Rounded and Rounded Position props

The rounded and rounded_position props in the Phoenix LiveView banner component provide flexibility for customizing the border radius of the banner's corners. By default, no border radius is applied (i.e., rounded="none" and rounded_position="none"), meaning the banner’s corners will remain sharp. However, if you wish to apply a rounded effect, you can specify a value for the rounded prop, which controls the size of the rounding (e.g., extra_small, small, medium, large, extra_large). Once you’ve set the rounding size, you can further refine the look by choosing a value for the rounded_position prop to determine which corners are rounded. For instance, setting rounded_position="top" will only round the top corners, rounded_position="bottom" will round just the bottom corners, and rounded_position="all" will round all four corners of the banner. This combination allows for customizable and visually appealing banners that fit the design needs of your Phoenix LiveView application.

Rounded and Rounded Position props

Rounded extra small 65
Rounded small 66
Rounded medium 67
Rounded large 68
Rounded extra large 69
heex
<.banner id="banner-rounded-extra-small-position-top" rounded="extra_small" rounded_position="top">extra small</.banner>
<.banner id="banner-rounded-extra-small-position-bottom" rounded="extra_small" rounded_position="bottom">extra small</.banner>
<.banner id="banner-rounded-extra-small-position-all" rounded="extra_small" rounded_position="all">extra small</.banner>

<.banner id="banner-rounded-small-position-top" rounded="small" rounded_position="top">small</.banner>
<.banner id="banner-rounded-small-position-bottom" rounded="small" rounded_position="bottom">small</.banner>
<.banner id="banner-rounded-small-position-all" rounded="small" rounded_position="all">small</.banner>

<.banner id="banner-rounded-medium-position-top" rounded="medium" rounded_position="top">medium</.banner>
<.banner id="banner-rounded-medium-position-bottom" rounded="medium" rounded_position="bottom">medium</.banner>
<.banner id="banner-rounded-medium-position-all" rounded="medium" rounded_position="all">medium</.banner>

<.banner id="banner-rounded-large-position-top" rounded="large" rounded_position="top">large</.banner>
<.banner id="banner-rounded-large-position-bottom" rounded="large" rounded_position="bottom">large</.banner>
<.banner id="banner-rounded-large-position-all" rounded="large" rounded_position="all">large</.banner>

<.banner id="banner-rounded-extra-large-position-top" rounded="extra_large" rounded_position="top">extra large</.banner>
<.banner id="banner-rounded-extra-large-position-bottom" rounded="extra_large" rounded_position="bottom">extra large</.banner>
<.banner id="banner-rounded-extra-large-position-all" rounded="extra_large" rounded_position="all">extra large</.banner>

<.banner id="banner-rounded-none-position-none" rounded="none" rounded_position="none">None</.banner>

Space prop

The space prop in the Phoenix LiveView banner component provides various spacing options, including extra_small, small, medium, large, and extra_large. These options define the vertical spacing between elements, with increasing amounts of space from extra_small to extra_large. If no specific value is provided, the default is set to extra_small, but custom values can also be applied when needed.

Space prop

Space extra small 70
Space small 71
Space medium 72
Space large 73
Space extra large 74
Space none 75
heex
<.banner id="banner-space-extra-small" space="extra_small">Space extra small</.banner>
<.banner id="banner-space-small" space="small">Space small</.banner>
<.banner id="banner-space-medium" space="medium">Space medium</.banner>
<.banner id="banner-space-large" space="large">Space large</.banner>
<.banner id="banner-space-extra-large" space="extra_large">Space extra large</.banner>
<.banner id="banner-space-none" space="none">Space none</.banner>

Padding prop

The padding in the Phoenix LiveView banner component provides various padding size options, including extra_small, small, medium, large, and extra_large. These options define the amount of space between the content inside the banner and its edges, with increasing amounts of padding from extra_small to extra_large. If no specific value is provided, the default padding is set to extra_small, ensuring a balanced and consistent look for the component.

Padding prop

Padding extra small 75
Padding small 76
Padding medium 77
Padding large 78
Padding extra large 79
Padding none 80
heex
<.banner id="banner-padding-extra-small" padding="extra_small">Padding extra small</.banner>
<.banner id="banner-padding-small" padding="small">Padding small</.banner>
<.banner id="banner-padding-medium" padding="medium">Padding medium</.banner>
<.banner id="banner-padding-large" padding="large">Padding large</.banner>
<.banner id="banner-padding-extra-large" padding="extra_large">Padding extra large</.banner>
<.banner id="banner-padding-none" padding="none">Padding none</.banner>

Font weight prop

The font_weight prop in the Phoenix LiveView banner component allows you to customize the font weight of the text within the banner using Tailwind CSS classes. By default, it is set to font-normal, giving the text a regular weight. However, you can easily modify this by passing a different Tailwind class for font weight, such as font-bold to make the text bold, or other classes like font-light or font-medium to adjust the thickness of the text as per your design needs. This flexibility allows for easy control over the typography within the banner, ensuring it aligns with the desired visual hierarchy.

Font weight prop

Font light 81
Font thin 82
Font black 83
heex
<.banner id="banner-font-weight-thin" font_weight="font-thin">Font thin</.banner>
<.banner id="banner-font-weight-light" font_weight="font-light">Font light</.banner>
<.banner id="banner-font-weight-normal" font_weight="font-normal">Font normal</.banner>
<.banner id="banner-font-weight-medium" font_weight="font-medium">Font medium</.banner>
<.banner id="banner-font-weight-semibold" font_weight="font-semibold">Font semibold</.banner>
<.banner id="banner-font-weight-bold" font_weight="font-bold">Font bold</.banner>
<.banner id="banner-font-weight-extrabold" font_weight="font-extrabold">Font extrabold</.banner>
<.banner id="banner-font-weight-black" font_weight="font-black">Font black</.banner>

Vertical position and vertical size props in Phoenix LiveView banner component

The vertical_position and vertical_size props in the Phoenix LiveView banner component give you control over where the banner appears vertically on the screen and how much space is between the banner and the screen's edge. The vertical_position prop can be set to either top or bottom, determining whether the banner is aligned at the top or bottom of the viewport. Meanwhile, the vertical_size prop adjusts the spacing, with options like none, extra_small, small, medium, large, and extra_large. These size values control how much space is applied between the banner and the top or bottom edge, allowing you to tailor the layout according to your design needs, whether you want the banner to be flush against the edge or spaced further away.

Vertical position and vertical size props in Phoenix LiveView banner component

Banner Bottom extra large space
Banner Bottom with small space
Banner top with small space
heex
<.banner id="banner-vertical-position-top-size-none" vertical_position="top" vertical_size="none">
  Vertical
</.banner>

<.banner id="banner-vertical-position-top-size-extra-small" vertical_position="top" vertical_size="extra_small">
  Vertical
</.banner>

<.banner id="banner-vertical-position-top-size-small" vertical_position="top" vertical_size="small">
  Vertical
</.banner>

<.banner id="banner-vertical-position-top-size-medium" vertical_position="top" vertical_size="medium">
  Vertical
</.banner>

<.banner id="banner-vertical-position-top-size-large" vertical_position="top" vertical_size="large">
  Vertical
</.banner>

<.banner id="banner-vertical-position-top-size-extra-large" vertical_position="top" vertical_size="extra_large">
  Vertical
</.banner>

<.banner id="banner-vertical-position-bottom-size-none" vertical_position="bottom" vertical_size="none">
 Vertical
</.banner>

<.banner id="banner-vertical-position-bottom-size-extra-small" vertical_position="bottom" vertical_size="extra_small">
 Vertical
</.banner>

<.banner id="banner-vertical-position-bottom-size-small" vertical_position="bottom" vertical_size="small">
 Vertical
</.banner>

<.banner id="banner-vertical-position-bottom-size-medium" vertical_position="bottom" vertical_size="medium">
 Vertical
</.banner>

<.banner id="banner-vertical-position-bottom-size-large" vertical_position="bottom" vertical_size="large">
 Vertical
</.banner>

<.banner id="banner-vertical-position-bottom-size-extra-large" vertical_position="bottom" vertical_size="extra_large">
 Vertical
</.banner>

<.banner id="banner-vertical-size-none" vertical_size="none">Vertical</.banner>

<.banner id="banner-vertical-size-extra-small" vertical_size="extra_small">Vertical</.banner>

<.banner id="banner-vertical-size-small" vertical_size="small">Vertical</.banner>

<.banner id="banner-vertical-size-medium" vertical_size="medium">Vertical</.banner>

<.banner id="banner-vertical-size-large" vertical_size="large">Vertical</.banner>

<.banner id="banner-vertical-size-extra-large" vertical_size="extra_large">Vertical</.banner>

Position and position size props

The position and position_size props in the Phoenix LiveView banner component allow for flexible control over the horizontal and vertical placement of the banner. The position prop offers various alignment options, such as top_left, top_right, bottom_left, bottom_right, center, and full. These determine where the banner will be placed on the screen. The position_size prop adds even more flexibility by controlling the distance between the banner and the edges of the viewport. You can choose values like none, extra_small, small, medium, large, and extra_large, adjusting how far the banner is from the specified position, whether it's on the top-left, top-right, bottom-left, or bottom-right. This allows for precise control over banner placement, ensuring it fits the layout and design requirements of the application.

Position and position size props

Banner Position top left
Banner Position top right
Banner position full
heex
<.banner id="banner-position-top-left-size-none" position="top_left" position_size="none">
  Top Left No Size
</.banner>

<.banner id="banner-position-top-left-size-extra-small" position="top_left" position_size="extra_small">
  Top Left Extra Small
</.banner>

<.banner id="banner-position-top-left-size-small" position="top_left" position_size="small">
  Top Left Small
</.banner>

<.banner id="banner-position-top-left-size-medium" position="top_left" position_size="medium">
  Top Left Medium
</.banner>

<.banner id="banner-position-top-left-size-large" position="top_left" position_size="large">
  Top Left Large
</.banner>

<.banner id="banner-position-top-left-size-extra-large" position="top_left" position_size="extra_large">
  Top Left Extra Large
</.banner>

<.banner id="banner-position-top-right-size-none" position="top_right" position_size="none">
  Top Right No Size
</.banner>

<.banner id="banner-position-top-right-size-extra-small" position="top_right" position_size="extra_small">
  Top Right Extra Small
</.banner>

<.banner id="banner-position-top-right-size-small" position="top_right" position_size="small">
  Top Right Small
</.banner>

<.banner id="banner-position-top-right-size-medium" position="top_right" position_size="medium">
  Top Right Medium
</.banner>

<.banner id="banner-position-top-right-size-large" position="top_right" position_size="large">
  Top Right Large
</.banner>

<.banner id="banner-position-top-right-size-extra-large" position="top_right" position_size="extra_large">
  Top Right Extra Large
</.banner>

<.banner id="banner-position-bottom-left-size-none" position="bottom_left" position_size="none">
  Bottom Left No Size
</.banner>

<.banner id="banner-position-bottom-left-size-extra-small" position="bottom_left" position_size="extra_small">
  Bottom Left Extra Small
</.banner>

<.banner id="banner-position-bottom-left-size-small" position="bottom_left" position_size="small">
  Bottom Left Small
</.banner>

<.banner id="banner-position-bottom-left-size-medium" position="bottom_left" position_size="medium">
  Bottom Left Medium
</.banner>

<.banner id="banner-position-bottom-left-size-large" position="bottom_left" position_size="large">
  Bottom Left Large
</.banner>

<.banner id="banner-position-bottom-left-size-extra-large" position="bottom_left" position_size="extra_large">
  Bottom Left Extra Large
</.banner>

<.banner id="banner-position-bottom-right-size-none" position="bottom_right" position_size="none">
  Bottom Right No Size
</.banner>

<.banner id="banner-position-bottom-right-size-extra-small" position="bottom_right" position_size="extra_small">
  Bottom Right Extra Small
</.banner>

<.banner id="banner-position-bottom-right-size-small" position="bottom_right" position_size="small">
  Bottom Right Small
</.banner>

<.banner id="banner-position-bottom-right-size-medium" position="bottom_right" position_size="medium">
  Bottom Right Medium
</.banner>

<.banner id="banner-position-bottom-right-size-large" position="bottom_right" position_size="large">
  Bottom Right Large
</.banner>

<.banner id="banner-position-bottom-right-size-extra-large" position="bottom_right" position_size="extra_large">
  Bottom Right Extra Large
</.banner>

<.banner id="banner-position-center" position="center">Center</.banner>

<.banner id="banner-position-full" position="full">Full Width</.banner>

Dismiss button position

The right_dismiss and left_dismiss props are boolean attributes in the Phoenix LiveView banner component that control the placement of the dismiss button. When right_dismiss is set to true, the dismiss button appears on the right side of the banner, allowing users to close the banner from that side. Similarly, setting left_dismiss to true places the dismiss button on the left side of the banner. By default, if neither prop is specified, the dismiss button will be positioned on the left side, as the left_dismiss behavior is considered the default. These options provide flexibility for aligning the dismiss button based on the design and user interaction needs.

Dismiss button position

Banner Right dismiss
Banner Left dismiss
heex
<.banner id="banner-right-dismiss" right_dismiss>Right dismiss</.banner>
<.banner id="banner-left-dismiss" left_dismiss>Left dismiss</.banner>