Blockquote

New version v0.0.1 🚀

Blockquote component for Phoenix and Phoenix LiveView, ideal for highlighting quotes or key content.

Installation:

mix mishka.ui.gen.component blockquote

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless

Overview of the Phoenix and LiveView Image 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.

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.

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.

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.

Mishka Developer Tools offers a set of macros and modules designed to simplify and accelerate the creation of Elixir applications. Mishka Installer is a powerful system plugin manager and runtime installer for Elixir.

Mishka Chelekom

The Blockquote component of Mishka Chelekom supports multiple styles and colors, providing customizable options to suit different design preferences. It helps emphasize important content and improves readability in your application.

Mishka Chelekom

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

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 Natural

Default White

Default Dark

Default Info

Default Success

Default Warning

Default Danger

Default Silver

Default Misc

Default Dawn

Default Primary

Default Secondary

<.blockquote>Default Natural</.blockquote>

<.blockquote color="white">Info</.blockquote>

<.blockquote color="indarkfo">Info</.blockquote>

<.blockquote color="info">Info</.blockquote>

<.blockquote color="success">Success</.blockquote>

<.blockquote color="warning">Warning</.blockquote>

<.blockquote color="danger">Danger</.blockquote>

<.blockquote color="silver">Light</.blockquote>

<.blockquote color="misc">Misc</.blockquote>

<.blockquote color="dawn">Dawn</.blockquote>

<.blockquote color="primary">Primary</.blockquote>

<.blockquote 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 Natural

Outline Info

Outline Success

Outline Warning

Outline Danger

Outline Silver

Outline Misc

Outline Dawn

Outline Primary

Outline Secondary

<.blockquote variant="outline">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 Silver mode.

Shadow Natural

Shadow Info

Shadow Success

Shadow Warning

Shadow Danger

Shadow Silver

Shadow Misc

Shadow Dawn

Shadow Primary

Shadow Secondary

<.blockquote variant="shadow">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 Natural

Bordered White

Bordered Dark

Bordered Info

Bordered Success

Bordered Warning

Bordered Danger

Bordered Silver

Bordered Misc

Bordered Dawn

Bordered Primary

Bordered Secondary

<.blockquote variant="bordered">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 card has gradients in various colors.

Gradient Natural

Gradient Info

Gradient Success

Gradient Warning

Gradient Danger

Gradient Silver

Gradient Misc

Gradient Dawn

Gradient Primary

Gradient Secondary

<.blockquote variant="gradient">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 Natural

Transparent Info

Transparent Success

Transparent Warning

Transparent Danger

Transparent Silver

Transparent Misc

Transparent Dawn

Primary

Secondary

<.blockquote variant="transparent">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 blcokquotes, allowing for different levels of rounding from subtle to more pronounced corners, depending on the design needs.

Rounded extra small

Rounded small

Rounded medium

Rounded large

Rounded extra large

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

Extra small border

Small border

Medium border

Large border

Extra large border

Right border

Without border

Full Border

<.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 extra small of blockquote

Size small of blockquote

Size Medium of blockquote

Size large of blockquote

Size extra large of blockquote

<.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 extra small of blockquote

Space small of blockquote

Space Medium of blockquote

Space large of blockquote

Space extra large of blockquote

<.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 extra small of blockquote

Padding small of blockquote

Padding medium of blockquote

Padding large of blockquote

Padding extra large of blockquote

<.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 blcokquote 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 prop of blockquote

<.blockquote icon_class="color-blue-400">medium</.blockquote>
<.blockquote icon="hero-star">extra small</.blockquote>
<.blockquote hide_icon>small</.blockquote>

Blockquote 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 blockquote. Supported values: default, outline, transparent, shadow, bordered, gradient.
color	string	No	Determines the color theme of the blockquote. Supported 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	string	No	Determines the border style. Supported values: extra_small, small, medium, large, extra_large, none.
rounded	string	No	Determines the border radius. Supported values: extra_small, small, medium, large, extra_large, full, none.
size	string	No	Determines the overall size of the elements, including padding, font size, and other items. Default: medium.
space	string	No	Space between items. Supported values: extra_small, small, medium, large, extra_large.
font_weight	string	No	Determines custom class for the font weight. Default: font-normal.
padding	string	No	Determines padding for items. Supported values: extra_small, small, medium, large, extra_large, none.
class	string	No	Custom CSS class for additional styling.
icon	string	No	Icon displayed alongside the blockquote. Default: hero-quote.
icon_class	string	No	Determines custom class for the icon.
caption	slot	No	Slot for displaying captions within the blockquote. Slot attributes include: image (displays an image), image_class (custom class for image), position (position of the caption; supported values: right, left, center).
left_border	boolean	No	Specifies if the blockquote has a left border.
right_border	boolean	No	Specifies if the blockquote has a right border.
hide_border	boolean	No	Hides the border of the blockquote.
full_border	boolean	No	Applies a full border around the blockquote.
hide_icon	boolean	No	Hides the icon in the blockquote.

Blockquote CLI Arguments

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