Mybring Design System

https://www.mybring.com/design-system
Admin
Mybring Design System provides documentation and technical solutions for building Mybring's...
Tokens:89,609
Snippets:177
Trust Score:8.1
Update:1 year ago
Show doc for...
Tokens:
Raw
### HTML Search Input Example

Source: https://www.mybring.com/design-system/components/forms/search-input

Demonstrates a common pattern for search inputs combined with a button. It follows best practices like using `type='search'` for built-in clear functionality and always including a label for accessibility. The example uses utility classes for layout and styling.

```html
<form class="mb-form">
  <label for="search-input">Input type label</label>
  <div class="flex flex-wrap gaxs">
    <input type="search" id="search-input" class="maxw20r" />
    <button type="button" class="btn btn--green">Search for data</button>
  </div>
</form>
```

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

### MybringDesign Toolbar Component Example

Source: https://www.mybring.com/design-system/components/buttons/toolbar

This component groups buttons together and applies necessary styling. It includes examples of buttons with icons and text. A `pointev-none` class can be added to icons if they interfere with clickability.

```html
<div class="btngroup">
  <button class="btn btn--white">
    <span data-mybicon="mybicon-edit" data-mybicon-class="icon-ui"></span>
    Edit
  </button>
  <button class="btn btn--white">
    <span data-mybicon="mybicon-copy" data-mybicon-class="icon-ui"></span>
    Copy
  </button>
  <button class="btn btn--white">
    <span data-mybicon="mybicon-trash" data-mybicon-class="icon-ui"></span>
    Delete
  </button>
</div>
```

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

### HTML Example: Flexbox Flex-Start Alignment

Source: https://www.mybring.com/design-system/utilities/flexbox/align

Demonstrates aligning flex items to the start of the cross axis in a wrapping flex container. This ensures items are packed towards the beginning.

```html
<div class="exh8 flex flex-wrap align-cfs gas">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>
```

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

### Applying Utility Classes

Source: https://www.mybring.com/design-system/utilities

Example of how to apply design system utility classes to HTML elements for styling.

```html
<div class="maxw40r mbl pam bg-gray2">
  <div class="text-1.25r">
    Use design system classes before writing new CSS
  </div>
</div>
```

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

### Mybring Design System HTML Button Examples

Source: https://www.mybring.com/design-system/components/buttons

Illustrates how to implement Mybring Design System buttons using HTML. Shows examples for expandable, dropdown, and icon-only buttons with embedded icons using specific span attributes.

```html
<button class="btn btn--white">
  <span data-mybicon="mybicon-arrow-right" data-mybicon-class="icon-ui"></span>
  Expandable
</button>

<button class="btn btn--white">
  Dropdown
  <span data-mybicon="mybicon-arrow-down" data-mybicon-class="icon-ui"></span>
</button>

<button class="btn btn--white" title="View invoice">
  <span data-mybicon="mybicon-file-invoice" data-mybicon-class="icon-ui--m"></span>
</button>
```

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

### Checkbox Example (HTML)

Source: https://www.mybring.com/design-system/components/forms/check-radio

Demonstrates the usage of checkboxes for multiple selections. Each checkbox input is wrapped within a label element for better accessibility and usability. Includes examples for standard checkboxes and the indeterminate state.

```html
<form class="mb-form owll">
  <fieldset>
    <legend>Legend</legend>
    <div class="flex flex-wrap gcl grs">
      <label><input type="checkbox" name="option" value="1" />Option 1</label>
      <label><input type="checkbox" name="option" value="2" />Option 2</label>
      <label><input type="checkbox" name="option" value="3" disabled/>Option 3</label>
    </div>
  </fieldset>

  <fieldset>
    <legend>Indeterminate</legend>
    <label><input type="checkbox" name="indeterminate" value="all" />All</label>
    <div class="flex flex-wrap gcl grs plm">
      <label><input type="checkbox" name="indeterminate" value="first" />Option 1</label>
      <label><input type="checkbox" name="indeterminate" value="second" />Option 2</label>
    </div>
  </fieldset>
</form>
```

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

### Flexbox Layout Example

Source: https://www.mybring.com/design-system/guidelines/building-layout

Demonstrates building a responsive layout using Mybring's flexbox utilities for side-by-side elements that wrap based on content and container size.

```html
<div class="mb-form flex flex-wrap gcs maxw48r mbm">
  <label class="maxw8r">
    Postal code
    <input type="text" />
  </label>
  <label class="maxw16r">
    Address
    <input type="text" />
  </label>
</div>
```

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

### Align Items Flex Start - HTML Example

Source: https://www.mybring.com/design-system/utilities/flexbox/align

Demonstrates using the 'align-ifs' utility class to position flex children at the start of the cross axis. This requires a parent element with 'display: flex' and child elements.

```html
<div class="flex align-ifs gas">
  <div class="examplebox maxw12r">A – – – – – – – – – – – – – –</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>
```

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

### HTML Example: Flexbox Center Alignment

Source: https://www.mybring.com/design-system/utilities/flexbox/align

Demonstrates centering items within a flex container using CSS properties. This example shows a basic setup for cross-axis centering.

```html
<div class="exh8 flex gas">
  <div class="examplebox">A</div>
  <div class="examplebox align-sc">B</div>
  <div class="examplebox">C</div>
</div>
```

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

### Dropdown Example Menu

Source: https://www.mybring.com/design-system/components/disclosure

Provides an example HTML structure for a custom dropdown menu, demonstrating how links and actions can be presented within a collapsible interface.

```html
Menu

Link to some place
Link to some other place
Short link
Link

Close

Close Information about the choice

Close and archive
I’m different too, but we’re all just variations

Close and delete
```

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

### Align Self Flex Start - HTML Example

Source: https://www.mybring.com/design-system/utilities/flexbox/align

Demonstrates using the 'align-sfs' utility class on a child element to override the parent's 'align-items' and position the child at the start of the parent's cross axis.

```html
<div class="exh8 flex gas">
  <div class="examplebox">A</div>
  <div class="examplebox align-sfs">B</div>
  <div class="examplebox">C</div>
</div>
```

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

### Radio Input Example (HTML)

Source: https://www.mybring.com/design-system/components/forms/check-radio

Illustrates how to implement radio buttons for single selection scenarios. Each radio input is associated with a label element. The example shows how to manage selected states and advises against disabling options in favor of removing them.

```html
<form class="mb-form">
  <fieldset>
    <legend>Tracking type</legend>
    <div class="flex flex-wrap gcl grs">
      <label><input type="radio" name="tracking" value="rfid" />RFID tracking</label>
      <label><input type="radio" name="tracking" value="barcode" checked />Barcode tracking</label>
      <label><input type="radio" name="tracking" value="none" />Without tracking</label>
    </div>
  </fieldset>
</form>
```

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

### HTML Example of Owl Spacing

Source: https://www.mybring.com/design-system/utilities/size-and-space/owl

Demonstrates the usage of the 'owls' class on a container element to apply vertical spacing to its child elements. The example shows a nested structure with background colors for clarity.

```html
<div class="bg-gray2 pam">
  <div class="owls bg-gray4">
    <div>* + *</div>
    <div>* + *</div>
    <div>* + *</div>
  </div>
</div>
```

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

### MyBring Icon Implementation (data-mybicon)

Source: https://www.mybring.com/design-system/components/icons

Demonstrates how to implement general MyBring icons using `data-mybicon` attributes in HTML. Includes examples for basic usage and advanced options like custom classes, dimensions, and titles.

```html
<!--
Simple example -->
<span data-mybicon="mybicon-cross" data-mybicon-class="icon-ui"></span>

<!-- Example with all available options -->
<span
  data-mybicon="mybicon-arrow-down"
  data-mybicon-class="optional-classname"
  data-mybicon-width="28"
  data-mybicon-height="28"
  data-mybicon-title="optional-title"
></span>
```

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

### Alerts: Basic HTML Example

Source: https://www.mybring.com/design-system/components/alerts

Demonstrates the basic usage of alert messages for success, warning, and error states. These examples utilize specific CSS classes like 'message--success', 'message--warn', and 'message--error' for styling. They also incorporate utility classes for layout and spacing.

```html
<div class="message--success maxw48r pam">
  <div class="measure">
    This worked exactly as it should.
  </div>
</div>

<div class="message--warn maxw48r pam">
  <div class="measure">
    Confirmation emails can be delayed up to ten minutes.
  </div>
</div>

<div class="message--error maxw48r pam">
  <div class="measure">
    The form contains errors that need to be fixed before you can proceed.
    <ul>
      <li >Address is required</li>
      <li>Weight is required</li>
  </ul>
  </div>
</div>
```

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

### Pagination with Links

Source: https://www.mybring.com/design-system/components/pagination

Demonstrates pagination implemented using anchor (<a>) tags for navigation, providing a semantic alternative to buttons. This example shows how links can be styled to function as pagination controls.

```HTML
<nav aria-label="Pagination">
  <ul class="pagination">
    <li>
      <a title="Previous page" href="#1">
        <span
          data-mybicon="mybicon-arrow-left"
          data-mybicon-class="icon-ui"
        ></span>
      </a>
    </li>
    <li>
      <a href="#1">1</a>
    </li>
    <li>
      <a aria-current="page" href="#2">2</a>
    </li>
    <li>
      <a href="#3">3</a>
    </li>
    <li>
      <a href="#4">4</a>
    </li>
    <li>
      <a href="#5">5</a>
    </li>
    <li>
      <a href="#6">6</a>
    </li>
    <li>
      <a href="#7">7</a>
    </li>
    <li>
      <a title="Next page" href="#3">
        <span
          data-mybicon="mybicon-arrow-right"
          data-mybicon-class="icon-ui"
        ></span>
      </a>
    </li>
  </ul>
</nav>
```

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

### Flexbox Justify-Content: flex-start Example

Source: https://www.mybring.com/design-system/utilities/flexbox/justify

Demonstrates the use of the `justify-cfs` utility class to position flex children at the start of the main axis. This is the default behavior for flex containers.

```html
<div class="flex justify-cfs gas">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>
```

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

### Utility Class Definitions

Source: https://www.mybring.com/design-system/utilities

CSS rules corresponding to the utility classes used in the HTML example.

```css
.maxw40r { max-width: 40rem; }
.mbl { margin-bottom: 2rem; }
.pam { padding: 1rem; }
.bg-gray2 { background-color: hsl(0, 0%, 95%); }
.text-1\.25 { font-size: 1.25rem; }
```

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

### Flexbox Gap Example - HTML

Source: https://www.mybring.com/design-system/utilities/size-and-space/gap

Demonstrates the usage of flexbox utilities and gap classes to create a responsive grid layout with spacing between items. It shows how to apply classes for width, padding, and gap to child elements within a flex container.

```HTML
<div class="flex flex-wrap gal maxw32r">
  <div class="bg-gray2 pam radius-a max12r">Child</div>
  <div class="bg-gray2 pam radius-a max12r">Child</div>
  <div class="bg-gray2 pam radius-a max12r">Child</div>
  <div class="bg-gray2 pam radius-a max12r">Child</div>
  <div class="bg-gray2 pam radius-a max12r">Child</div>
  <div class="bg-gray2 pam radius-a max12r">Child</div>
  <div class="bg-gray2 pam radius-a max12r">Child</div>
  <div class="bg-gray2 pam radius-a max12r">Child</div>
  <div class="bg-gray2 pam radius-a max12r">Child</div>
  <div class="bg-gray2 pam radius-a max12r">Child</div>
</div>
```

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

### HTML Example: Flexbox Space-Between Alignment

Source: https://www.mybring.com/design-system/utilities/flexbox/align

Shows distributing space between flex items in a wrapping container. The first item is at the start, the last at the end, and remaining space is distributed evenly between items.

```html
<div class="exh12 flex flex-wrap align-csb gas">
  <div class="examplebox">A – – – – – – – – – – – – – – – – –</div>
  <div class="examplebox">B – – – – – – – – – – – –</div>
  <div class="examplebox">C</div>
</div>
```

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

### HTML Example: Flexbox Space-Around Alignment

Source: https://www.mybring.com/design-system/utilities/flexbox/align

Demonstrates distributing space around flex items in a wrapping container. Each item gets equal space on both sides, with half-spaces at the ends.

```html
<div class="exh12 flex flex-wrap align-csa gas">
  <div class="examplebox">A – – – – – – – – – – – – – – – – –</div>
  <div class="examplebox">B – – – – – – – – – – – –</div>
  <div class="examplebox">C</div>
</div>
```

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

### Siteimprove Event Logging Setup

Source: https://www.mybring.com/design-system/guidelines/statistics

Defines an enum for Siteimprove event categories and a helper function to register events with the Siteimprove API. This setup centralizes logging logic and ensures the Siteimprove object is available before attempting to log.

```TypeScript
export enum SICategory {
  TASK = "Task",
  SETTING = "Setting",
  FLOW_STEP = "Flow step",
  UI_CHANGE = "UI change",
  CONDITIONAL_VIEW = "Conditional view",
  ERROR_MESSAGE = "Error message",
  ADMINISTRATION = "Administration"
}

export const logToSiteImprove = (
  category: SICategory,
  action: string,
  label: string
) => {
  if (typeof Siteimprove !== "undefined") {
    Siteimprove.registerEvent({
      category: category,
      action: action,
      label: label
    })
  }
}
```

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

### Pagination with Page Skipping Buttons

Source: https://www.mybring.com/design-system/components/pagination

Demonstrates a pagination component using buttons, featuring skip forward functionality for navigating larger page ranges. This example illustrates the UI structure for page skipping.

```HTML
<nav aria-label="Pagination">
  <ul class="pagination">
    <li>
      <button title="Previous page">
        <span
          data-mybicon="mybicon-arrow-left"
          data-mybicon-class="icon-ui"
        ></span>
      </button>
    </li>
    <li>
      <button>1</button>
    </li>
    <li>
      <button>2</button>
    </li>
    <li>
      <button>3</button>
    </li>
    <li>
      <button aria-current="page">4</button>
    </li>
    <li>
      <button>5</button>
    </li>
    <li>
      <button title="Skip forwards 4 pages">
        <span data-mybicon="mybicon-arrows-right" data-mybicon-class="icon-ui"></span>
    </button>
    </li>
    <li>
      <button>8</button>
    </li>
    <li>
      <button title="Next page">
        <span
          data-mybicon="mybicon-arrow-right"
          data-mybicon-class="icon-ui"
        ></span>
      </button>
    </li>
  </ul>
</nav>
```

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

### HTML Example: Flexbox Stretch Alignment

Source: https://www.mybring.com/design-system/utilities/flexbox/align

Shows how to stretch flex items to fill the container along the cross axis. This example applies stretching to items within a flex container.

```html
<div class="exh8 flex gas">
  <div class="examplebox">A</div>
  <div class="examplebox align-ss">B</div>
  <div class="examplebox">C</div>
</div>
```

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

### HTML for Description Lists

Source: https://www.mybring.com/design-system/components/lists

Illustrates the structure for description lists (`<dl>`), which are used for presenting terms and their definitions or key-value pairs. The examples show grouping terms (`<dt>`) and descriptions (`<dd>`) using `div` elements and applying the `mb-dlist` class for specific styling.

```html
<dl class="owlm">
  <div>
    <dt>Shipment</dt>
    <dd><a href="#">123456789</a></dd>
  </div>
  <div>
    <dt>Recipient</dt>
    <dd>Burgers and Beauty as</dd>
  </div>
  <div>
    <dt>Sent</dt>
    <dd>26.06.2016 14.12</dd>
  </div>
</dl>

<dl class="mb-dlist">
  <dt>Shipment</dt>
  <dd><a href="#">987654321</a></dd>
  <dt>Recipient</dt>
  <dd>Acme Industries</dd>
  <dt>Sent</dt>
  <dd>14.07.2016 12.56</dd>
</dl>
<dl class="mb-dlist">
  <dt>Shipment</dt>
  <dd><a href="#">123456789</a></dd>
  <dt>Recipient</dt>
  <dd>Burgers and Beauty as</dd>
  <dt>Sent</dt>
  <dd>26.06.2016 14.12</dd>
</dl>
<dl class="mb-dlist">
  <dt>Shipment</dt>
  <dd><a href="#">456789123</a></dd>
  <dt>Recipient</dt>
  <dd>Rent-A-Cat Co.</dd>
  <dt>Sent</dt>
  <dd>02.05.2016 11.38</dd>
</dl>
```

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

### CSS for MyBring Icon Styling

Source: https://www.mybring.com/design-system/components/icons

Provides a CSS example for styling MyBring icons, specifically demonstrating how to set the fill color for a grey icon variant. This allows for custom color definitions beyond the default theme.

```css
.mybring-service-icon--grey {
  fill: #aaa;
}
```

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

### HTML Fieldset and Legend Example

Source: https://www.mybring.com/design-system/components/forms/fieldset

Demonstrates the use of HTML `<fieldset>` and `<legend>` elements to group related form controls. This example shows how to structure radio buttons for tracking type and text inputs for container dimensions, utilizing Mybring Design System's CSS classes for layout.

```HTML
<form class="mb-form">
  <fieldset class="mbl">
    <legend>Tracking type</legend>
    <div class="flex flex-wrap gcl grs">
      <label><input type="radio" name="tracking" value="rfid" />RFID tracking</label>
      <label><input type="radio" name="tracking" value="barcode" checked />Barcode tracking</label>
      <label><input type="radio" name="tracking" value="none" />Without tracking</label>
    </div>
  </fieldset>

  <fieldset>
    <legend>
      Container size
    </legend>
    <div class="flex flex-wrap gcs grm">
      <label>
        Height
        <input type="text" />
      </label>
      <label>
        Width
        <input type="text" />
      </label>
      <label>
        Length
        <input type="text" />
      </label>
    </div>
  </fieldset>
</form>
```

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

### Mybring Design System `mb-card` Component Example

Source: https://www.mybring.com/design-system/components/cards

This snippet demonstrates the usage of the `mb-card` class to create interactive cards. These cards are designed as entrance elements, displaying parcel information like weight, delivery time, and price. They are styled with flexbox for layout and include basic HTML structure for content.

```html
<div class="flex flex-wrap gas">
  <a href="#" class="mb-card pam pbl">
    <h3>Business parcel</h3>
    <dl class="mt-auto mb0">
      <div>
        <dt class="di">Weight:</dt>
        <dd class="di">Max 35&nbsp;kg per parcel</dd>
      </div>
      <div>
        <dt class="di">Delivery:</dt>
        <dd class="di">Tomorrow at 09-13</dd>
      </div>
      <div>
        <dt class="di">Price:</dt>
        <dd class="di">Calculation available</dd>
      </div>
    </dl>
  </a>
  <a href="#" class="mb-card pam pbl">
    <h3>Mailbox parcel</h3>
    <dl class="mt-auto mb0">
      <div>
        <dt class="di">Weight:</dt>
        <dd class="di">Max 5&nbsp;kg per parcel</dd>
      </div>
      <div>
        <dt class="di">Delivery:</dt>
        <dd class="di">Monday</dd>
      </div>
      <div>
        <dt class="di">Price:</dt>
        <dd class="di">Calculation available</dd>
      </div>
    </dl>
  </a>
  <a href="#" class="mb-card pam pbl">
    <h3>Home delivery parcel</h3>
    <dl class="mt-auto mb0">
      <div>
        <dt class="di">Weight:</dt>
        <dd class="di">Max 35&nbsp;kg per parcel</dd>
      </div>
      <div>
        <dt class="di">Delivery:</dt>
        <dd class="di">Tomorrow at 15-22</dd>
      </div>
      <div>
        <dt class="di">Price:</dt>
        <dd class="di">Calculation available</dd>
      </div>
    </dl>
  </a>
</div>
```

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

### Logging User Interaction

Source: https://www.mybring.com/design-system/guidelines/statistics

Demonstrates how to use the `logToSiteImprove` function within an event handler, such as a button click. This example shows how to pass the appropriate category, action, and label to track a specific user interaction.

```TypeScript
import { logToSiteImprove, SICategory } from '../analytics.ts'

// ... inside a component

<button onClick={() => {
  logToSiteImprove(
    SICategory.TASK,
    "Edit address book contact",
    "Confirm edit contact",
  )
}}>
  Save Contact
</button>
```

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

### Textarea Component

Source: https://www.mybring.com/design-system/components/forms/text-inputs

Provides an example of a textarea element, which is used for multi-line text input. It includes a label for accessibility and semantic correctness.

```html
<form class="mb-form maxw32r">
  <label for="input-textarea">Text areas also need labels</label>
  <textarea id="input-textarea"></textarea>
</form>
```

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

### HTML Backward Navigation Link

Source: https://www.mybring.com/design-system/guidelines/navigation

Provides an example of an HTML anchor tag for backward navigation, typically used for linking to a parent page. It uses an arrow character for visual indication.

```html
<a href="#">&larr; {page title}</a>
```

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

### Flex Utilities: flex-1 Example

Source: https://www.mybring.com/design-system/utilities/flexbox/flex

Demonstrates the 'flex-1' utility class, which applies the CSS declaration 'flex: 1 1 0%;'. This allows child elements to grow and shrink as needed, ignoring their initial size, and results in equal-sized elements within the flex container.

```html
<div class="flex gas">
  <div class="examplebox flex-1">A – – – –</div>
  <div class="examplebox flex-1">B – – – – – – – – – – – – – –</div>
  <div class="examplebox flex-1">C</div>
</div>
```

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

### Flex Utilities: flex-auto Example

Source: https://www.mybring.com/design-system/utilities/flexbox/flex

Illustrates the 'flex-auto' utility class, corresponding to the CSS declaration 'flex: 1 1 auto;'. This enables child elements to grow and shrink while considering their initial size, leading to an equal distribution of remaining space within the flex container.

```html
<div class="flex gas">
  <div class="examplebox flex-auto">A – – – –</div>
  <div class="examplebox flex-auto">B – – – – – – – – – – – – – –</div>
  <div class="examplebox flex-auto">C</div>
</div>
```

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

### HTML: Flexbox Wrap Example

Source: https://www.mybring.com/design-system/utilities/flexbox/wrap

Demonstrates how to allow flex items to wrap onto multiple lines using the 'flex-wrap: wrap;' CSS property via the 'flex-wrap' utility class. This is useful when content exceeds the container width and needs to flow to the next line.

```html
<div class="flex flex-wrap gas">
  <div class="examplebox">A – – – – – – – – – – – – – – – –</div>
  <div class="examplebox">B – – – – – –</div>
  <div class="examplebox">C – – – – – – – – – – – – – – – – – – – –</div>
</div>
```

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

### HTML: Icon-Only Button/Link Examples

Source: https://www.mybring.com/design-system/components/buttons/mini-buttons

Illustrates using `btn-link` and `btn-link--dark` classes with icons for interactive elements like 'Remove' or 'More'. The `title` attribute is recommended for accessibility when icons are the primary interactive element.

```html
<button class="btn-link" title="Remove">
<span
  data-mybicon="mybicon-cross"
  data-mybicon-class="icon-ui"
></span>
</button>
<a class="btn-link" title="More">
<span
  data-mybicon="mybicon-dotdotdot"
  data-mybicon-class="icon-ui"
></span>
</a>

<button class="btn-link active">Active button</button>
```

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

### HTML Table Component with Sticky Headers and Columns

Source: https://www.mybring.com/design-system/components/tables/overflow

An example of an HTML table structure implementing Mybring Design System classes for responsive layout and sticky positioning. It includes a container with a maximum height and horizontal scrolling, along with a table featuring sticky headers and the first column.

```HTML
<div class="scrollshade-h of-auto" style="max-height:30vh;">
  <table class="mb-table mb-table__sticky-top mb-table__sticky-left mbm">
    <thead>
      <tr>
        <th scope="col" aria-label="Row titles"></th>
        <th scope="col">Shipment</th>
        <th scope="col" class="minw9r ws-nowrap">Recipient</th>
        <th scope="col">Created</th>
        <th scope="col">Updated</th>
        <th scope="col">Order</th>
        <th scope="col">Plant</th>
        <th scope="col">Status</th>
        <th scope="col" class="tr">Price</th>
        <th scope="col">Sent</th>
        <th scope="col">Delivered</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <th scope="row" class="ws-nowrap">Amec Steel</th>
        <td><a href="#">987654321</a></td>
        <td>Acme Industries</td>
        <td>14.07.2022 12:56</td>
        <td>14.07.2022 13:41</td>
        <td><a href="#">0098765432122</a></td>
        <td>BOB</td>
        <td>Arrived</td>
        <td class="tr ws-nowrap">NOK 198 765,00</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <th scope="row" class="ws-nowrap">Fine Fries AS</th>
        <td><a href="#">123456789</a></td>
        <td>Burgers and Beauty as</td>
        <td>26.06.2022 14:12</td>
        <td>28.06.2022 11:27</td>
        <td><a href="#">0012345678943</a></td>
        <td>BOB</td>
        <td>Delivered</td>
        <td class="tr ws-nowrap">NOK 666,00</td>
        <td>28.06.2022 14:18</td>
        <td class="tc">
          <span
            data-mybicon="mybicon-check"
            data-mybicon-class="icon-ui icon-ui--green-dark"
          ></span>
        </td>
      </tr>
      <tr>
        <th scope="row" class="ws-nowrap">MomCorp</th>
        <td><a href="#">456789123</a></td>
        <td>Rich Industries</td>
        <td>02.05.2022 11:38</td>
        <td>03.05.2022 15:33</td>
        <td><a href="#">0145678912377</a></td>
        <td>BOB</td>
        <td>Delivered</td>
        <td class="tr ws-nowrap">NOK 37,00</td>
        <td>06.05.2022 09:44</td>
        <td class="tc">
          <span
            data-mybicon="mybicon-check"
            data-mybicon-class="icon-ui icon-ui--green-dark"
          ></span>
        </td>
      </tr>
      <tr>
        <th scope="row" class="ws-nowrap">Wayne Enterprises</th>
        <td><a href="#">876543219</a></td>
        <td>Stark Industries</td>
        <td>28.04.2022 10:08</td>
        <td>29.04.2022 14:32</td>
        <td><a href="#">0037123345567</a></td>
        <td>BOB</td>
        <td>Delivered</td>
        <td class="tr ws-nowrap">NOK 97,00</td>
        <td>29.04.2022 12:14</td>
        <td class="tc">
          <span
            data-mybicon="mybicon-check"
            data-mybicon-class="icon-ui icon-ui--green-dark"
          ></span>
        </td>
      </tr>
      <tr>
        <th scope="row" class="ws-nowrap">Virtucon</th>
        <td><a href="#">765432198</a></td>
        <td>Gringotts</td>
        <td>16.04.2022 09:18</td>
        <td>18.04.2022 15:41</td>
        <td><a href="#">0037987567543</a></td>
        <td>BOB</td>
        <td>Delivered</td>
        <td class="tr ws-nowrap">NOK 804,00</td>
        <td>18.04.2022 10:12</td>
        <td class="tc">
          <span
            data-mybicon="mybicon-check"
            data-mybicon-class="icon-ui icon-ui--green-dark"
          ></span>
        </td>
      </tr>
      <tr>
        <th scope="row" class="ws-nowrap">Oscorp</th>
        <td><a href="#">654321098</a></td>
        <td>Wayne Enterprises</td>
        <td>29.03.2022 11:38</td>
        <td>30.03.2022 15:33</td>
        <td><a href="#">0037987567345</a></td>
        <td>BOB</td>
        <td>Delivered</td>
        <td class="tr ws-nowrap">NOK 543,00</td>
        <td>31.03.2022 10:54</td>
        <td class="tc">
          <span
            data-mybicon="mybicon-check"
            data-mybicon-class="icon-ui icon-ui--green-dark"
          ></span>
        </td>
      </tr>
      <tr>
        <th scope="row" class="ws-nowrap">Frobozz Magic Co.</th>
        <td><a href="#">543210987</a></td>
        <td>Spacely Space Sprockets</td>
        <td>27.02.2022 13:35</td>
        <td>28.02.2022 15:28</td>
        <td><a href="#">0037234456234</a></td>
        <td>BOB</td>
        <td>Delivered</td>
        <td class="tr ws-nowrap">NOK 76,00</td>
        <td>28.02.2022 10:06</td>
        <td class="tc">
          <span
            data-mybicon="mybicon-check"
            data-mybicon-class="icon-ui icon-ui--green-dark"
          ></span>
        </td>
      </tr>
    </tbody>
  </table>
</div>
```

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

### Align Items Baseline - HTML Example

Source: https://www.mybring.com/design-system/utilities/flexbox/align

Demonstrates using the 'align-ib' utility class to position flex children on their baseline. This requires a parent element with 'display: flex' and child elements, including elements with defined line heights.

```html
<div class="flex align-ib gas">
  <div class="examplebox maxw12r">A – – – – – – – – – – – – – –</div>
  <div class="examplebox lh-solid">B</div>
  <div class="examplebox">C</div>
</div>
```

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

### HTML Modal for Destructive Action Confirmation

Source: https://www.mybring.com/design-system/components/modal

This example shows an HTML dialog designed for confirming a destructive, non-reversible action. It utilizes a danger-themed styling class and clearly presents the consequences of the action, with 'Cancel' and 'Yes, delete key' buttons.

```HTML
<dialog
  aria-labelledby="dialog-2-title"
  aria-describedby="dialog-2-desc"
  class="mb-modal mb-modal--danger maxw32r"
  open
>
  <div>
    <h2 id="dialog-2-title" class="text-1.25r">Delete key</h2>
    <p id="dialog-2-desc" class="mbl">
      All connections using this key will stop working. It cannot be
      recovered, but you can generate a new one. Are you sure you want to
      delete your key?
    </p>
    <div class="tr">
      <button class="btn">No, cancel</button>
      <button class="btn btn--danger mls">Yes, delete key</button>
    </div>
  </div>
</dialog>
```

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

### Initialize Chart.js with Base Configuration

Source: https://www.mybring.com/design-system/components/charts

Sets up chart.js with default configurations and color palettes provided by the `@mybring/charts` package. This is the primary step for integrating charts.

```javascript
import { configureChartJs, colors } from '@mybring/charts'
configureChartJs()
```

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

### Standard Notice Component

Source: https://www.mybring.com/design-system/components/notice

Demonstrates the basic 'mb-notice' component for general information delivery. It can contain text and links, and is styled with 'flex', 'gas', 'maxwmaxc', and 'mbl' classes for layout and responsiveness.

```html
<div class="mb-notice flex gas maxwmaxc mbl">
  <p>We can deliver your packages to a parcel locker. Select Optional pickup point from <a href="/">Additional services</a>, type in
    e.g. "pakkeboks Ski", and pick your desired parcel locker from the dropdown list. Alternatively you can type in a
    postal code to get a list of the nearest pickup points.</p>
</div>

<div class="mb-notice flex gas maxwmaxc">
  <span data-mybicon="mybicon-info"></span>
  <div>
    <h3>Business parcel</h3>
    <dl>
      <div>
        <dt class="di">Weight:</dt>
        <dd class="di">Max 35&nbsp;kg per parcel</dd>
      </div>
      <div>
        <dt class="di">Delivery:</dt>
        <dd class="di">Tomorrow at 09-13</dd>
      </div>
      <div>
        <dt class="di">Price:</dt>
        <dd class="di"><a href="/"></a>Calculation available</a></dd>
      </div>
      <button class="btn mtm">Click me</button>
    </dl>
  </div>
</div>
```

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

### MyBring Service Icon Implementation (data-serviceicon)

Source: https://www.mybring.com/design-system/components/icons

Demonstrates how to implement Bring service icons using `data-serviceicon` attributes in HTML. Covers basic usage and advanced options for custom classes, dimensions, and titles for service-specific icons.

```html
<!--
Simple example -->
<span
  data-serviceicon="serviceicon-crate"
  data-serviceicon-class="mybring-service-icon--grey"
></span>

<!-- Example with all available options -->
<span
  data-serviceicon="serviceicon-building"
  data-serviceicon-class="optional-classname"
  data-serviceicon-width="48"
  data-serviceicon-height="48"
  data-serviceicon-title="optional-title"
></span>
```

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

### HTML Example: Flexbox Stretch Cross-Axis Alignment

Source: https://www.mybring.com/design-system/utilities/flexbox/align

Demonstrates stretching flex items to fill the container along the cross axis. This example applies stretching to items within a flex container.

```html
<div class="exh8 flex align-cs gas">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>
```

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

### Browserslist Recommendation for Modern Web Development

Source: https://www.mybring.com/design-system/basics/browser-support

This configuration specifies browser compatibility targets for tools like Autoprefixer and Babel. It prioritizes usage percentage and specific browsers over 'last x version' for better adaptability and maintenance.

```json
{
  "browserslist": [
    "> .2%",
    "ie not > 0"
  ]
}
```

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

### HTML Example: Flexbox Wrap Center Alignment

Source: https://www.mybring.com/design-system/utilities/flexbox/align

Illustrates centering items within a flex container that also wraps. This example applies cross-axis centering to items that may span multiple lines.

```html
<div class="exh8 flex flex-wrap align-cc gas">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>
```

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

### Flexbox Direction Utilities: HTML Examples

Source: https://www.mybring.com/design-system/utilities/flexbox/direction

Demonstrates the usage of MybringDesign System's flexbox direction utility classes. These classes are applied to a flex parent element to control the main and cross axes, affecting the layout direction of flex items. The examples showcase 'row', 'row-reverse', 'column', and 'column-reverse' modes.

```html
<div class="flex flex-dir-row gas">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>
```

```html
<div class="flex flex-dir-row-rev gas">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>
```

```html
<div class="flex flex-dir-col gas">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>
```

```html
<div class="flex flex-dir-col-rev gas">
  <div class="examplebox">A</div>
  <div class="examplebox">B</div>
  <div class="examplebox">C</div>
</div>
```

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

### HTML for MyBring Icons with Styling

Source: https://www.mybring.com/design-system/components/icons

Demonstrates how to implement MyBring icons using HTML `<span>` elements. The `data-mybicon` attribute specifies the icon name, while `data-mybicon-class` applies styling for size (e.g., `icon-ui--m`) and color (e.g., `icon-ui--green`). Additional classes can be added for specific states like hover effects.

```html
<span data-mybicon="mybicon-cross" data-mybicon-class="icon-ui"></span>
<span data-mybicon="mybicon-cross" data-mybicon-class="icon-ui--m"></span>
<span data-mybicon="mybicon-cross" data-mybicon-class="icon-ui--l"></span>

<span data-mybicon="mybicon-arrow-right" data-mybicon-class="icon-ui--m"></span>
<span
  data-mybicon="mybicon-arrow-right"
  data-mybicon-class="icon-ui--m icon-ui--green"
></span>
<span
  data-mybicon="mybicon-arrow-right"
  data-mybicon-class="icon-ui--m icon-ui--green-dark"
></span>
<span
  data-mybicon="mybicon-arrow-right"
  data-mybicon-class="icon-ui--m icon-ui--orange"
></span>
<span
  data-mybicon="mybicon-arrow-right"
  data-mybicon-class="icon-ui--m icon-ui--red"
></span>
<span
  data-mybicon="mybicon-arrow-right"
  data-mybicon-class="icon-ui--m icon-ui--gray"
></span>
<span
  data-mybicon="mybicon-arrow-right"
  data-mybicon-class="icon-ui--m icon-ui--lightgray"
></span>
```

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

### Horizontal Rule Example

Source: https://www.mybring.com/design-system/utilities/style/borders

Using the `<hr>` HTML element to create a thematic break between content sections. It visually appears similar to a border.

```HTML
<hr>
```
Tokens:
Raw