Component Library

Here you can see all the components that are available in the Eline framework

Halloj

This is a test section with different tests.

Images

Below is a server-side image resize example. The image is resized to different sizes based on the screen width. The <img> tag has the native loading attribute set to lazy. This will make the images to load only when they are in the viewport.

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-margin` [override default]

Add attribute and value in order to override default margin.

`e-weight` [override default]

Add attribute and value in order to override default weight.

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-margin` [override default]

Add attribute and value in order to set margin.

`e-variant` [override default]

Add attribute and value in order to change text variant:

This text is muted.

This text is darkened.

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-variant` [override default]

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

This text is muted.

This text is darkened.

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="none"` [override default]

Add attribute in order to remove default styling:

Link no style

`e-style="button"` [override default]

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

Link button

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:

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.

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:

Item 1
Item 2
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.

Markup:


            <card>

              <p>Card content</p>

            </card>

Available attributes:

`e-title` [no default]

Add attribute and value in order to add title:

Card Title

Card content

`e-title-tag` [override default]

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

`e-mute` [no default]

Add attribute in order to add a muted background:

Card content

`e-shadow` [no default]

Add attribute in order to add a shadow:

Card content

`e-border` [no default]

Add attribute in order to add a border:

Card content

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:

Default Primary

`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-label>Checkbox label</checkbox-label>

            </checkbox>

Example:

I agree with the terms and conditions of this checkbox.

Available attributes:

No attributes available.

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-label>Radio label</radio-label>

            </radio>

Example:

I agree with the terms and conditions of this radio.

Available attributes:

No attributes available.

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:

Default input(frivilligt)

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.

Input with label(frivilligt)

`e-label-variant` [override default]

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

`default`

Input with default label(frivilligt)

`grid`

Input with grid label(frivilligt)

`hide`

`infield`

Input with infield label with placeholder(frivilligt)

`e-icon` [no default]

Add attribute and value in order to add an icon:

Input with icon(frivilligt)

`e-icon-left` [no default]

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

Input with icon to the left(frivilligt)

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.

Textarea with label(frivilligt)

`e-label-variant` [override default]

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

`default`

Textarea with default label(frivilligt)

`grid`

Textarea with grid label(frivilligt)

`hide`

`infield`

Textarea with infield label with placeholder(frivilligt)

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.

Select with label(frivilligt)

`e-label-variant` [override default]

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

`default`

Select with default label with custom placeholder(frivilligt)

`grid`

Select with grid label(frivilligt)

`hide`

`infield`

Select with infield label with placeholder(frivilligt)

`e-placeholder` [override default]

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

Select with custom placeholder(frivilligt)

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.

Offcanvas title

This offcanvas has title. Adding a title is preferred in order to make the dropdown more accessible.

`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:

Offcanvas title

This offcanvas has title. Adding a title is preferred in order to make the dropdown more accessible.

`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:

Dropdown content

Add what ever HTML content you like. This is a paragraph and below a form with two text inputs and a submit button.

Available attributes:

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

Dropdown title

This dropdown has title. Adding a title is preferred in order to make the dropdown more accessible.

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

`e-position-right` `<dropdown-content>` [no default]

Add attribute in order to position the dropdown content to the right of the button:

Dropdown right

Position to the right.

`e-position-top` `<dropdown-content>` [no default]

Add attribute in order to position the dropdown content to the top of the button:

Dropdown content

Position to the top.

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-position-right` `<dropdown-menu-content>` [no default]

Add attribute in order to position the dropdown menu to the right of the button.

`e-position-top` `<dropdown-menu-content>` [no default]

Add attribute in order to position the dropdown menu to the top of the button.

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-container` [no default]

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

Component Library

Halloj

Images

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

Markup:

Available attributes:

e-size [no default]

e-margin [override default]

e-weight [override default]

Paragraphs <p>

Markup:

Available attributes:

e-size [no default]

e-margin [override default]

e-variant [override default]

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

Markup:

Available attributes:

e-style="button" [no default]

e-variant [override default]

Link <a>

Markup:

Example:

Available attributes:

e-style="none" [override default]

e-style="button" [override default]

Button <button>

Markup:

Example:

Available attributes:

e-variant [override default]

e-block [no default]

e-size [override default]

e-icon [no default]

e-icon-right [no default]

e-sr-text [no default]

List <ul>, <ol>

Markup:

Example:

Available attributes:

e-mark [no default]

e-border [no default]

Description list <dl>

Markup:

Example:

Available attributes:

Card <card>

Markup:

Available attributes:

e-title [no default]

Card Title

e-title-tag [override default]

e-mute [no default]

e-shadow [no default]

e-border [no default]

Badge <badge>

Markup:

Available attributes:

e-variant [override default]

e-pill [override default]

Checkbox <checkbox>

Markup:

Example:

Available attributes:

Radio <radio>

Markup:

Example:

Available attributes:

Input

Tags:

Markup:

Example:

Available attributes:

e-size [override default]

e-label [required]

e-label-variant [override default]

default

grid

hide

infield

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

`e-size` [no default]

`e-margin` [override default]

`e-weight` [override default]

Paragraphs `<p>`

`e-size` [no default]

`e-margin` [override default]

`e-variant` [override default]

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

`e-style="button"` [no default]

`e-variant` [override default]

Link `<a>`

`e-style="none"` [override default]

`e-style="button"` [override default]

Button `<button>`

`e-variant` [override default]

`e-block` [no default]

`e-size` [override default]

`e-icon` [no default]

`e-icon-right` [no default]

`e-sr-text` [no default]

List `<ul>, <ol>`

`e-mark` [no default]

`e-border` [no default]

Description list `<dl>`

Card `<card>`

`e-title` [no default]

`e-title-tag` [override default]

`e-mute` [no default]

`e-shadow` [no default]

`e-border` [no default]

Badge `<badge>`

`e-variant` [override default]

`e-pill` [override default]

Checkbox `<checkbox>`

Radio `<radio>`

`e-size` [override default]

`e-label` [required]

`e-label-variant` [override default]

`default`

`grid`

`hide`

`infield`

`e-icon` [no default]

`e-icon-left` [no default]

Textarea `<textarea>`

`e-label` [required]

`e-label-variant` [override default]

`default`

`grid`

`hide`

`infield`

Select `<select>`

`e-label` [required]

`e-label-variant` [override default]

`default`

`grid`

`hide`

`infield`

`e-placeholder` [override default]

Offcanvas `<offcanvas>`

`e-persistent` `<offcanvas>` [no default]

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

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

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

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

Dropdown `<dropdown>`

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

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

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

`e-position-right` `<dropdown-content>` [no default]

`e-position-top` `<dropdown-content>` [no default]

Dropdown menu `<dropdown-menu>`

`e-position-right` `<dropdown-menu-content>` [no default]

`e-position-top` `<dropdown-menu-content>` [no default]

Section `<section>`

`e-mute` [no default]

Div `<div>`