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>Default White</.jumbotron>
<.jumbotron color="dark">Default Dark</.jumbotron>
<.jumbotron color="info">Default Info</.jumbotron>
<.jumbotron color="success">Default Success</.jumbotron>
<.jumbotron color="warning">Default Warning</.jumbotron>
<.jumbotron color="danger">Default Danger</.jumbotron>
<.jumbotron color="light">Default Light</.jumbotron>
<.jumbotron color="misc">Default Misc</.jumbotron>
<.jumbotron color="dawn">Default Dawn</.jumbotron>
<.jumbotron color="primary">Default Primary</.jumbotron>
<.jumbotron color="secondary">Default 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">Default White</.jumbotron>
<.jumbotron variant="outline" color="dark">Default Dark</.jumbotron>
<.jumbotron variant="outline" color="info">Default Info</.jumbotron>
<.jumbotron variant="outline" color="success">Default Success</.jumbotron>
<.jumbotron variant="outline" color="warning">Default Warning</.jumbotron>
<.jumbotron variant="outline" color="danger">Default Danger</.jumbotron>
<.jumbotron variant="outline" color="light">Default Light</.jumbotron>
<.jumbotron variant="outline" color="misc">Default Misc</.jumbotron>
<.jumbotron variant="outline" color="dawn">Default Dawn</.jumbotron>
<.jumbotron variant="outline" color="primary">Default Primary</.jumbotron>
<.jumbotron variant="outline" color="secondary">Default 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">Default White</.jumbotron>
<.jumbotron variant="shadow" color="dark">Default Dark</.jumbotron>
<.jumbotron variant="shadow" color="info">Default Info</.jumbotron>
<.jumbotron variant="shadow" color="success">Default Success</.jumbotron>
<.jumbotron variant="shadow" color="warning">Default Warning</.jumbotron>
<.jumbotron variant="shadow" color="danger">Default Danger</.jumbotron>
<.jumbotron variant="shadow" color="light">Default Light</.jumbotron>
<.jumbotron variant="shadow" color="misc">Default Misc</.jumbotron>
<.jumbotron variant="shadow" color="dawn">Default Dawn</.jumbotron>
<.jumbotron variant="shadow" color="primary">Default Primary</.jumbotron>
<.jumbotron variant="shadow" color="secondary">Default Secondary</.jumbotron>

Unbordered Variant

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

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="unbordered">Default White</.jumbotron>
<.jumbotron variant="unbordered" color="dark">Default Dark</.jumbotron>
<.jumbotron variant="unbordered" color="info">Default Info</.jumbotron>
<.jumbotron variant="unbordered" color="success">Default Success</.jumbotron>
<.jumbotron variant="unbordered" color="warning">Default Warning</.jumbotron>
<.jumbotron variant="unbordered" color="danger">Default Danger</.jumbotron>
<.jumbotron variant="unbordered" color="light">Default Light</.jumbotron>
<.jumbotron variant="unbordered" color="misc">Default Misc</.jumbotron>
<.jumbotron variant="unbordered" color="dawn">Default Dawn</.jumbotron>
<.jumbotron variant="unbordered" color="primary">Default Primary</.jumbotron>
<.jumbotron variant="unbordered" color="secondary">Default 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">Default White</.jumbotron>
<.jumbotron variant="transparent" color="dark">Default Dark</.jumbotron>
<.jumbotron variant="transparent" color="info">Default Info</.jumbotron>
<.jumbotron variant="transparent" color="success">Default Success</.jumbotron>
<.jumbotron variant="transparent" color="warning">Default Warning</.jumbotron>
<.jumbotron variant="transparent" color="danger">Default Danger</.jumbotron>
<.jumbotron variant="transparent" color="light">Default Light</.jumbotron>
<.jumbotron variant="transparent" color="misc">Default Misc</.jumbotron>
<.jumbotron variant="transparent" color="dawn">Default Dawn</.jumbotron>
<.jumbotron variant="transparent" color="primary">Default Primary</.jumbotron>
<.jumbotron variant="transparent" color="secondary">Default 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">Default White</.jumbotron>
<.jumbotron space="small">Default Dark</.jumbotron>
<.jumbotron space="medium">Default Info</.jumbotron>
<.jumbotron space="large">Default Success</.jumbotron>
<.jumbotron space="extra_large">Default 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">Default White</.jumbotron>
<.jumbotron padding="small">Default Dark</.jumbotron>
<.jumbotron padding="medium">Default Info</.jumbotron>
<.jumbotron padding="large">Default Success</.jumbotron>
<.jumbotron padding="extra_large">Default 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-light">This is a Light 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, shadow, unbordered.
color	string	No	Determines the color theme of the jumbotron. Values: white, primary, secondary, dark, success, warning, danger, info, light, misc, dawn.
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 - unbordered	Yes
`--color`	string	white - primary - secondary - dark - success - warning - danger - info - light - 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