Mishka

Jumbotron

New version v0.0.1 🚀

customizable Phoenix LiveView jumbotron component for highlighting key marketing messages or announcements, with various style options.

Installation:

mix mishka.ui.gen.component jumbotron

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless

Overview of the Phoenix and LiveView Jumbotron Component

The Mishka Chelekom Jumbotron component is a Phoenix LiveView component designed to create large, prominent sections within your application for showcasing key marketing messages or announcements. It offers a flexible layout that can optionally extend across the entire viewport, making it ideal for attracting attention to important content.

This Phoenix LiveView component allows developers to easily customize the appearance and styling of the Jumbotron by using props for background colors, borders, spacing, and more. With options for different variants, you can create visually appealing, tailored sections for your application without needing to write extensive CSS.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.

Default Variant

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

Welcome to Mishka Chelekom

Your all-in-one solution for Phoenix LiveView components, tailored to your needs.

<!--You can use any HTML tag or Mishka Chelekom components within jumbotron tags-->
<.jumbotron>Natural</.jumbotron>
<.jumbotron color="white">White</.jumbotron>
<.jumbotron color="dark">Dark</.jumbotron>
<.jumbotron color="info">Info</.jumbotron>
<.jumbotron color="success">Success</.jumbotron>
<.jumbotron color="warning">Warning</.jumbotron>
<.jumbotron color="danger">Danger</.jumbotron>
<.jumbotron color="silver">Silver</.jumbotron>
<.jumbotron color="misc">Misc</.jumbotron>
<.jumbotron color="dawn">Dawn</.jumbotron>
<.jumbotron color="primary">Primary</.jumbotron>
<.jumbotron color="secondary">Secondary</.jumbotron>

Outline Variant

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

Welcome to Mishka Chelekom

Your all-in-one solution for Phoenix LiveView components, tailored to your needs.

<!--You can use any HTML tag or Mishka Chelekom components within jumbotron tags-->
<.jumbotron variant="outline">Natural</.jumbotron>
<.jumbotron variant="outline" color="info">Info</.jumbotron>
<.jumbotron variant="outline" color="success">Success</.jumbotron>
<.jumbotron variant="outline" color="warning">Warning</.jumbotron>
<.jumbotron variant="outline" color="danger">Danger</.jumbotron>
<.jumbotron variant="outline" color="silver">Silver</.jumbotron>
<.jumbotron variant="outline" color="misc">Misc</.jumbotron>
<.jumbotron variant="outline" color="dawn">Dawn</.jumbotron>
<.jumbotron variant="outline" color="primary">Primary</.jumbotron>
<.jumbotron variant="outline" color="secondary">Secondary</.jumbotron>

Shadow Variant

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

Welcome to Mishka Chelekom

Your all-in-one solution for Phoenix LiveView components, tailored to your needs.

<!--You can use any HTML tag or Mishka Chelekom components within jumbotron tags-->
<.jumbotron variant="shadow">Natural</.jumbotron>
<.jumbotron variant="shadow" color="info">Info</.jumbotron>
<.jumbotron variant="shadow" color="success">Success</.jumbotron>
<.jumbotron variant="shadow" color="warning">Warning</.jumbotron>
<.jumbotron variant="shadow" color="danger">Danger</.jumbotron>
<.jumbotron variant="shadow" color="silver">Silver</.jumbotron>
<.jumbotron variant="shadow" color="misc">Misc</.jumbotron>
<.jumbotron variant="shadow" color="dawn">Dawn</.jumbotron>
<.jumbotron variant="shadow" color="primary">Primary</.jumbotron>
<.jumbotron variant="shadow" color="secondary">Secondary</.jumbotron>

bordered Variant

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

Welcome to Mishka Chelekom

Your all-in-one solution for Phoenix LiveView components, tailored to your needs.

<!--You can use any HTML tag or Mishka Chelekom components within jumbotron tags-->
<.jumbotron variant="bordered">Natural</.jumbotron>
<.jumbotron variant="bordered" color="dark">Dark</.jumbotron>
<.jumbotron variant="bordered" color="white">White</.jumbotron>
<.jumbotron variant="bordered" color="info">Info</.jumbotron>
<.jumbotron variant="bordered" color="success">Success</.jumbotron>
<.jumbotron variant="bordered" color="warning">Warning</.jumbotron>
<.jumbotron variant="bordered" color="danger">Danger</.jumbotron>
<.jumbotron variant="bordered" color="silver">Silver</.jumbotron>
<.jumbotron variant="bordered" color="misc">Misc</.jumbotron>
<.jumbotron variant="bordered" color="dawn">Dawn</.jumbotron>
<.jumbotron variant="bordered" color="primary">Primary</.jumbotron>
<.jumbotron variant="bordered" color="secondary">Secondary</.jumbotron>

Transparent Variant

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

Welcome to Mishka Chelekom

Your all-in-one solution for Phoenix LiveView components, tailored to your needs.

<!--You can use any HTML tag or Mishka Chelekom components within jumbotron tags-->
<.jumbotron variant="transparent">Natural</.jumbotron>
<.jumbotron variant="transparent" color="info">Info</.jumbotron>
<.jumbotron variant="transparent" color="success">Success</.jumbotron>
<.jumbotron variant="transparent" color="warning">Warning</.jumbotron>
<.jumbotron variant="transparent" color="danger">Danger</.jumbotron>
<.jumbotron variant="transparent" color="silver">Silver</.jumbotron>
<.jumbotron variant="transparent" color="misc">Misc</.jumbotron>
<.jumbotron variant="transparent" color="dawn">Dawn</.jumbotron>
<.jumbotron variant="transparent" color="primary">Primary</.jumbotron>
<.jumbotron variant="transparent" color="secondary">Secondary</.jumbotron>

Gradient Variant

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

Welcome to Mishka Chelekom

Your all-in-one solution for Phoenix LiveView components, tailored to your needs.

<!--You can use any HTML tag or Mishka Chelekom components within jumbotron tags-->
<.jumbotron variant="transparent">Natural</.jumbotron>
<.jumbotron variant="transparent" color="info">Info</.jumbotron>
<.jumbotron variant="transparent" color="success">Success</.jumbotron>
<.jumbotron variant="transparent" color="warning">Warning</.jumbotron>
<.jumbotron variant="transparent" color="danger">Danger</.jumbotron>
<.jumbotron variant="transparent" color="silver">Silver</.jumbotron>
<.jumbotron variant="transparent" color="misc">Misc</.jumbotron>
<.jumbotron variant="transparent" color="dawn">Dawn</.jumbotron>
<.jumbotron variant="transparent" color="primary">Primary</.jumbotron>
<.jumbotron variant="transparent" color="secondary">Secondary</.jumbotron>

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

Welcome to Mishka Chelekom

Your all-in-one solution for Phoenix LiveView components, tailored to your needs.

<.jumbotron space="extra_small">White</.jumbotron>
<.jumbotron space="small">Dark</.jumbotron>
<.jumbotron space="medium">Info</.jumbotron>
<.jumbotron space="large">Success</.jumbotron>
<.jumbotron space="extra_large">Warning</.jumbotron>

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

Welcome to Mishka Chelekom

Your all-in-one solution for Phoenix LiveView components, tailored to your needs.

<.jumbotron padding="extra_small">White</.jumbotron>
<.jumbotron padding="small">Dark</.jumbotron>
<.jumbotron padding="medium">Info</.jumbotron>
<.jumbotron padding="large">Success</.jumbotron>
<.jumbotron padding="extra_large">Warning</.jumbotron>

Font weight prop

The font_weight prop in the Mishka Chelekom Jumbotron component allows developers to adjust the thickness of text displayed within the jumbotron. By offering options such as font-light, font-medium, font-semibold, and font-bold, the component ensures flexibility in achieving the desired emphasis on key content. This customization is essential for tailoring the visual impact of headings, subheadings, or body text, giving developers control over how prominently the text stands out on the page. Whether you want a subtle or bold appearance, the font_weight prop easily adapts to the specific needs of your design.

Welcome to Mishka Chelekom

Your all-in-one solution for Phoenix LiveView components, tailored to your needs.

<.jumbotron font_weight="font-thin">This is a Thin font weight</.jumbotron>
<.jumbotron font_weight="font-Silver">This is a Silver font weight</.jumbotron>
<.jumbotron font_weight="font-normal">This is a Normal font weight</.jumbotron>
<.jumbotron font_weight="font-medium">This is a Medium font weight</.jumbotron>
<.jumbotron font_weight="font-bold">This is a Bold font weight</.jumbotron>
<.jumbotron font_weight="font-black">This is a Black font weight</.jumbotron>

Border size prop

The border_size attribute in the Mishka Chelekom Jumbotron component allows developers to customize the thickness of the borders applied to the top, bottom, or vertical sides of the jumbotron. Options such as extra_small, small, medium, large, and extra_large give flexibility in controlling the border thickness. For instance, choosing extra_small adds a minimal border, while extra_large adds a more prominent one. This prop provides control over the visual separation between sections of content, making it easier to create a clean and well-structured layout.

Welcome to Mishka Chelekom

Your all-in-one solution for Phoenix LiveView components, tailored to your needs.

<.jumbotron border_size="none">No Border</.jumbotron>
<.jumbotron border_size="extra_small">Extra Small Border</.jumbotron>
<.jumbotron border_size="small">Small Border</.jumbotron>
<.jumbotron border_size="medium">Medium Border</.jumbotron>
<.jumbotron border_size="large">Large Border</.jumbotron>
<.jumbotron border_size="extra_large">Extra Large Border</.jumbotron>

Border position prop

The border_position attribute in the Mishka Chelekom Jumbotron component allows developers to specify where the border should be applied. Options include top, bottom, and vertical, providing flexibility in design. For example, setting the position to top will only display a border at the top of the jumbotron, while vertical applies the border to both the top and bottom. This customization helps enhance the visual hierarchy of the content and improves the structure by clearly defining sections or boundaries within the jumbotron.

Welcome to Mishka Chelekom

Your all-in-one solution for Phoenix LiveView components, tailored to your needs.

<.jumbotron border_position="top">Top Border</.jumbotron>
<.jumbotron border_position="bottom">Bottom Border</.jumbotron>
<.jumbotron border_position="vertical">Vertical Borders</.jumbotron>

Jumbotron component props

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
variant	string	No	Determines the style of the jumbotron. Values: default, outline, transparent, gradient, shadow, bordered.
color	string	No	Determines the color theme of the jumbotron. Values: natural, primary, secondary, success, warning, danger, info, silver, misc, dawn. The default and bordered variants have extra color options: dark and white, which in both light mode and dark mode, these colors are always the same.
border_size	string	No	Determines the border size of the jumbotron. Default is none.
border_position	string	No	Specifies the position of the border. Default is bottom.
space	string	No	Space between items inside the jumbotron.
font_weight	string	No	Determines the font weight. Default is font-normal.
padding	string	No	Determines the padding for items. Default is none.
class	string	No	Custom CSS class for additional styling.

Jumbotron CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - outline - transparent - shadow - bordered - gradient	Yes
`--color`	string	white - primary - secondary - dark - success - warning - danger - info - silver - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--space`	string	extra_small - small - medium - large - extra_large	Yes
`--padding`	string	extra_small - small - medium - large - extra_large - double_large - triple_large - quadruple_large - none	Yes
`--only`	string	jumbotron	Yes
`--module`	string	Something	NO