Envision

https://envisionui.io/
Admin
Envision is an open-source, easy-to-use CSS and component framework by Sitevision that streamlines...
Tokens:88,290
Snippets:411
Trust Score:6.1
Update:1 year ago
Show doc for...
Tokens:
Raw
### Untitled

No description

--------------------------------

### HTML Text Alignment Styles with EnvisionUI

Source: https://envisionui.io/typography/basic-text

Provides examples of text alignment using EnvisionUI's alignment classes, including default (left), center, right, start, and end alignments. Supports logical properties for different text directions.

```html
<div class="env-text">Left aligned (default)</div>
<div class="env-text env-text-align--center">Center aligned</div>
<div class="env-text env-text-align--right">Right aligned</div>

<div class="env-text env-text-align--start">Start aligned</div>
<div class="env-text env-text-align--end">End aligned</div>

<div dir="rtl">
   <div class="env-text">من اليمين الى اليسار</div>
   <div class="env-text env-text-align--start">بدء محاذاة</div>
   <div class="env-text env-text-align--end">محاذاة النهاية</div>
</div>
```

--------------------------------

### Large Pagination Example (HTML)

Source: https://envisionui.io/components/pagination

Demonstrates the HTML structure for a large-sized pagination component using Envision UI classes. This example shows the basic list item and link structure for navigating through pages.

```html
<nav aria-label="Pagination example">
   <ul class="env-pagination env-pagination--large">
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 1">1</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 2">2</a>
      </li>
      <li class="env-pagination__item">
         <a class="env-pagination__link" href="#" aria-label="Page 3">3</a>
      </li>
   </ul>
</nav>
```

--------------------------------

### HTML Example of Basic Colors Usage

Source: https://envisionui.io/colors/basic-colors

Demonstrates the application of basic Envision UI colors like `--env-section-background-color`, `--env-border-color`, and `--env-link-font-color` within HTML structure. This example shows how to style sections and links using these predefined CSS variables.

```html
<div class="example-fill example-basic-colors  env-p-around--xx-large">
   <div
      class="env-ui-section env-border env-border--05 env-p-around--large env-m-bottom--large"
   >
      <div class="env-text">
         Base text on section background with a border 05 and
         <a href="javascript:void(0)" class="env-link">a link</a>.
      </div>
   </div>
   <div class="env-ui-section-05 env-border env-p-around--large">
      <div class="env-text">
         Base text on section background 05, standard border and
         <a href="javascript:void(0)" class="env-link">a link</a>.
      </div>
   </div>
</div>
```

--------------------------------

### HTML Input Group Example

Source: https://envisionui.io/forms/form-elements

This HTML snippet demonstrates how to create an input group by wrapping text, input, and button elements with specific EnvisionUI classes like `.env-form-control` and `.env-form-input`. It includes examples for subscription forms and search bars.

```html
<div class="example-input-fields">
   <div class="env-form-field">
      <label for="email-1" class="env-form-label">Subscribe</label>
      <div class="env-form-control">
         <label for="email-1" class="env-form-label">@</label>
         <input
            type="email"
            class="env-form-input"
            placeholder="example@domain.com"
            id="email-1"
         />
         <button type="submit" class="env-button env-button--primary">
            Submit
         </button>
      </div>
   </div>
   <div class="env-form-field">
      <label for="search-4" class="env-form-label">Search</label>
      <div class="env-form-control">
         <input
            type="search"
            class="env-form-input env-form-input--search"
            placeholder="Search this site"
            id="search-4"
         />
         <button
            type="submit"
            class="env-button env-button--secondary env-button--icon"
         >
            Search
            <svg aria-hidden="true" class="env-icon">
               <use href="/sitevision/envision-icons.svg#icon-search"></use>
            </svg>
         </button>
      </div>
   </div>
</div>
```

--------------------------------

### Envision UI Card Examples

Source: https://envisionui.io/components/cards

Demonstrates different card configurations including user profiles, group information, and content cards. Utilizes classes like env-card, env-block, and env-shadow-small for styling and layout.

```html
<div class="example-demo-dark">
   <div
      class="example-card env-card env-ui-section env-border env-shadow-small"
   >
      <div class="env-card__header">
         <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
      </div>
      <div class="env-card__body">
         <p class="env-ui-text-caption">Web Developer</p>
         <p class="env-ui-text-caption">
            <a href="#" class="env-link env-link-secondary">lorem@domain.com</a>
         </p>
         <p class="env-ui-text-caption">
            <a href="#" class="env-link env-link-secondary">012-345 67 89</a>
         </p>
      </div>
      <div class="env-card__footer">
         <p class="env-ui-text-caption">
            <a href="#" class="env-link">Contact</a>
         </p>
      </div>
   </div>

   <div
      class="example-card env-card env-block-primary env-block-primary--border env-shadow-small"
   >
      <div class="env-card__body">
         <img
            class="env-card__image env-profile-image env-profile-image--small"
            src="https://envisionui.io/placeholders/profile/200x200/01.webp"
            alt="Example profile image"
         />
         <h2 class="env-ui-text-subheading">Lorem Ipsumsson</h2>
         <p class="env-ui-text-caption">Job Title</p>
         <p class="env-ui-text-caption">
            <a href="#" class="env-link env-link-secondary">lorem@domain.com</a>
         </p>
         <p class="env-ui-text-caption">
            <a href="#" class="env-link env-link-secondary">012-345 67 89</a>
         </p>
      </div>
   </div>

   <div
      class="example-card env-card  env-block-secondary env-block-secondary--border env-shadow-small"
   >
      <div class="env-card__header">
         <div class="env-media env-media--center">
            <div class="env-media__figure">
               <a href="#">
                  <img
                     class="env-profile-image env-profile-image--small"
                     src="https://envisionui.io/placeholders/profile/200x200/02.webp"
                     alt="Example profile image"
                  />
               </a>
            </div>
            <div class="env-media__body env-text--small">
               <p class="env-ui-text-caption">Open group &bull; 29 members</p>
               <p class="env-ui-text-caption">Latest activity 3 hours ago</p>
            </div>
         </div>

         <h2 class="env-ui-text-subheading">Lorem ipsum dolor</h2>
      </div>
      <div class="env-card__body">
         <p class="env-ui-text-caption">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent
            eget lobortis dui, in accumsan augue.
         </p>
      </div>
      <div class="env-card__footer env-text--small">
         <a href="#" type="button" class="env-button env-button--link">
            <svg class="env-icon env-icon--small env-m-right--xx-small">
               <use href="/sitevision/envision-icons.svg#icon-phone"></use>
            </svg>
            Administrator
         </a>
      </div>
   </div>
</div>
```

--------------------------------

### API Functions

Source: https://envisionui.io/components/image-viewer-2

Provides examples of controlling instances of Image Viewer 2 using its API methods.

```APIDOC
## API Functions

### Description
Instances of Image viewer 2 may be controlled by the methods described below.

### JavaScript Example
```javascript
envision.imageViewer2('#image-viewer').then(function (imageViewers) {
   imageViewers[0].slider.pause();
   imageViewers[0].lightbox.show(1);
});
```
```

--------------------------------

### Untitled

No description

--------------------------------

### Simplified Chart Widget Example (HTML)

Source: https://envisionui.io/dashboard/basics

This example illustrates a basic chart widget's HTML structure using Envision UI classes. It includes a section heading, value display with legend indicators, axis labels, and a placeholder canvas element. The code demonstrates how to apply classes for typography, colors, and semantic structure within a widget.

```html
<section class="env-dashboard-widget">
   <h2 class="env-ui-text-sectionheading">Chart widget example heading</h2>
   <p class="env-ui-text-value">
      <span class="env-dashboard-color-txt-orange-50">—</span> Legend line 1
      <span class="env-dashboard-color-txt-cyan-50">—</span> Legend line 2
   </p>
   <h3 class="env-ui-text-label">Y axis label</h3>
   <ul>
      <li class="env-ui-text-value">1,200</li>
      ...
   </ul>
   <canvas
      aria-label="Example chart, this text should tell the chart values for accessibility."
      role="img"
   ></canvas>
   <h3 class="env-ui-text-label">X axis label</h3>
   <ul>
      <li class="env-ui-text-value">25 nov</li>
      ...
   </ul>
</section>
```

--------------------------------

### Blockquote Styling using HTML

Source: https://envisionui.io/typography/basic-text

This example shows how to apply blockquote styling using either the `env-blockquote` class or a standard `<blockquote>` element nested within an `env-text` wrapper. This styling is intended for quotations.

```html
<blockquote class="env-blockquote">
   <p class="env-text-quotation-01">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit,
      sed do eiusmod tempor incididunt ut labore et dolore magna
      aliqua. Ut enim ad minim veniam, quis nostrud exercitation
      ullamco laboris.
   </p>
</blockquote>
```

--------------------------------

### JavaScript: Control Tag Select Instance

Source: https://envisionui.io/forms/tag-select

Shows how to interact with an initialized Tag Select instance using JavaScript. This example demonstrates adding options and items to the select component.

```javascript
envision.select('#tag-select').then(function (selects) {
   selects[0].addOptions({ value: 'test' });
   selects[0].addItem('test');
});
```

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### HTML: Ordered Text List Styling with env-text-list

Source: https://envisionui.io/typography/text-list

This code example illustrates the use of `env-text-list` and `env-text-body-02` classes for styling an ordered list (`<ol>`). It presents a recipe's preparation steps.

```html
<ol class="env-text-list env-text-body-02">
   <li>Preheat the oven to 175°C.</li>
   <li>Grease and flour a bundt cake pan of about 1.5 liters.</li>
   <li>Melt the butter in a saucepan and add the milk.</li>
   <li>
      Whisk the eggs and sugar until light and fluffy, then add the butter and
      milk mixture.
   </li>
   <li>
      Stir in the flour mixed with baking powder and pour the batter into the
      prepared pan.
   </li>
   <li>Bake in the lower part of the oven for about 35 minutes.</li>
</ol>
```

--------------------------------

### Untitled

No description

--------------------------------

### EnvisionUI Media Component (Column & Center Alignment)

Source: https://envisionui.io/components/media

This example combines 'env-media--column' and 'env-media--center' classes to display the EnvisionUI media component in a vertical layout with centered content. It demonstrates how multiple alignment and layout modifiers can be applied.

```html
<div class="env-media env-media--column env-media--center">
   <div class="env-media__figure">
      <a href="#" aria-hidden="true">
         <img
            class="env-image"
            src="https://envisionui.io/placeholders/text/200x200.png"
            alt=""
         />
      </a>
   </div>
   <div class="env-media__body">
      <h3 class="env-ui-text-subheading">
         <a href="#" class="env-link-secondary">Emma</a>
      </h3>
      <p class="env-ui-text-caption">
         Cras varius, felis a accumsan accumsan, tellus elit maximus purus, id
         dignissim sem odio at eros. Morbi vel commodo diam. Integer hendrerit
         tellus nec ligula egestas consequat. Curabitur sapien mauris, rhoncus
         non blandit eu, rhoncus ut sem. Pellentesque elementum non augue vitae
         scelerisque.
      </p>
   </div>
</div>
```

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### HTML Horizontal Embedded Component Examples

Source: https://envisionui.io/components/embedded

Showcases the horizontal layout for embedded components. It includes examples for aligning the image to the left (default) and to the right using specific classes. These examples do not require external JavaScript.

```html
<div class="env-embedded env-embedded--horizontal">
   <div class="env-embedded__img-container">
      <img
         class="env-embedded__img"
         alt=""
         src="https://envisionui.io/placeholders/text/270x180.png"
      />
   </div>
   <div class="env-embedded__block">
      <h4 class="env-text">Lorem ipsum</h4>
      <p class="env-text">
         Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig drumstick chuck ball tip biltong shoulder porchetta tenderloin short
         loin.
      </p>
   </div>
</div>

<br />

<div class="env-embedded env-embedded--horizontal">
   <div class="env-embedded__img-container env-embedded__img-container--right">
      <img
         class="env-embedded__img"
         alt=""
         src="https://envisionui.io/placeholders/text/270x180.png"
      />
   </div>
   <div class="env-embedded__block">
      <h4 class="env-text">Lorem ipsum</h4>
      <p class="env-text">
         Bacon ipsum dolor amet beef cupim brisket pork turducken salami pig drumstick chuck ball tip biltong shoulder porchetta tenderloin short
         loin.
      </p>
   </div>
</div>
```

--------------------------------

### Create Inline Radio Button Layout (HTML)

Source: https://envisionui.io/forms/form-layout

This example shows how to create an inline layout for radio buttons within a form. The `.env-form-row` class acts as a wrapper for multiple `.env-form-control` elements, each containing a radio button and its label. This setup ensures consistent vertical and horizontal spacing between the inline options. It uses standard HTML form elements and Envision UI's form styling classes.

```html
<fieldset class="env-form-fieldset">
   <legend class="env-form-legend">Radio buttons inline</legend>
   <div class="env-form-row">
      <div class="env-form-control">
         <input
            class="env-radio"
            type="radio"
            id="radio-inline-1"
            name="inlineradios"
            value="1"
         />
         <label class="env-form-label" for="radio-inline-1"
            >Alternative 1</label
         >
      </div>
      <div class="env-form-control">
         <input
            class="env-radio"
            type="radio"
            id="radio-inline-2"
            name="inlineradios"
            value="2"
            checked
         />
         <label class="env-form-label" for="radio-inline-2"
            >Alternative 2</label
         >
      </div>
      <div class="env-form-control">
         <input
            class="env-radio"
            type="radio"
            id="radio-inline-3"
            name="inlineradios"
            value="2"
         />
         <label class="env-form-label" for="radio-inline-3"
            >Alternative 3</label
         >
      </div>
   </div>
</fieldset>
```

--------------------------------

### Create Basic Form Layout with Columns and Stacking (HTML)

Source: https://envisionui.io/forms/form-layout

This example demonstrates creating a form with two columns for input fields, using `.env-form-row` and `.env-form-column-1`. It also utilizes `.env-form-row--stack-m` to stack fields on medium screen sizes and larger, ensuring responsiveness. The `env-form`, `env-form-label`, `env-form-input`, and `env-button` classes are also used for basic form styling.

```html
<form class="env-form" action="/">
   <div class="env-form-row env-form-row--stack-m">
      <div class="env-form-column-1">
         <label for="text-5" class="env-form-label">First name</label>
         <input type="text" class="env-form-input" id="text-5" />
      </div>
      <div class="env-form-column-1">
         <label for="text-6" class="env-form-label">Last name</label>
         <input type="text" class="env-form-input" id="text-6" />
      </div>
   </div>
   <div class="env-form-row">
      <button type="submit" class="env-button env-button--primary">
         Submit
      </button>
   </div>
</form>
```

--------------------------------

### Instantiate and Control Dialog with Opener

Source: https://envisionui.io/components/dialog

Demonstrates initializing an Envision UI dialog and controlling it using a specified opener element. It shows how to access dialog instances and their properties, and includes a commented-out option to show the dialog on load. This snippet requires the envision.js library.

```javascript
envision.dialog('#dialog', { opener: '#opener' }).then(function (dialogs) {
   console.log(dialogs[0].el.open);
   // dialogs[0].show(); // Uncomment to show dialog on load
});
```

--------------------------------

### Cardholder Grid HTML Example

Source: https://envisionui.io/layout/cardholder

Demonstrates a basic Cardholder Grid layout with multiple cards. Each card displays profile information including an image, name, title, email, and phone number. This example utilizes Envision UI's CSS classes for styling.

```html
<div class="example-demo-dark">
   <div class="env-cardholder-grid">

         <div class="env-card env-block env-shadow-small">
            <div class="env-card__body">
               <img
                  class="env-card__image env-profile-image env-profile-image--small"
                  src="https://envisionui.io/placeholders/profile/200x200/01.webp"
                  alt="Example profile image"
               />
               <h2 class="env-ui-text-subheading">
                  Lorem Ipsumsson
               </h2>
               <p class="env-ui-text-caption">
                  Utvecklare
               </p>
               <p class="env-ui-text-caption">
                  <a href="#" class="env-link env-link-secondary">
                     lorem@domain.com
                  </a>
               </p>
               <p class="env-ui-text-caption">
                  <a href="#" class="env-link env-link-secondary">
                     012-345 67 89
                  </a>
               </p>
            </div>
         </div>

         <div class="env-card env-block env-shadow-small">
            <div class="env-card__body">
               <img
                  class="env-card__image env-profile-image env-profile-image--small"
                  src="https://envisionui.io/placeholders/profile/200x200/02.webp"
                  alt="Example profile image"
               />
               <h2 class="env-ui-text-subheading">
                  Lorem Ipsumsson
               </h2>
               <p class="env-ui-text-caption">
                  <a href="#" class="env-link env-link-secondary">
                     012-345 67 89
                  </a>
               </p>
            </div>
         </div>

         <div class="env-card env-block env-shadow-small">
            <div class="env-card__body">
               <img
                  class="env-card__image env-profile-image env-profile-image--small"
                  src="https://envisionui.io/placeholders/profile/200x200/04.webp"
                  alt="Example profile image"
               />
               <h2 class="env-ui-text-subheading">
                  Lorem Ipsumsson
               </h2>
               <p class="env-ui-text-caption">
                  Utvecklare
               </p>
               <p class="env-ui-text-caption">
                  <a href="#" class="env-link env-link-secondary">
                     012-345 67 89
                  </a>
               </p>
            </div>
         </div>

      </div>
   </div>
</div>
```

--------------------------------

### Initialize Image Viewer as Slideshow - HTML

Source: https://envisionui.io/components/image-viewer-2

This HTML structure sets up an image viewer to function as a slideshow. Each figure element contains an image and a caption. The `data-href` attribute on each figure points to the full-size image for the lightbox, and the `data-zoom` attribute enables this feature.

```html
<section
   id="example-imageviewer2-2"
   class="env-p-around--medium"
   aria-label="Photos from Örebro"
>
   <figure data-href="/placeholders/originals/10.webp" data-zoom>
      <img src="/placeholders/900x400/10.webp" alt="" />
      <figcaption class="env-image-viewer-2__viewer__caption">
         Örebro Castle
      </figcaption>
   </figure>
   <figure data-href="/placeholders/originals/05.webp" data-zoom>
      <img src="/placeholders/900x400/05.webp" alt="" />
      <figcaption class="env-image-viewer-2__viewer__caption">
         Karlslund Manor House
      </figcaption>
   </figure>
   <figure data-href="/placeholders/originals/02.webp" data-zoom>
      <img src="/placeholders/900x400/02.webp" alt="" />
      <figcaption class="env-image-viewer-2__viewer__caption">
         Highland cattle at Oset outside Örebro
      </figcaption>
   </figure>
</section>
```

--------------------------------

### HTML for Deprecated Form Element Success/Danger States

Source: https://envisionui.io/deprecated/form

Provides examples of deprecated success and danger validation states for form elements, using `.env-form-element--success` and `.env-form-element--danger` modifiers respectively. These examples show how to structure feedback messages associated with these states.

```html
<div class="env-form-element env-form-element--success">
   <label for="success" class="env-form-element__label">
      Success
      <span class="doc-badge doc-badge--danger">Deprecated</span></label
   >
   <div class="env-form-element__control">
      <input
         type="text"
         class="env-form-input"
         id="success"
         aria-describedby="success-feedback"
      />
   </div>
   <span id="success-feedback" class="env-form-element__feedback">Success feedback</span>
</div>
<div class="env-form-element env-form-element--danger">
   <label for="danger" class="env-form-element__label">
      Danger <span class="doc-badge doc-badge--danger">Deprecated</span></label
   >
   <div class="env-form-element__control">
      <input
         type="text"
         class="env-form-input"
         id="danger"
         aria-describedby="danger-feedback"
      />
   </div>
   <span id="danger-feedback" class="env-form-element__feedback">Danger feedback</span>
</div>
```

--------------------------------

### Configuration Options

Source: https://envisionui.io/components/image-viewer-2

Details the available options for configuring the Image Viewer 2, including global options and specific slideshow options.

```APIDOC
## Options

### Default Options
```json
{
   "slides": false,
   "buttons": {
      "download": true,
      "showText": false,
   },
   "i18n": "sv",
}
```

### Default Slides Options (if `slides` is `true`)
```json
{
   "auto": 0,
   "speed": 300,
   "draggable": true,
   "playing": false,
   "overlay": true,
   "buttons": {
      "type": null,
      "ghost": false,
      "size": null,
   },
}
```

### Option Details
* `buttons` _{ download, showText }_
  * Lightbox button options. Show/hide download button. Visible text in close/download buttons.
  * Default values: `{ download: true, showText: false }`
* `i18n` _‘sv’_ | _‘en’_ | _‘no’_ | _{ language keys }_
  * Translation of buttons aria-label and aria-roledescription. Use predefined strings (swedish, english or norwegian) or write your own translation. Default is ‘sv’.
  * Available language keys: _roledescription, prev, next, pause, play, slideshow, zoom, largeImage, close, download, image, of_
* `slides` _boolean_ | _{options object }_
  * Initialize a slideshow with default or custom options
  * Default value: `false`

### Slides Options Object Details
* `auto` _number_
  * Auto rotation possible, play button visible. Number is interval in _ms_.
  * Default value: `0` (auto rotation not available)
* `speed` _number_
  * Slide speed in _ms_.
  * Default value: `300`
* `draggable` _boolean_
  * Slides listen to mouse drag events in addition to touch events.
  * Default value: `true`
* `playing` _boolean_
  * If `auto` is set to > 0, this will start auto rotation automatically.
  * Default value: `false`
* `overlay` _boolean_
  * Control buttons and caption should overlay the slides.
  * Default value: `true`
* `buttons` _{ size, type, ghost }_
  * Control button appearance.
  * Allowed value for `type`: Any Element color name in lowercase.
  * Allowed value for `size`: Any Button size name in lowercase.
  * Allowed value for `ghost`: true/false
```

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Untitled

No description

--------------------------------

### Initialize and Configure Tooltips with JavaScript

Source: https://envisionui.io/components/tooltip

This JavaScript code snippet illustrates how to initialize and configure tooltips programmatically. It selects tooltip elements using `querySelectorAll` and then calls `envision.tooltip()` with the elements and an options object. This allows for dynamic control over placement and delay, suitable for complex UIs.

```javascript
const tooltipEl = document.querySelectorAll('.example-custom-init-tooltip');
if (tooltipEl) {
   envision.tooltip(tooltipEl, {
      placement: 'right',
      delay: 300,
   });
}
```

--------------------------------

### HTML Elements for Specific Text Styles with EnvisionUI

Source: https://envisionui.io/typography/basic-text

Illustrates the use of div elements with EnvisionUI's specific text style classes like env-text-h1, env-text-p, and env-text-small to render text with predefined appearances.

```html
<div class="env-text-h1">Looks like heading 1</div>

<div class="env-text-h2">Looks like heading 2</div>

<div class="env-text-h3">Looks like heading 3</div>

<div class="env-text-h4">Looks like heading 4</div>

<div class="env-text-h5">Looks like heading 5</div>

<div class="env-text-h6">Looks like heading 6</div>

<div class="env-text-p">Looks like paragraph</div>

<div class="env-text-small">Looks like small</div>
```

--------------------------------

### HTML Link Styles with EnvisionUI

Source: https://envisionui.io/typography/basic-text

Demonstrates the usage of EnvisionUI's primary and secondary link classes (env-link, env-link-secondary) for creating styled hyperlinks.

```html
<p class="env-text">
   <a href="#" class="env-link">An example link</a>
</p>

<p class="env-text">
   <a href="#" class="env-link-secondary">A secondary link</a>
</p>
```
Tokens:
Raw