Caption
Section heading
Default
Primary
Secondary
Success
Warning
Danger
Info
Neutral
Active
Active text
Attention
Attention text
Error
Error text
Logged in
Logged in
New message
An error occurred
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed purus quam. Proin eu tincidunt metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed purus quam. Proin eu tincidunt metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed purus quam. Proin eu tincidunt metus.
Last logged in 5 h
Logged in
``` --- ## Components – Breadcrumb URL: https://envisionui.io/components/breadcrumb/ Description: Use breadcrumbs to display the user´s location within a site’s hierarchy, enhancing navigation. Use `env-breadcrumb__separator` in combination with `aria-hidden="true"` to hide the separator character from assistive technology. ```html ``` --- ## Components – Cards URL: https://envisionui.io/components/cards/ Description: Cards are simple containers for displaying information about pages, groups, or users. Use Cards to display information about, for example, a page, a group or a user. A Card is a simple container that may have a header and a footer. A Card has no colors or shadows of its own. To add colors and shadows you may instead combine the `env-block` and `env-shadow` classes. If used inside a [Cardholder](/layout/cardholder/) the Card will stretch its width and height to make a nice aligned grid of cards. ```html
Open group • 29 members
Latest activity 3 hours ago
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lobortis dui, in accumsan augue.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed purus quam. Proin eu tincidunt metus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget lobortis dui, in accumsan augue. Quisque nec augue quam. Donec sed purus quam. Proin eu tincidunt metus.
The alertdialog role is to be used on modal alert dialogs that interrupt a user's workflow to communicate an important message and require a response.To make a Dialog an alertdialog, add `role="alertdialog"`, and make sure to use an accessible name and description for example by adding attributes `aria-labelledby` and `aria-describedby`. **Note**: The option `backdropClick` will automatically be set to `false` for alertdialogs and cannot be overridden. Keypress `Escape` will not close the dialog. Available alertdialog variations: `env-dialog--'error', 'success', 'warning', 'info'` ```html ``` ## Options ```javascript // Default options { opener: null, backdropClick: true, placement: null, } ``` - `opener` _'string'_ | _Node_ - A selector as a string or a DOM Node to assign event listener for opening the dialog. - Default value: `null` - `backdropClick` _boolean_ - Click on backdrop (outside dialog) should close the dialog (not available for alertdialog). - Default value: `true` - `placement` _'string'_ - Dialog window should be moved in the DOM and open as an immediate child of ``. - Allowed values: `'body'` - Default value: `null` ## API Instances of Dialog may be controlled by the methods described below. ```javascript envision.dialog('#dialog', { opener: '#opener' }).then(function (dialogs) { console.log(dialogs[0].el.open); // dialogs[0].show(); // Uncomment to show dialog on load }); ``` ```javascript envision.dialog('#dialog').then(function (dialogs) { // Custom opener event document.querySelector('#opener').addEventListener('click', () => { // ... before show ... dialogs[0].show(); }); }); ``` ### Options - `el` - Access to the [HTMLDialogElement interface](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement), e.g. `open` and `returnValue`. - `show()` - Show the dialog. Uses [HTMLDialogElement showModal()](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/showModal) to always display the dialog in the [top layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer). - `close()` - Close the dialog. ## Events Use [native HTMLDialogElement events](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement#events). ### Example ```javascript envision .dialog(document.querySelector('#dialog'), { opener: '#opener', }) .then((dialogs) => { dialogs[0].el.addEventListener('close', () => { // ... do something when dialog is closed console.log(dialogs[0].el.returnValue); }); }); ``` ## Legacy documentation Dialog is a replacement for the deprecated [Modal Dialog](/deprecated/modal-dialog/). --- ## Components – Dropdown URL: https://envisionui.io/components/dropdown/ Description: Dropdowns displays a list of options that appears upon user interaction. ## Default Dropdown Attribute `data-dropdown` is required on the button. Dropdown menu must use class `env-dropdown__menu` and should be located inside the same parent element as the button. ```html