Component Library

Välkommen!

This is a test section with different tests.

Heading <h1>, <h2>, <h3>, <h4>, <h5>, <h6>

Crucial for structuring content and establishing hierarchy in web UI. They are typically used for headings and subheadings, playing an important role in accessibility, readability, and SEO.

---

Markup:

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

---

Available attributes:

e-size [no default]

Add attribute and value in order to set size.

e-weight [override default]

Add attribute and value in order to override default weight.

e-margin [override default]

Add attribute and value in order to override default margin.

Paragraphs <p>

Used to display text content. They are typically used for body text, but can also be used for other types of content.

---

Markup:

<p>Paragraph</p>

---

Available attributes:

e-size [no default]

Add attribute and value in order to set size.

e-weight [no default]

Add attribute and value in order to override default weight.

e-margin [override default]

Add attribute and value in order to set margin.

e-variant [no default]

Add attribute and value in order to change text variant:

This text is muted.

This text is errored.

This text is warned.

This text is successed.

Strong, Span, Small, Em <strong>, <span>, <small>, <em>

Used to group inline elements. They are typically used for styling, adding classes, and other types of interactions.

---

Markup:

<strong>Strong</strong>
<span>Span</span>
<small>Small</small>
<em>Em</em>


---

Available attributes:

e-style="button" [no default]

Add attribute in order to inherit styling and available attributes from the <button> tag.
NOTE! This attribute is only available for the <span> tag.

Span button

e-size [no default]

Add attribute and value in order to set size.

e-weight [no default]

Add attribute and value in order to override default weight.

e-variant [no default]

Add attribute and value in order to change text color variant:

This text is muted.

This text is errored.

This text is warned.

This text is successed.

Link <a>

Used to create hyperlinks. They are typically used for navigation, linking to other pages, and other types of interactions.

---

Markup:

<a href="#">Link</a>

---

Example:

Etiam cursus ligula at felis dictum, eu blandit nisl rutrum. Proin auctor arcu Example link, id dignissim tortor congue sed. Donec id fringilla orci. Cras leo purus, imperdiet sed tortor in, posuere suscipit lectus.

---

Available attributes:

e-style="..." [override default]

Add attribute and value in order to change the color style.
This can be done together with all type variations except "button" and "blank":

e-type="underline-hover" [override default]

Add attribute in order to remove underline styling:

e-type="underline-none" [override default]

Add attribute in order to remove underline styling:

e-type="button" [override default]

Add attribute in order to inherit styling and available attributes from the <button> tag.

Link button

e-type="blank" [override default]

Add attribute in order to reset link styles to blank:

Link as blank text

Image <img>

Used to display images. They are typically used for visual content, but can also be used for other types of content. We are using NetVips in order to resize image sizes on the fly based on a original image. Read more about this in the wiki.

---

Markup:

// If a simple image is needed, like a svg logo or
// some other small sized image, the image tag can be used:
<img src="image_1.jpg" alt="Image" width="300" />

// If a more complex image is needed, like a large photo,
// the image tag should be used together with source and picture
// tags in order to define different sizes and resolutions:
<picture>
  <source srcset="image_2.jpg" media="(min-width: 1200px)" width="300" />
  <img src="image_1.jpg" alt="Image" width="300" />
</picture>


---

Available attributes:

e-rounded [no default]

Add attribute and value in order to change the border radius:

e-no-loading [override default]

Add attribute in order to disable image loading state.

Button <button>

Used to trigger an action or event. They are typically used for calls to action, form submissions, and other types of interactions.

---

Markup:

<button>Button</button>

---

Example:

Button

---

Available attributes:

e-variant [override default]

Add attribute and value in order to change the variant:

e-block [no default]

Add attribute in order to make the button full width:

e-size [override default]

Add attribute and value in order to change the size:

e-icon [no default]

Add attribute and value in order to add an icon:

e-icon-right [no default]

Add attribute in order to place the icon to the right:

e-sr-text [no default]

Add attribute and value in order to add screen reader text.
NOTE! This attribute is mandatory if the button only contains a icon.

Table <table>

Used to display tabular data. They are typically used for data tables, grids, and other types of content that need to be organized in a table format.

---

Markup:

<table e-caption="Required caption" e-caption-summary="Optional summary to the caption in order to describe the table more in detail.">

  // Add optional "tactions" tag in order to add table action buttons.
  <tactions>
    <button e-size="sm">Action 1</button>
    <button e-size="sm">Action 2</button>
    <button e-size="sm">Action 3</button>
  </tactions>

  // Add table content within the "tcontent" tag. This tag is required.
  // NOTE! This tag is required.
  <tcontent>
    <thead>
      <tr>
        <th>Header</th>
        <th>Header</th>
        <th>Header</th>
      </tr>
    </thead>

    <tbody>
      <tr>
        <th>Cell Header</th>
        <td>Cell</td>
        <td>Cell</td>
      </tr>
    </tbody>
  </tcontent>
</table>


---

Example:

---

Available attributes:

e-caption [required]

Add attribute and value in order to add a <caption> tag.
NOTE! This attribute is required for accessibility reasons.

e-caption-summary [no default]

Add attribute and value in order to add a summary to the caption for more detailed description of the table.

e-caption-variant [override default]

Add attribute and value in order to change the caption variant.

e-margin [no default]

Add attribute and value in order to add bottom margin.

e-border [no default]

Add attribute in order to add borders between rows.

e-row-mute [no default]

Add attribute and value in order to mute rows.

List <ul>, <ol>

Used to display a list of items. They are typically used for navigation, menus, and other types of content that need to be organized in a list format.

---

Markup:

<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul> <ol>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ol>

---

Example:

• Item 1
• Item 2
• Item 3

---

Available attributes:

e-mark [no default]

Add attribute in order to add markers:

• Item 1
• Item 2
• Item 3

e-border [no default]

Add attribute in order to add border between rows:

1. Item 1
2. Item 2
3. Item 3

Description list <dl>

Used to display a list of terms and their descriptions. They are typically used for glossaries, definitions, and other types of content that need to be organized in a list format.

---

Markup:

<dl>
  <dt>Term 1</dt>
  <dd>Description 1</dd>
  <dt>Term 2</dt>
  <dd>Description 2</dd>
  <dt>Term 3</dt>
  <dd>Description 3</dd>
</dl>

---

Example:

Term 1

Description 1

Term 2

Description 2

Term 3

Description 3

---

Available attributes:

No attributes available.

Card <card>

Are commonly used as a layout in web UI design when content needs to be broken down into manageable, visually distinct pieces.
The card component should also be used as a building block when you need to create clickable areas, like links and so on.

---

Markup:

<card>
  <p>Card content</p>
</card>

---

Example:

---

Available attributes:

e-title [no default]

Add attribute and value in order to add title:

e-title-tag [override default]

Add attribute and value in order to change the title html tag.

e-spacing [override default]

Add attribute and value in order to change spacing:

e-mute [no default]

Add attribute in order to add a muted background. Can be used on different states in order to combine with clickable elements like links:

e-shadow [no default]

Add attribute in order to add a shadow. Can be used on different states in order to combine with clickable elements like links:

e-border [no default]

Add attribute in order to add a border. Can be used on different states in order to combine with clickable elements like links:

e-square [no default]

Add attribute in order to remove any rounded corners. This is useful when creating nav list with hover state:

Badge <badge>

Are used to display a small amount of information, such as a status, a count, or a label. They are typically used for notifications, alerts, and other types of content that need to be highlighted.

---

Markup:

<badge>Badge content</badge>

---

Available attributes:

e-variant [override default]

Add attribute and value in order to add variant:

e-pill [override default]

Add attribute in order to add a pill shape:

Default

Checkbox <checkbox>

Used to allow users to select one or more options from a set. They are typically used in forms and other types of interactions where multiple choices are available.

---

Markup:

<checkbox>
  <input type="checkbox" />
  <checkbox-text>
    <checkbox-label>Mandatory label text</checkbox-label>
    <checkbox-description>Optional description text</checkbox-description>
  </checkbox-text>
</checkbox>

---

Example:

Mandatory label terms and conditions to the checkbox Mandatory label terms and conditions to the checkbox Optional description text in order to add more context.

---

Available attributes:

e-label-left [override default]

Add attribute in order to position label to the left of the checkbox:

e-variant [no default]

Add attribute in order to change the variant:

e-style [no default]

Add attribute in order to change the style:
NOTE! This attribute is only available together with the e-variant="card" attribute.

Radio <radio>

Used to allow users to select one option from a set. They are typically used in forms and other types of interactions where only one choice is available.

---

Markup:

<radio>
  <input type="radio" />
  <radio-text>
    <radio-label>Mandatory label text</radio-label>
    <radio-description>Optional description text</radio-description>
  </radio-text>
</radio>

---

Example:

Mandatory label terms and conditions to the radio Mandatory label terms and conditions to the radio Optional description text in order to add more context.

---

Available attributes:

e-label-left [override default]

Add attribute in order to position label to the left of the radio:

e-variant [no default]

Add attribute in order to change the variant:

e-style [no default]

Add attribute in order to change the style:
NOTE! This attribute is only available together with the e-variant="card" attribute.

Input

Used to allow users to input text, numbers, and other types of data. They are typically used in forms and other types of interactions where user input is required.

The Input TagHelper handles some of the accessibility requirements for you:

• The <label> tag is added automatically when adding the e-label attribute and value.
• If no id is set on the <input> tag, one is generated automatically.
• The for attribute on the <label> tag is automatically set to the value of input id.
• The autocomplete attribute is set to off as default.

---

Tags:

<input type="text"/>
<input type="password"/>
<input type="email"/>
<input type="number"/>
<input type="tel"/>
<input type="url"/>
<input type="date"/>
<input type="time"/>
<input type="datetime-local"/>
<input type="month"/>
<input type="week"/>
<input type="search"/>


---

Markup:

<input type="text" placeholder="Text input" />

---

Example:

---

Available attributes:

e-size [override default]

Add attribute and value in order to change the size:

e-label [required]

Add attribute and value in order to add a <label> tag.
NOTE! This attribute is required for accessibility reasons.

e-label-variant [override default]

Add attribute and value in order to change the label variant:

default

grid

hide

infield

e-icon [no default]

Add attribute and value in order to add an icon:

e-icon-left [no default]

Add attribute in order to place the icon to the left:

e-description [no default]

Add attribute and value in order to add a description:

Textarea <textarea>

Used to allow users to input multiple lines of text. They are typically used in forms and other types of interactions where longer text input is required.

---

Markup:

<textarea>Textarea</textarea>

---

Example:

---

Available attributes:

e-label [required]

Add attribute and value in order to add a <label> tag.
NOTE! This attribute is required for accessibility reasons.

e-label-variant [override default]

Add attribute and value in order to change the label variant:

default

grid

hide

infield

e-description [no default]

Add attribute and value in order to add a description:

Select <select>

Used to allow users to select one or more options from a dropdown list. They are typically used in forms and other types of interactions where multiple choices are available.

---

Markup:

<select>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

---

Example:

---

Available attributes:

e-label [required]

Add attribute and value in order to add a <label> tag.
NOTE! This attribute is required for accessibility reasons.

e-label-variant [override default]

Add attribute and value in order to change the label variant:

default

grid

hide

infield

e-placeholder [override default]

Add attribute and value in order to change the placeholder text.

e-description [no default]

Add attribute and value in order to add a description:

Offcanvas <offcanvas>

Used to display a panel that slides in from the edge of the screen. This is the perfect component for navigation, settings, and other types of content that need to be hidden until needed.

---

Markup:

<offcanvas>
  <offcanvas-toggle>Toggle</offcanvas-toggle>
  <offcanvas-content>
   // Add offcanvas content
  </offcanvas-content>
</offcanvas>

---

Example:

---

Available attributes:

e-persistent <offcanvas> [no default]

Add attribute in order to make the offcanvas persistent. This means that the offcanvas will be open until the user manually closes it even on page reload.

e-slideup <offcanvas-content> [no default]

Add attribute in order to make the offcanvas slide up from the bottom of the screen on smaller scrrens.

e-title <offcanvas-content> [no default]

Add attribute and value in order to add a simple title to the dropdown content, this is preferred for accessible reasons. If you need a more complex title design add the title in the <offcanvas-content> tag as regular HTML:

e-title-tag <offcanvas-content> [override default]

Add attribute and value in order to change the title html tag. The default is a <h2>.

e-sr-text <offcanvas-content> [no default]

Add attribute and value in order to set label for screen readers.
NOTE! This is mandatory if there is no e-title-tag attribute.

Dropdown <dropdown>

Used to display rich HTML content in a dropdown panel. Use the dropdown when you want to present more complex content like a form etc.

NOTE! If you want to present a list of links use the <dropdown-menu> instead.

---

Markup:

<dropdown>
  <dropdown-toggle>Toggle</dropdown-toggle>
  <dropdown-content>
   // Add dropdown content
  </dropdown-content>
</dropdown>

---

Example:

---

Available attributes:

e-persistent <dropdown> [no default]

Add attribute in order to make the dropdown persistent. This means that the dropdown will be open until the user manually closes it even on page reload.

e-no-close <dropdown-content> [override default]

Add attribute if close button should be removed:

e-title <dropdown-content> [no default]

Add attribute and value in order to add a simple title to the dropdown content, this is preferred for accessible reasons. If you need a more complex title design add the title in the <offcanvas-content> tag as regular HTML:

e-title-tag <dropdown-content> [override default]

Add attribute and value in order to change the title html tag. The default is a <h2>.

e-sr-text <dropdown-content> [no default]

Add attribute and value in order to set label for screen readers.
NOTE! This is mandatory if there is no e-title-tag attribute.

Dropdown menu <dropdown-menu>

Used to display a list of options in a dropdown menu. They are typically used in navigation, menus, and other types of content that need to be organized in a list format.

---

Markup:

<dropdown-menu>
  <dropdown-menu-toggle>Toggle</dropdown-menu-toggle>
  <dropdown-menu-content>
    <dropdown-menu-link asp-controller="Home" asp-action="Index">Link</dropdown-menu-link>
  </dropdown-menu-content>
</dropdown-menu>

---

Example:

---

Available attributes:

e-persistent <dropdown-menu> [no default]

Add attribute in order to make the dropdown menu persistent. This means that the dropdown menu will be open until the user manually closes it even on page reload.

Section <section>

Used to group related content. They are typically used for structuring content and establishing hierarchy in web UI.

---

Markup:

<section>
  <h1>Section</h1>
  <p>Section content</p>
</section>

---

Available attributes:

e-mute [no default]

Add attribute in order to add a muted background.

Div <div>

Used to group elements. They are typically used for styling, adding classes, and other types of interactions.

---

Markup:

<div>Div</div>

---

Available attributes:

e-mute [no default]

Add attribute in order to add a muted background.

e-container [no default]

Add attribute in order to make the div a container width set max-width.