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

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

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

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

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

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

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

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

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

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

### 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; }
```

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

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

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

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

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

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

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

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

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

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

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

### 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()
```

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

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

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

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

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

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

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

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

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

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

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

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

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

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