Jumbotron
v0.0.10
mix mishka.ui.gen.component jumbotron
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 draws attention to important content.
Overview of the Phoenix and LiveView Jumbotron Component
Your all-in-one solution for Phoenix LiveView components, delivering enterprise-grade quality and reliability. Discover a comprehensive suite of pre-built components designed to accelerate your development workflow and maintain consistency across your applications
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.
Base color & Variant
Base color & Variant
Your all-in-one solution for Phoenix LiveView components, tailored to your needs.
<.jumbotron>Base vairant an color</.jumbotron>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.
Default Variant
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="default" color="natural">Natural</.jumbotron>
<.jumbotron variant="default" color="white">White</.jumbotron>
<.jumbotron variant="default" color="dark">Dark</.jumbotron>
<.jumbotron variant="default" color="info">Info</.jumbotron>
<.jumbotron variant="default" color="success">Success</.jumbotron>
<.jumbotron variant="default" color="warning">Warning</.jumbotron>
<.jumbotron variant="default" color="danger">Danger</.jumbotron>
<.jumbotron variant="default" color="silver">Silver</.jumbotron>
<.jumbotron variant="default" color="misc">Misc</.jumbotron>
<.jumbotron variant="default" color="dawn">Dawn</.jumbotron>
<.jumbotron variant="default" color="primary">Primary</.jumbotron>
<.jumbotron variant="default" 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.
Outline Variant
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" color="natural">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.
Shadow Variant
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" color="natural">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.
bordered Variant
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" color="natural">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.
Transparent Variant
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" color="natural">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.
Gradient Variant
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" color="natural">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.
Space prop
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.
Padding prop
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.
Font weight prop
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.
Border size prop
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.
Border position prop
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>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_size
|
string
|
extra_small
| — | No | — |
border_position
|
string
|
bottom
| — | No | — |
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_largedouble_largetriple_largequadruple_largenone
| No | Determines padding for items |
class
|
any
| — | — | No | Custom CSS class for additional styling |
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
|
--padding
|
extra_smallsmallmediumlargeextra_largedouble_largetriple_largequadruple_largenone
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component jumbotron