From 239cb94d5292911b97dddc3489483e78aad58584 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sat, 4 Jan 2025 18:49:19 +0100 Subject: [PATCH 01/10] autosize update --- docs/ui/components/autosize.mdx | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/docs/ui/components/autosize.mdx b/docs/ui/components/autosize.mdx index 69e1186243..d9d8541231 100644 --- a/docs/ui/components/autosize.mdx +++ b/docs/ui/components/autosize.mdx @@ -8,9 +8,17 @@ To be able to use the autosize in your application you will need to install the ## Default markup -Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it. +Add the autosize element to your input to make it automatically adjust to the length of a text as a user types it. -```html example centered columns={1} scrollable +To create autosize textarea, add the `data-bs-toggle="autosize"` attribute to the textarea element: + +```html + +``` + +Look at the example below to see how the autosize element works: + +```html example centered columns={1} scrollable background="bg-light" height="20rem" ``` From 56db187068bb2ef008d10ba0f4bd9bd29d6cc0b5 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sat, 4 Jan 2025 19:11:12 +0100 Subject: [PATCH 02/10] update colors in docs --- docs/ui/base/colors.mdx | 65 ++++++++++++++++++++++++++++++++++++++--- 1 file changed, 61 insertions(+), 4 deletions(-) diff --git a/docs/ui/base/colors.mdx b/docs/ui/base/colors.mdx index df723c2e91..4b9727ec49 100644 --- a/docs/ui/base/colors.mdx +++ b/docs/ui/base/colors.mdx @@ -8,18 +8,75 @@ bootstrapLink: utilities/colors/ Choose one of the available colors from the basic color palette and make your design attractive for users. You can use the colors to customize the design of components, indicate different states or suggest actions you want users to take. - + ## Light colors All available colors can come in pastel shades, which are perfect for more subtle designs and can be easily combined with the basic palette to create eye-catching designs. - + ## Gray palette - +The gray palette is a great choice for creating a neutral background for your design. It can be used to create a clean and professional look, and can be combined with other colors to create a harmonious design. + + ## Social colors - +Use the colors of popular social networks to create a recognizable design and make it easier for users to interact with your product. + + From 789cdff027ab33c068dd7e2c756e1711ab0fda03 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sat, 4 Jan 2025 20:12:15 +0100 Subject: [PATCH 03/10] docs typography improvements --- docs/ui/base/typography.mdx | 162 ++++++++++++++---------------------- 1 file changed, 63 insertions(+), 99 deletions(-) diff --git a/docs/ui/base/typography.mdx b/docs/ui/base/typography.mdx index 5c8788818c..e6e0af39f2 100644 --- a/docs/ui/base/typography.mdx +++ b/docs/ui/base/typography.mdx @@ -6,29 +6,38 @@ bootstrapLink: content/typography/ ## Headings -Use HTML headings to organize content on your website and make the structure clear and user-friendly. +Use HTML headings to organize content on your website and make the structure clear and user-friendly. The `h1` to `h6` tags are used to define HTML headings. +The `h1` tag is the highest level and the `h6` tag is the lowest level. -```html example vertical +```html

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
-
H6 Heading
+
H6 Heading
``` -```html +There is example of headings with different levels: + +```html example vertical columns={1}

H1 Heading

H2 Heading

H3 Heading

H4 Heading

H5 Heading
-
H6 Heading
+
H6 Heading
``` ## Paragraphs -Organize longer pieces of text into paragraphs using the `p` tag. +Organize longer pieces of text into paragraphs using the `p` tag. It is the most common element for text content. + +```html +

At vero eos et accusam et justo duo dolores et ea rebum.

+``` + +If you use second paragraph, it will be separated from the first one by a blank line. ```html example vertical centered columns={2}
@@ -37,14 +46,32 @@ Organize longer pieces of text into paragraphs using the `p` tag.
``` -```html -

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

-

At vero eos et accusam et justo duo dolores et ea rebum.

-``` ## Semantic text elements -Use a variety of semantic text elements, depending of how you want to display particular fragments of content. +Use a variety of semantic text elements, depending of how you want to display particular fragments of content. + +```html +I18N +Bold +Citation +Hello World! +Deleted +Emphasis +Italic +Inserted +Ctrl + S +Highlighted +Strikethrough +Sample +Text Subscripted +Text Superscripted + +Underline +x = y + 2 +``` + +Here is an example of semantic text elements: ```html example vertical separated columns={1}
I1f8N
@@ -66,25 +93,7 @@ Use a variety of semantic text elements, depending of how you want to display pa
x = y + 2
``` -```html -I18N -Bold -Citation -Hello World! -Deleted -Emphasis -Italic -Inserted -Ctrl + S -Highlighted -Strikethrough -Sample -Text Subscripted -Text Superscripted - -Underline -x = y + 2 -``` + ## Horizontal rules @@ -146,40 +155,11 @@ Tabler has been optimized to correctly display content in any language. It suppo

อักษรไทย

``` -```html -
Chinese
-

汉字

- -
Japanese
-

日本語の表記体系

- -
Cyrillic
-

Кириллица

- -
Greek
-

Eλληνική

- -
Georgian
-

ქართული დამწერლობა

- -
Armenian
-

Հայերենի այբուբեն

- -
Arabic
-

الحروف العربية

- -
Hebrew
-

אלפבית עברי

- -
Thai
-

อักษรไทย

-``` - ## Text transform Transform the content of components with text capitalization classes. -```html example vertical +```html example vertical centered separated columns={1}
Lowercased text.
Uppercased text.
Capitalized text.
@@ -195,7 +175,7 @@ Transform the content of components with text capitalization classes. Control the tracking (letter spacing) of an element and make it tight, wide or normal. -```html example vertical +```html example vertical centered separated columns={1}
Lorem ipsum dolor sit amet. Tight letter spacing.
Lorem ipsum dolor sit amet. Normal letter spacing.
Lorem ipsum dolor sit amet. Wide letter spacing.
@@ -211,44 +191,28 @@ Control the tracking (letter spacing) of an element and make it tight, wide or n Control the leading (line height) of an element. -```html example -
-
-
-
-
Lorem ipsum dolor sit amet. Dolor sit amet.
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet. Dolor sit amet.
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet. Dolor sit amet.
-
-
-
-
-
-
-
Lorem ipsum dolor sit amet. Dolor sit amet.
-
-
-
-
+```html example vertical centered separated columns={1} height="20rem" +

+ This is the long text with line height 1. Lorem ipsum dolor sit amet. Dolor sit amet. +

+

+ This is the long text with small line height. Lorem ipsum dolor sit amet. Dolor sit amet. +

+

+ This is the long text with base line height. Lorem ipsum dolor sit amet. Dolor sit amet. +

+

+ This is the long text with large line height. Lorem ipsum dolor sit amet. Dolor sit amet. +

``` +To control the line height of an element, use the following classes: + ```html -

Lorem ipsum dolor sit amet. Dolor sit amet.

-

Lorem ipsum dolor sit amet. Dolor sit amet.

-

Lorem ipsum dolor sit amet. Dolor sit amet.

-

Lorem ipsum dolor sit amet. Dolor sit amet.

+

...

+

...

+

...

+

...

``` ## Antialiasing @@ -257,7 +221,7 @@ Control the font smoothing of an element. Use the `.antialiased` utility to render text using subpixel antialiasing or use the `.subpixel-antialiased` utility to remove antialiasing. -```html example +```html example vertical centered separated columns={1}
Text with antialiasing
Text without antialiasing
``` @@ -266,7 +230,7 @@ Use the `.antialiased` utility to render text using subpixel antialiasing or use Use the `` to indicate input that is typically entered via keyboard. -```html example centered +```html example vertical centered
To edit settings, press ctrl + , or ctrl + C.
@@ -278,7 +242,7 @@ To edit settings, press ctrl + , or ctrl + From 0a3941f90338dcb6977690d60971d38c4f32acd9 Mon Sep 17 00:00:00 2001 From: codecalm Date: Sat, 4 Jan 2025 20:21:48 +0100 Subject: [PATCH 04/10] docs typography improvements --- docs/ui/base/typography.mdx | 134 +++++++++++++++++++++++++++++++++++- 1 file changed, 131 insertions(+), 3 deletions(-) diff --git a/docs/ui/base/typography.mdx b/docs/ui/base/typography.mdx index e6e0af39f2..7af69a44f2 100644 --- a/docs/ui/base/typography.mdx +++ b/docs/ui/base/typography.mdx @@ -93,7 +93,120 @@ Here is an example of semantic text elements:
x = y + 2
``` +## Blockquotes +Use the `blockquote` tag to indicate a section that is quoted from another source. If you want to cite the source, use the `cite` tag. + +```html +
+

We can't solve problems by using the same kind of thinking we used when we created them.

+ Albert Einstein +
+``` + +Here is an example of a blockquote: + +```html example vertical centered columns={1} +
+

We can't solve problems by using the same kind of thinking we used when we created them.

+ Albert Einstein +
+``` + +## Lists + +Use the `ul` tag for unordered lists and the `ol` tag for ordered lists. + +```html +
    +
  • First item
    • +
  • Second item
    • +
  • Third item
    • +
+ +
    +
  1. First item
    2. +
  2. Second item
    3. +
  3. Third item
    4. +
+``` + +Here are examples of unordered and ordered lists: + +```html example vertical centered columns={1} +
+
    +
  • First item
    • +
  • Second item
    • +
  • Third item
    • +
+
+
+
    +
  1. First item
    2. +
  2. Second item
    3. +
  3. Third item
    4. +
+
+``` + +If you want to create a nested list, you can use the `ul` or `ol` tag inside the `li` tag. + +```html +
    +
  • First item
    • +
  • Second item +
      +
    • First subitem
      • +
    • Second subitem
      • +
    +
    • +
  • Third item
    • +
+``` + +Here is an example of a nested list: + +```html example centered vertical columns={1} +
    +
  • First item
    • +
  • Second item +
      +
    • First subitem
      • +
    • Second subitem
      • +
    +
    • +
  • Third item
    • +
+``` + +## Description lists + +Use the `dl` tag for description lists, along with `dt` for terms and `dd` for descriptions. + +```html +
+
Term 1
+
...
+
Term 2
+
...
+
+``` + +Here is an example of a description list: + +```html example vertical centered columns={1} +
+
HTML
+
A markup language for creating web pages.
+ +
CSS
+
A style sheet language used for describing the look and formatting of a document written in a markup language.
+ +
JavaScript
+
A programming language commonly used to create interactive effects within web browsers.
+
+``` ## Horizontal rules @@ -113,13 +226,19 @@ Use the `hr` tag to represent a thematic break between paragraphs within one sec ## Horizontal rules with label -You can also add a label to a horizontal rule and align it as you see fit. +You can also add a label to a horizontal rule and align it as you see fit. To do it you can use the `hr-text` class with the `hr-text-start`, `hr-text-center`, or `hr-text-end` class. + +```html +
+ Rule text +
+``` ```html example vertical centered columns={2}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

-
+
Rule text

@@ -153,6 +272,7 @@ Tabler has been optimized to correctly display content in any language. It suppo

الحروف العربية

אלפבית עברי

อักษรไทย

+

zaółć gęślą jaźń

``` ## Text transform @@ -242,7 +362,15 @@ To edit settings, press ctrl + , or ctrl + + ... +
+``` + +Here is an example of a markdown container: ```html example centered background="white" columns={2} height="30rem"
From 8b798090d7406f3d0b5bbe4100cab31d44ecc74f Mon Sep 17 00:00:00 2001 From: codecalm Date: Sat, 4 Jan 2025 21:28:49 +0100 Subject: [PATCH 05/10] docs improvements --- docs/ui/base/typography.mdx | 134 +------------- docs/ui/components/spinners.mdx | 29 ++- docs/ui/components/statuses.mdx | 48 +++-- docs/ui/forms/form-color-check.mdx | 44 +++-- docs/ui/forms/form-elements.mdx | 20 ++- docs/ui/forms/form-helpers.mdx | 72 +++++++- docs/ui/forms/form-image-check.mdx | 71 +++++--- docs/ui/plugins/flags.mdx | 271 ++++++++++++++++++++++++++++- docs/ui/plugins/payments.mdx | 109 +++++++++++- 9 files changed, 597 insertions(+), 201 deletions(-) diff --git a/docs/ui/base/typography.mdx b/docs/ui/base/typography.mdx index 7af69a44f2..e6e0af39f2 100644 --- a/docs/ui/base/typography.mdx +++ b/docs/ui/base/typography.mdx @@ -93,120 +93,7 @@ Here is an example of semantic text elements:
x = y + 2
``` -## Blockquotes -Use the `blockquote` tag to indicate a section that is quoted from another source. If you want to cite the source, use the `cite` tag. - -```html -
-

We can't solve problems by using the same kind of thinking we used when we created them.

- Albert Einstein -
-``` - -Here is an example of a blockquote: - -```html example vertical centered columns={1} -
-

We can't solve problems by using the same kind of thinking we used when we created them.

- Albert Einstein -
-``` - -## Lists - -Use the `ul` tag for unordered lists and the `ol` tag for ordered lists. - -```html -
    -
  • First item
    • -
  • Second item
    • -
  • Third item
    • -
- -
    -
  1. First item
    2. -
  2. Second item
    3. -
  3. Third item
    4. -
-``` - -Here are examples of unordered and ordered lists: - -```html example vertical centered columns={1} -
-
    -
  • First item
    • -
  • Second item
    • -
  • Third item
    • -
-
-
-
    -
  1. First item
    2. -
  2. Second item
    3. -
  3. Third item
    4. -
-
-``` - -If you want to create a nested list, you can use the `ul` or `ol` tag inside the `li` tag. - -```html -
    -
  • First item
    • -
  • Second item -
      -
    • First subitem
      • -
    • Second subitem
      • -
    -
    • -
  • Third item
    • -
-``` - -Here is an example of a nested list: - -```html example centered vertical columns={1} -
    -
  • First item
    • -
  • Second item -
      -
    • First subitem
      • -
    • Second subitem
      • -
    -
    • -
  • Third item
    • -
-``` - -## Description lists - -Use the `dl` tag for description lists, along with `dt` for terms and `dd` for descriptions. - -```html -
-
Term 1
-
...
-
Term 2
-
...
-
-``` - -Here is an example of a description list: - -```html example vertical centered columns={1} -
-
HTML
-
A markup language for creating web pages.
- -
CSS
-
A style sheet language used for describing the look and formatting of a document written in a markup language.
- -
JavaScript
-
A programming language commonly used to create interactive effects within web browsers.
-
-``` ## Horizontal rules @@ -226,19 +113,13 @@ Use the `hr` tag to represent a thematic break between paragraphs within one sec ## Horizontal rules with label -You can also add a label to a horizontal rule and align it as you see fit. To do it you can use the `hr-text` class with the `hr-text-start`, `hr-text-center`, or `hr-text-end` class. - -```html -
- Rule text -
-``` +You can also add a label to a horizontal rule and align it as you see fit. ```html example vertical centered columns={2}

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

-
+
Rule text

@@ -272,7 +153,6 @@ Tabler has been optimized to correctly display content in any language. It suppo

الحروف العربية

אלפבית עברי

อักษรไทย

-

zaółć gęślą jaźń

``` ## Text transform @@ -362,15 +242,7 @@ To edit settings, press ctrl + , or ctrl + - ... -
-``` - -Here is an example of a markdown container: +If you can't use the CSS classes you want or if you just want to use HTML tags, use the `.markdown` class in a container. It will apply the default styles for markdown elements. ```html example centered background="white" columns={2} height="30rem"
diff --git a/docs/ui/components/spinners.mdx b/docs/ui/components/spinners.mdx index a743ac9312..70c91ec3c0 100644 --- a/docs/ui/components/spinners.mdx +++ b/docs/ui/components/spinners.mdx @@ -8,13 +8,19 @@ bootstrapLink: components/spinners/ Use the default spinner to notify users that an action they have taken is in progress, helping them avoid confusion. +```html + +``` + +Look at the example below to see how the spinner works: + ```html example centered ``` ## Colors -Choose one of the available colors to customize the spinner and make it suit your design. +Choose one of the available colors to customize the spinner and make it suit your design. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section. ```html example centered separated @@ -75,11 +81,20 @@ Growing spinners also come in a variety of colors to choose from. ``` -### Button with spinner +## Button with spinner Use buttons with spinners to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up. -```html example centered separated code +```html + + + Button + +``` + +Look at the example below to see how the button with a spinner works: + +```html example centered separated code background="bg-light" Button @@ -104,11 +119,15 @@ Use buttons with spinners to notify users that an action they have taken by clic ## Animated dots -```html example centered code +Use animated dots to show the loading state of a component. They provide feedback for an action a user has taken, when it takes a bit longer to complete. To do it you need to use the `.animated-dots` class on `span` element. + +```html example centered code background="bg-light"

Loading

``` -```html example centered separated +Use buttons with animated dots to notify users that an action they have taken by clicking the button is in progress and prevent them from clicking multiple times or giving up. + +```html example centered separated background="bg-light" Loading diff --git a/docs/ui/components/statuses.mdx b/docs/ui/components/statuses.mdx index a2474567d3..8df3ce97f7 100644 --- a/docs/ui/components/statuses.mdx +++ b/docs/ui/components/statuses.mdx @@ -5,7 +5,17 @@ description: Status dots are particularly useful if you want to make an interfac ## Default markup -```html example vertical height="7rem" +Use the default status to notify users about the status of a component or page, helping them avoid confusion. Full list of available colors can be found in the [Colors](/docs/ui/base/colors) section. + +```html +Blue +Azure +... +``` + +Look at the example below to see how the status works: + +```html example centered separated columns={2} Blue Azure Indigo @@ -20,15 +30,21 @@ description: Status dots are particularly useful if you want to make an interfac Cyan ``` + +## Status with dot + +You can add a dot to the status to make it more noticeable. To do this, use the `.status-dot` element inside the `.status` element. + ```html -Blue -Azure -... + + + Blue + ``` -## Status with dot +Look at the example below to see how the status with a dot works: -```html example vertical height="7rem" +```html example centered separated columns={2} Blue @@ -81,7 +97,9 @@ description: Status dots are particularly useful if you want to make an interfac ### Animated dot -```html example vertical height="7rem" +You can also animate the dot to make it more noticeable. To do this, use the `.status-dot-animated` class inside the `.status-dot` element. + +```html example centered separated columns={2} Blue @@ -134,7 +152,9 @@ description: Status dots are particularly useful if you want to make an interfac ## Lite status -```html example vertical height="7rem" +Use the lite status to make the status less noticeable. To do this, use the `.status-lite` class inside the `.status` element. + +```html example centered separated columns={2} Blue @@ -187,7 +207,9 @@ description: Status dots are particularly useful if you want to make an interfac ## Status dots -```html example centered separated height="7rem" +If you need only dot status, you can use the `.status-dot` class. + +```html example centered separated @@ -202,9 +224,9 @@ description: Status dots are particularly useful if you want to make an interfac ``` -### Animated dots +The dots can also be animated. To do this, use the `.status-dot-animated` class. -```html example centered separated height="7rem" +```html example centered separated @@ -221,7 +243,9 @@ description: Status dots are particularly useful if you want to make an interfac ## Status indicator -```html example vertical centered height="7rem" +Use the status indicator to show the status of a component or page. The status indicator can be animated. To do this, use the `.status-indicator-animated` class. + +```html example centered separated columns={1} centered diff --git a/docs/ui/forms/form-color-check.mdx b/docs/ui/forms/form-color-check.mdx index 06c988bcd7..edc1ed5bb0 100644 --- a/docs/ui/forms/form-color-check.mdx +++ b/docs/ui/forms/form-color-check.mdx @@ -1,10 +1,20 @@ --- title: Color check +description: The color check is a great way to make your form more user-friendly and engaging. You can use the color check to create a visually appealing form that will help users make decisions quickly and easily. --- -Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/getting-started/colors) to see the list of available colors. +Your input controls can come in a variety of colors, depending on your preferences. Click [here](/docs/ui/base/colors) to see the list of available colors. -```html example centered +```html + +``` + +There is also an example of a color input: + +```html example centered background="bg-light"
@@ -73,19 +83,21 @@ Your input controls can come in a variety of colors, depending on your preferenc +
+
+
``` -```html - -``` +If you need to select only one color, you can use the radio input type: -```html example centered + +```html example centered background="bg-light"
@@ -154,6 +166,12 @@ Your input controls can come in a variety of colors, depending on your preferenc +
+
+
@@ -161,7 +179,7 @@ Your input controls can come in a variety of colors, depending on your preferenc ```html ``` @@ -170,6 +188,12 @@ Your input controls can come in a variety of colors, depending on your preferenc Add an color picker to your form to let users customise it according to their preferences. +```html + +``` + +There is also an example of a color picker input: + ```html example centered
diff --git a/docs/ui/forms/form-elements.mdx b/docs/ui/forms/form-elements.mdx index 606160eb08..86bcb06d8a 100644 --- a/docs/ui/forms/form-elements.mdx +++ b/docs/ui/forms/form-elements.mdx @@ -7,16 +7,30 @@ libs: nouislider ## Classic inputs -Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form. +Use classic, user-friendly inputs, label them appropriately and include input placeholders that will help users avoid confusion when completing a form. Add the `form-control` class to style your input controls. -```html example centered columns={1} height="20rem" +```html + +``` + +All variants of the input control are available in the examples below: + +```html example columns={1} height="25rem"
- + +
+
+ + +
+
+ +
``` diff --git a/docs/ui/forms/form-helpers.mdx b/docs/ui/forms/form-helpers.mdx index 896a8f401e..fc1c087c68 100644 --- a/docs/ui/forms/form-helpers.mdx +++ b/docs/ui/forms/form-helpers.mdx @@ -1,12 +1,76 @@ --- title: Form helpers -description: A form helper can be used to provide users with additional information about the elements of a form that may be unclear. +description: Use form helpers to provide additional information about a form element. You can use input help, required field, form hint, and additional info inside the label. --- ## Input help -Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper. +Use an input helper to display additional information about a form element. The text label will appear once a user hovers over the helper. To add an input helper, use the `.form-help` class. -```html example centered -? +```html +? ``` + +Look at the example below to see how the input help works: + +```html example centered height="25rem" columns={1} +
+ + +
+``` + +## Required field + +Use the `.required` class to indicate that a field is required. It will add a red asterisk to the label. + +```html + +``` + +Look at the example below to see how the required field works: + +```html example centered columns={1} +
+ + +
+``` + +## Form hint + +Use a form hint to provide users with additional information about a form element. The text will appear below the input field. To add a form hint, use the `.form-hint` class. + +```html +
We'll never share your email with anyone else.
+``` + +Look at the example below to see how the form hint works: + +```html example centered columns={1} +
+ + +
We'll never share your email with anyone else.
+
+``` + +## Additional info inside label + +Use the `.form-label-description` class to add additional information to the label. The text will appear next to the label. You can use it to add for example a character counter. + +```html + +``` + +This example shows how to use the additional info inside the label: + +```html example centered columns={1} height="15rem" +
+ + +
+``` \ No newline at end of file diff --git a/docs/ui/forms/form-image-check.mdx b/docs/ui/forms/form-image-check.mdx index 107828241d..478f0aff57 100644 --- a/docs/ui/forms/form-image-check.mdx +++ b/docs/ui/forms/form-image-check.mdx @@ -1,8 +1,22 @@ --- title: Image check +description: The image check is a great way to make your form more user-friendly and engaging. You can use the image check to create a visually appealing form that will help users make decisions quickly and easily. --- -Add an image check to your form and give users visually attractive options to choose from. +## Default markup + +To build an image check, you need to use the `.form-imagecheck` class and the `.form-imagecheck-input` class for the input element. You can also use the `.form-imagecheck-figure` class to style the image and the `.form-imagecheck-image` class to style the image itself. + +```html + +``` + +Look at the examples below to see how the image check works: ```html example centered columns="2" height="15rem"
@@ -10,7 +24,7 @@ Add an image check to your form and give users visually attractive options to ch
``` -```html - -``` +## Radio buttons + +If you want to use the image check as a radio button, you can change the input type to `radio`. ```html example centered columns="2" height="15rem"
@@ -59,7 +68,7 @@ Add an image check to your form and give users visually attractive options to ch