Blockquote
v0.0.10
mix mishka.ui.gen.component blockquote
Overview of the Phoenix and LiveView Blockquote Component
The Mishka Chelekom blockquote component is a Phoenix LiveView component that allows developers to create dynamic and customizable blockquotes, perfect for highlighting key content or quotes within applications. It offers flexibility in layout, allowing for easy adjustment of size, padding, and positioning, ensuring a polished and professional look.
Overview of the Phoenix and LiveView Blockquote Component
Mishka Chelekom is a modern UI component library, offering a comprehensive collection of reusable components for Phoenix LiveView applications. Built with Tailwind CSS and zero dependencies, it provides an elegant, responsive, and customizable design system that simplifies web development while maintaining high performance
This Phoenix LiveView component also supports adding captions and icons, making it ideal for enhancing both the visual appeal and the clarity of important information. With its responsive design and ease of use, this blockquote component improves content readability and presentation.
How to use Caption slot
The caption slot in the Mishka Chelekom blockquote component offers an intuitive way to enhance your blockquotes with additional context, such as displaying an image and descriptive text. By using the image attribute, you can include a profile picture or any relevant visual beside the caption, making it visually engaging. The position attribute allows you to control the alignment of the caption, offering options like right, left, or center for flexible layout customization. This feature is perfect for adding author names, roles, or attributions alongside a quote, further improving the clarity and aesthetics of your content.
How to use Caption slot
Mishka Chelekom UI Kit is a versatile, zero-dependency library built for Phoenix LiveView and powered by Tailwind CSS, offering over 80 essential UI components that can be installed with a simple one-command setup.
<.blockquote>
<p>Any content or HTML can go here.</p>
<:caption image="/path" image_class="classes" position="right">
Mishka Chelekom
</:caption>
<:caption position="left">
Mishka Chelekom
</:caption>
<:caption position="center">
Mishka Chelekom
</:caption>
</.blockquote>Base color & Variant
Base color & Variant
<.blockquote class="border">
<p>Any content or HTML can go here.</p>
<:caption image="/path" image_class="classes" position="right">
Mishka Chelekom
</:caption>
</.blockquote>Default Variant
The default style of the Mishka Chelekom blockquote 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 have also white and dark colors which are the same colors in the dark and light mode.
Default Variant
<.blockquote variant="default" color="natural">Default color="natural" Natural</.blockquote>
<.blockquote variant="default" color="white">Info</.blockquote>
<.blockquote variant="default" color="info">Info</.blockquote>
<.blockquote variant="default" color="info">Info</.blockquote>
<.blockquote variant="default" color="success">Success</.blockquote>
<.blockquote variant="default" color="warning">Warning</.blockquote>
<.blockquote variant="default" color="danger">Danger</.blockquote>
<.blockquote variant="default" color="silver">Light</.blockquote>
<.blockquote variant="default" color="misc">Misc</.blockquote>
<.blockquote variant="default" color="dawn">Dawn</.blockquote>
<.blockquote variant="default" color="primary">Primary</.blockquote>
<.blockquote variant="default" color="secondary">Secondary</.blockquote>Outline Variant
The outline style of the Mishka Chelekom blockquote features a border. Using a single setting, you can choose from various color variants to suit your design needs.
Outline Variant
<.blockquote variant="outline" color="natural">Natural</.blockquote>
<.blockquote variant="outline" color="info">Info</.blockquote>
<.blockquote variant="outline" color="success">Success</.blockquote>
<.blockquote variant="outline" color="warning">Warning</.blockquote>
<.blockquote variant="outline" color="danger">Danger</.blockquote>
<.blockquote variant="outline" color="silver">Light</.blockquote>
<.blockquote variant="outline" color="misc">Misc</.blockquote>
<.blockquote variant="outline" color="dawn">Dawn</.blockquote>
<.blockquote variant="outline" color="primary">Primary</.blockquote>
<.blockquote variant="outline" color="secondary">Secondary</.blockquote>Shadow Variant
The shadow variant of the Mishka Chelekom blockquote 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
<.blockquote variant="shadow" color="natural">Natural</.blockquote>
<.blockquote variant="shadow" color="info">Info</.blockquote>
<.blockquote variant="shadow" color="success">Success</.blockquote>
<.blockquote variant="shadow" color="warning">Warning</.blockquote>
<.blockquote variant="shadow" color="danger">Danger</.blockquote>
<.blockquote variant="shadow" color="silver">Light</.blockquote>
<.blockquote variant="shadow" color="misc">Misc</.blockquote>
<.blockquote variant="shadow" color="dawn">Dawn</.blockquote>
<.blockquote variant="shadow" color="primary">Primary</.blockquote>
<.blockquote variant="shadow" color="secondary">Secondary</.blockquote>Bordered Variant
The Bordered variant of the Mishka Chelekom blockquote is similar to the default variant, but without border. Bordered variant have also white and dark colors which are the same colors in the dark and light mode.
Bordered Variant
<.blockquote variant="bordered" color="natural">Natural</.blockquote>
<.blockquote variant="bordered" color="white">White</.blockquote>
<.blockquote variant="bordered" color="dark">Dark</.blockquote>
<.blockquote variant="bordered" color="info">Info</.blockquote>
<.blockquote variant="bordered" color="success">Success</.blockquote>
<.blockquote variant="bordered" color="warning">Warning</.blockquote>
<.blockquote variant="bordered" color="danger">Danger</.blockquote>
<.blockquote variant="bordered" color="silver">Light</.blockquote>
<.blockquote variant="bordered" color="misc">Misc</.blockquote>
<.blockquote variant="bordered" color="dawn">Dawn</.blockquote>
<.blockquote variant="bordered" color="primary">Primary</.blockquote>
<.blockquote variant="bordered" color="secondary">Secondary</.blockquote>Gradient Variant
The gradient variant of the Mishka Chelekom blockquote has gradients in various colors.
Gradient Variant
<.blockquote variant="gradient" color="natural">Natural</.blockquote>
<.blockquote variant="gradient" color="info">Info</.blockquote>
<.blockquote variant="gradient" color="success">Success</.blockquote>
<.blockquote variant="gradient" color="warning">Warning</.blockquote>
<.blockquote variant="gradient" color="danger">Danger</.blockquote>
<.blockquote variant="gradient" color="silver">Light</.blockquote>
<.blockquote variant="gradient" color="misc">Misc</.blockquote>
<.blockquote variant="gradient" color="dawn">Dawn</.blockquote>
<.blockquote variant="gradient" color="primary">Primary</.blockquote>
<.blockquote variant="gradient" color="secondary">Secondary</.blockquote>Transparent Variant
The transparent variant of the Mishka Chelekom blockquote is similar to the default variant, but without border and background color.
Transparent Variant
<.blockquote variant="transparent" color="natural">Natural</.blockquote>
<.blockquote variant="transparent" color="dark">Dark</.blockquote>
<.blockquote variant="transparent" color="info">Info</.blockquote>
<.blockquote variant="transparent" color="success">Success</.blockquote>
<.blockquote variant="transparent" color="warning">Warning</.blockquote>
<.blockquote variant="transparent" color="danger">Danger</.blockquote>
<.blockquote variant="transparent" color="silver">Light</.blockquote>
<.blockquote variant="transparent" color="misc">Misc</.blockquote>
<.blockquote variant="transparent" color="dawn">Dawn</.blockquote>
<.blockquote variant="transparent" color="primary">Primary</.blockquote>
<.blockquote variant="transparent" color="secondary">Secondary</.blockquote>Rounded prop in Phoenix LiveView Blockquote Component
The rounded prop offers values like extra_small, small, medium, large, and extra_large. These values control the border radius of the blockquotes, allowing for different levels of rounding from subtle to more pronounced corners, depending on the design needs.
Rounded prop in Phoenix LiveView Blockquote Component
<.blockquote rounded="extra_small">extra small</.blockquote>
<.blockquote rounded="small">small</.blockquote>
<.blockquote rounded="medium">medium</.blockquote>
<.blockquote rounded="large">large</.blockquote>
<.blockquote rounded="extra_large">extra large</.blockquote>Border prop
The border prop offers values like extra_small, small, medium, large, and extra_large. These values control the border size of the blockquotes, 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. For outline and bordered variant you can change the size of border
Border prop
<.blockquote border="extra_small">extra small</.blockquote>
<.blockquote border="small">small</.blockquote>
<.blockquote border="medium">medium</.blockquote>
<.blockquote border="large">large</.blockquote>
<.blockquote border="extra_large">extra large</.blockquote>
<.blockquote right_border>Right border</.blockquote>
<.blockquote left_border>Left border</.blockquote>
<.blockquote hide_border>Hide border</.blockquote>
<.blockquote full_border>Full</.blockquote>Size prop
The size prop offers values such as extra_small, small, medium, large, and extra_large. These values control both the icon size and text size within the blockquotes.
Size prop
<.blockquote size="extra_small">extra small</.blockquote>
<.blockquote size="small">small</.blockquote>
<.blockquote size="medium">medium</.blockquote>
<.blockquote size="large">large</.blockquote>
<.blockquote size="extra_large">extra large</.blockquote>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 blockquotes.
Space prop
<.blockquote space="extra_small">extra small</.blockquote>
<.blockquote space="small">small</.blockquote>
<.blockquote space="medium">medium</.blockquote>
<.blockquote space="large">large</.blockquote>
<.blockquote space="extra_large">extra large</.blockquote>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 blockquotes.
Padding prop
<.blockquote padding="extra_small">extra small</.blockquote>
<.blockquote padding="small">small</.blockquote>
<.blockquote padding="medium">medium</.blockquote>
<.blockquote padding="large">large</.blockquote>
<.blockquote padding="extra_large">extra large</.blockquote>Icon in Phoenix LiveView blockquote component
The icon prop in the Mishka Chelekom blockquote component allows you to add any Hero icon to your blockquote. By using the icon_class prop, you can customize the style of the icon to fit your design needs. If you want to hide the icon, the hide_icon prop, which is a boolean, allows you to do so. By default, the blockquote component displays the hero-quote icon unless the hide_icon prop is set to true.
Icon in Phoenix LiveView blockquote component
<.blockquote icon_class="color-blue-400">medium</.blockquote>
<.blockquote icon="hero-star">extra small</.blockquote>
<.blockquote hide_icon>small</.blockquote>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
|
basenaturalwhitedarkprimarysecondarysuccesswarningdangerinfosilvermiscdawn
| No | Determines color theme |
border
|
string
|
medium
| — | No | Determines border style |
rounded
|
string
|
small
|
extra_smallsmallmediumlargeextra_largefullnone
| No | Determines the border radius |
size
|
string
|
medium
|
extra_smallsmallmediumlargeextra_large
| No | Determines the overall size of the elements, including padding, font size, and other items |
space
|
string
|
small
|
extra_smallsmallmediumlargeextra_large
| No | Space between items |
font_weight
|
string
|
font-normal
| — | No | Determines custom class for the font weight |
padding
|
string
|
small
|
extra_smallsmallmediumlargeextra_largenone
| No | Determines padding for items |
class
|
any
| — | — | No | Custom CSS class for additional styling |
icon
|
string
|
hero-quote
| — | No | Icon displayed alongside of an item |
icon_class
|
string
| — | — | No | Determines custom class for the icon |
blockquote_class
|
string
| — | — | No | Determines custom class for the blockquote |
rest
|
global
| — | — | No | Global attributes can define defaults which are merged with attributes provided by the caller |
Slots
| Name | Required | Description |
|---|---|---|
caption
| No | — |
inner_block
| No | Inner block that renders HEEx content |
Attributes of the caption slot
| Name | Type | Default | Values | Required | Description |
|---|---|---|---|---|---|
image
|
string
| — | — | No | Image displayed alongside of an item |
image_class
|
string
| — | — | No | Determines custom class for the image |
alt
|
string
| — | — | No | Determines alt of image |
class
|
any
| — | — | No | Determines custom class for caption wrapper |
content_class
|
string
| — | — | No | Determines custom class for caption content |
position
|
string
| — |
rightleftcenter
| No | Determines the element position |
Options
Each option takes one or more of its values, separated by commas.
| Option | Values |
|---|---|
--variant
|
defaultoutlinetransparentshadowborderedgradientbase
|
--color
|
basenaturalwhitedarkprimarysecondarysuccesswarningdangerinfosilvermiscdawn
|
--size
|
extra_smallsmallmediumlargeextra_large
|
--rounded
|
extra_smallsmallmediumlargeextra_largefullnone
|
--space
|
extra_smallsmallmediumlargeextra_large
|
--padding
|
extra_smallsmallmediumlargeextra_largenone
|
--module
| A module name of your own |
What it generates
mix mishka.ui.gen.component blockquote