Introduction

Mirotone CSS components is the base library which enables everyone to design and build their Miro apps. The goal of this design system is to enable makers to quickly jump into a simple, yet consistent and efficient user experience while creating their functional solutions. The framework aims to provide ready-to-use frontend components that you can incorporate into your app in Miro.


Getting started

Mirotone is a CSS library, which means you can use the classes to style your HTML elements. To use it you can either:

• Install the package as a dependency on your own project by running:

yarn

 yarn add mirotone

npm

npm install mirotone

• Link the css directly by standard css linking

html

<link rel="stylesheet" href="https://unpkg.com/mirotone/dist/styles.css">

How does it work

Mirotone is inspired from the BEM architecture, Object Oriented CSS principles and functional CSS. You define the main class and you use a another class as a modifier to add the cusmotization.

Example:

html

<button class="button button-primary">Primary button</button>

Variables

Mirotone uses variables, they are split in two groups, initial and derived variables. All those values are in the src/foundation-core.css. You can override the foundation-core before importing Mirotone or with ruling the CSS. For now please use the DevTools to check the full list of created variables.

Initial variables

Those variables are defined by literal value.

Example:

--space-xsmall: 8px

Derived variables

Those variables are calculated based on a initial variable created.

Example:

--space-small: calc(var(--space-xsmall) * 2)

Layout

Mirotone supports .grid. it is based on 12 column grid-template-columns. Each of the 12 cells are using the fr (fractional unit).

How to use

You can create your own grid html element or add a class .grid to the wrapper you want to create the grid layout. Then you should declare start and values for each of your columns to create the layout. The grid uses the Fluidigrid logic and comes with pre-declared naming convention, we use cs[n] for grid-column-start:[n] andce[n] for grid-column-end:[n].

The grid system is part of the foundation-core, and it is highly recommended when creating App layouts.

For example, if you want to declare a column which starts from the first to the last column you will declare:

html

<div class="cs1 ce12"></div>
cs1 ce2
cs3 ce7
cs8 ce10
cs11 ce12
cs1 ce8
cs9 ce12
cs1 ce5
cs6 ce12
cs1 ce3
cs4 ce6
cs7 ce9
cs10 ce12

Check App template

Colors

--blue100: rgba(244, 246, 255, 1);--blue200: rgba(240, 242, 255, 1);--blue300: rgba(232, 236, 255, 1);--blue400: rgba(217, 224, 255, 1);--blue500: rgba(179, 192, 255, 1);--blue600: rgba(104, 129, 255, 1);--blue700: rgba(66, 98, 255, 1);--blue800: rgba(69, 91, 237, 1);--blue900: rgba(61, 81, 212, 1);--indigo50: rgba(245, 245, 247, 1);--indigo100: rgba(240, 240, 243, 1);--indigo200: rgba(235, 235, 239, 1);--indigo300: rgba(225, 224, 231, 1);--indigo400: rgba(205, 204, 215, 1);--indigo500: rgba(155, 153, 175, 1);--indigo600: rgba(95, 92, 128, 1);--indigo700: rgba(5, 0, 56, 1);--indigoAlpha80: rgba(5, 0, 56, 0.8);--indigoAlpha40: rgba(5, 0, 56, 0.4);--indigoAlpha20: rgba(5, 0, 56, 0.2);--indigoAlpha12: rgba(5, 0, 56, 0.12);--indigoAlpha8: rgba(5, 0, 56, 0.08);--indigoAlpha6: rgba(5, 0, 56, 0.06);--indigoAlpha4: rgba(5, 0, 56, 0.04);--green700: rgba(119, 204, 102, 1);--black: rgba(9, 9, 9, 1);--blackAlpha80: rgba(9, 9, 9, 0.8);--blackAlpha40: rgba(9, 9, 9, 0.4);--white: rgba(255, 255, 255, 1);--whiteAlpha80: rgba(255, 255, 255, 0.8);--whiteAlpha40: rgba(255, 255, 255, 0.4);--whiteAlpha20: rgba(255, 255, 255, 0.2);--red50: rgba(254, 247, 247, 1);--red100: rgba(253, 242, 242, 1);--red400: rgba(247, 212, 212, 1);--red600: rgba(225, 84, 84, 1);--red700: rgba(217, 41, 41, 1);--red800: rgba(199, 20, 20, 1);--red900: rgba(184, 13, 13, 1);--yellow100: rgba(255, 252, 243, 1);--yellow400: rgba(255, 246, 213, 1);--yellow700: rgba(255, 208, 47, 1);

Typography

Headings

Use .h1 – .h4 class to change an elements font size and weight to match Miro heading styles. It is also normalizing each one of them.

Heading 1

Heading 2

Heading 3

Heading 4

html

<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<h3 class="h3">Heading 3</h3>
<h4 class="h4">Heading 4</h4>

Paragraph

Use .p-large,.p-medium or .p-small to change an elements font size and weight to match Miro paragraph styles.

Paragraph large

Paragraph medium

Paragraph small

html

<p class="p-large">Paragraph large</p>
<p class="p-medium">Paragraph medium</p>
<p class="p-small">Paragraph small</p>

Spacing

The spacing scale is a base-8 scale. We chose a base-8 scale because eight is a highly composable number (it can be divided and multiplied many times and result in whole numbers), yet allows spacing dense enough for different interface solutions. The scale's exception is that it begins at 4px to allow smaller padding and margin for denser parts of the site, from there on it steps up consistently in equal values of 8px.

--space-xxxsmall: calc(var(--space-xsmall) / 4);--space-xxsmall: calc(var(--space-xsmall) / 2);--space-xsmall: 8px;--space-small: calc(var(--space-xsmall) * 2);--space-medium: calc(var(--space-xsmall) * 3);--space-large: calc(var(--space-xsmall) * 4);--space-xlarge: calc(var(--space-xsmall) * 5);--space-xxlarge: calc(var(--space-xsmall) * 6);--space-xxxlarge: calc(var(--space-xsmall) * 8);

Icons

You can use the Miro icons by adding class .icon + .icon-eye, eye in this case is the icon name. You can find all icons in the dist/icons folder.

html

<div class="icon m2 icon-eye"></div>
Objects
Symbols
Board objects
Logos

You can install and use the Mirotone icons Figma plugin to design your concepts.

Placement

When you want to center something inside a container, there is a class for that. Use .centered.

Header 1

test

Header 2

test

Header 3

test

html

<div class="YOUR_CONTAINER">
  <div class="centered">
    <h1>We will be centered horizontally</h1>
    <p>And vertically</p>
  </div>
</div>

In the 3rd example you see that its still possible to bottom align another item within your container. Just give the container the following styles:

css

.YOUR_CONTAINER {
  display: flex;
  flex-direction: column;
}

Buttons

You can find two sizes of buttons: .button and .button-small.

Primary button

Use the .button class to trigger the default button. Use the .button-primary to add a modifier for color. When using a button element, always specify a type="".

html

<button class="button button-primary" type="button">
  Primary button
</button>
<button class="button button-primary button-small" type="button">
  Primary small button
</button>

Secondary button

Use the .button class to trigger the default button. Use the .button-secondary to add a modifier for color. When using a button element, always specify a type="".

html

<button class="button button-secondary" type="button">
  Secondary button
</button>
<button class="button button-secondary button-small" type="button">
  Secondary small button
</button>

Danger button

Use the .button class to trigger the default button. Use the .button-danger to add a modifier for color. When using a button element, always specify a type="".

html

<button class="button button-danger" type="button">
  Danger button
</button>
<button class="button button-danger button-small" type="button">
  Danger small button
</button>

Secondary border button

Use the .button class to trigger the default button. Use the .button-secondary-border to add a modifier for color. When using a button element, always specify a type="".

html

<button class="button button-secondary-border" type="button">
  Secondary border button
</button>
<button class="button button-secondary-border button-small" type="button">
  Secondary border small button
</button>

Danger border button

Use the .button class to trigger the default button. Use the .button-danger-border to add a modifier for color. When using a button element, always specify a type="".

html

<button class="button button-danger-border" type="button">
  Danger border button
</button>
<button class="button button-danger-border button-small" type="button">
  Danger border small button
</button>

Disabled button

Use the disabled="" attribute for disabling buttons. When using a button element, always specify a type="".

html

<button class="button button-primary" type="button" disabled>
  Disabled button
</button>
<button class="button button-primary button-small" type="button" disabled>
  Disabled small button
</button>

Loading button

Use the .button-loading class for calling a loading button appereance. When using a button element, always specify atype="".

html

<button class="button button-primary button-loading" type="button"></button>
<button class="button button-primary button-small button-loading" type="button"></button>

Icon button

Use the .button-icon class + .icon-name to render an icon button. Add .button-icon-small if you want to add a smaller icon button.

html

<button class="button-icon icon-eye" type="button"></button>
<button class="button-icon button-icon-small icon-eye" type="button"></button>

Checkbox

Use the .checkbox class.

html

<label class="checkbox">
  <input type="checkbox" tabindex="0">
  <span>Checkbox</span>
</label>

Toggle

Use the .toggle class.

html

<label class="toggle">
  <input type="checkbox" tabindex="0"/>
  <span>Toggle</span>
</label>

Radio button

Use .radiobutton class.

html

<label class="radiobutton">
  <input type="radio" name="radio">
  <span>Option 1</span>
</label>
<label class="radiobutton">
  <input type="radio" name="radio">
  <span>Option 2</span>
</label>

Textarea

Use .form-group to group the textarea with label and status if needed.

Textarea supports the normal size (.textarea) and a small size (.textarea.textarea-small)

html

<div class="form-group">
  <label for="textarea-example">Textarea</label>
  <textarea
    class="textarea"
    placeholder="Placeholder text"
    spellcheck="true"
    id="textarea-example"></textarea>
</div>

<div class="form-group-small">
  <label for="small-textarea-example">Small textarea</label>
  <textarea
    class="textarea textarea-small"
    placeholder="Placeholder text"
    spellcheck="true"
    id="small-textarea-example"></textarea>
</div>

Input

Use .form-group to group the input with label and status if needed.

You can find two sizes of inputs: .input and .input-small. Wrap .input-small with .form-group-small.

Input supports the following attributes disabled='', type="text", type="password", type="email" & type="tel".

html

<div class="form-group">
  <label>Input label</label>
  <input class="input" type="text" placeholder="Placeholder" />
</div>

Make a small input with the .form-group-small and .input-small classes.

html

<div class="form-group-small">
  <label>Input label</label>
  <input class="input input-small" type="text" placeholder="Placeholder" />
</div>

Give feedback on validation rules with .success

Saved, good job!

Decorations

You can also add a decoration before and after a input. To make sure the parts are positioned correctly you have to wrap them with a .input-group.

,-

html

<span class="input-group">
  <span class="input-decoration">&euro;</span>
  <input class="input" id="test4" type="number" placeholder="123456" />
  <span class="input-decoration">,-</span>
</span>

You can add whatever you want in the decorations, for instance, if you want to add a <svg\>:

html

<span class="input-group">
  <span class="input-decoration">
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
      <circle r="12" cx="12" cy="12" fill="var(--indigo700)"></circle>
    </svg>
  </span>
  <input class="input" type="email" placeholder="email@address.com"/>
</span>

You can combine inputs with select tags and decorators as needed:

html

<div class="input-group">
  <span class="input-decoration">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle r="12" cx="12" cy="12" fill="var(--indigo700)"></circle>
    </svg>
  </span>
  <select class="select one-fourth" id="test17">
    <option value="">Mastercard</option>
    <option value="">American Express</option>
  </select>
  <input class="input two-fourth" id="test18" type="text" placeholder="Card number" />
  <input class="input" type="month" placeholder="Expiration date" />
  <input class="input two-fourth" type="number" placeholder="CVC" />
  <span class="input-decoration border-left">
    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
      <circle r="12" cx="12" cy="12" fill="var(--indigo700)"></circle>
    </svg>
  </span>
</div>

Decorations have no left or right borders by default. You can add them if you want to by adding .border-left or .border-right

html

<div class="grid">
  <span class="input-group cs1 ce6">
    <span class="input-decoration border-right">&euro;</span>
    <input class="input" id="test4" type="number" placeholder="123456"/>
  </span>
  <span class="input-group cs7 ce12">
    <input class="input" id="test4" type="number" placeholder="123456"/>
    <span class="input-decoration border-left">&euro;</span>
  </span>
</div>

If you want to change a size of any item in the .input-group, you have 3 modifiers available. By default all items have flex: 4. To change it you can use: .one-fourth (flex:1), .two-fourth (flex:2) or .three-fourth (flex:3).

.one-fourth .two-fourth

html

<div class="grid">
  <span class="input-group cs1 ce6">
    <span class="input-decoration border-right one-fourth">.one-fourth</span>
    <input class="input" id="test4" type="number" placeholder="123456" />
  </span>
  <span class="input-group cs7 ce12">
    <input class="input" id="test4" type="number" placeholder="123456" />
    <span class="input-decoration border-left two-fourth">.two-fourth</span>
  </span>
</div>

Select

Use .select to style your select HTML Element.

The select input supports the normal size (.select) and a small size (.select.select-small)

html

<div class="input-group">
  <select class="select">
    <option value="1">Option one</option>
    <option value="2">Option two</option>
    <option value="3">Option three</option>
    <option value="4">Option four</option>
  </select>
</div>

html

<div class="input-group">
  <select class="select select-small">
    <option value="1">Option one</option>
    <option value="2">Option two</option>
    <option value="3">Option three</option>
    <option value="4">Option four</option>
  </select>
</div>

Just like text inputs, selects support decorations:

Yes:

html

<div class="form-group">
  <label for="do-you-use-vcs">Do you use a VCS?</label>
  <div class="input-group">
    <span class="input-decoration">Yes:</span>
    <select class="select" id="do-you-use-vcs">
      <option value="">GitHub</option>
      <option value="">GitLab</option>
      <option value="">BitBucket</option>
    </select>
  </div>
</div>

Tabs

Use .tabs to style your wrapper.Use .tab to style each pill inside.

You can add data-badge attribute if you want to present a numerical values inside each tab. Use tabindex="0" for indicating that its element can be focused.

Tabs are currently style-only components. In order to make them interactive, you will have to implement it in Javascript or use an existing NPM package.

Tab
Tab
Tab

html

  <div class="tabs">
    <div class="tabs-header-list">
      <div tabindex="0" class="tab tab-active">
        <div class="tab-text tab-badge" data-badge="1,000">Tab</div>
      </div>
      <div tabindex="0" class="tab">
        <div class="tab-text tab-badge" data-badge="2,201">Tab</div>
      </div>
      <div tabindex="0" class="tab">
        <div class="tab-text tab-badge" data-badge="2,858">Tab</div>
      </div>
    </div>
</div>

Divider

Use <hr/> to clase .hr to add a divider.


html

<hr/>

Label

Use .label to use a label element. Use the .label-warning to add a modifier.

Warning label Info label

html

<span class="label label-warning">Warning label</span>
<span class="label label-info">Info label</span>

Tag

To display a tag in your app, use .tag. For example:

Project milestones

To add a mirotone icon, use the .icon .icon-ICONNAME classes.

JIRA-1234

To add an image, just give the image the .tag-image class. Dont forget to add alt text.

Project tag JIRA-1234 Profile photo Author: Mettin

html

<span class="tag">
  Project tag
</span>
<span class="tag icon icon-link">
  JIRA-1234
</span>
<span class="tag">
  <img
    class="tag-image"
    src="/profile.png" alt="Profile photo" width="16" height="16"/>
  Author: Mettin
</span>

You can change a tags color and background by using the css variables --color and --background:

Tag Tag Tag

html

<span class="tag" style="--color: var(--blue100); --background: var(--indigo700)">
  Tag
</span>
<span class="tag" style="--color: var(--blue600)">
  Tag
</span>
<span class="tag" style="--background: var(--yellow700)">
  Tag
</span>

You are also able to make a tag clickable by using the <a> tag. On hover and focus the background and text color will invert, or you can overwrite the hover/focus styles. Be sure to have some visual clue that the tag is clickable, like addding a link icon.

html

<a class="tag" href="https://example.com">Link tag</a>

App Card

App cards are composed of a few components:

  • Card (app-card)
  • Title (app-card--title)
  • Description (app-card--description)
  • Icon (app-card--icon)

Card

Card is the basic container .app-card.

App card title

App card description

Tag Another tag Just one more JIRA-1234 A tag with icon

html

<div class="app-card">
  <h1 class="app-card--title">App card title</h1>
  <h1 class="app-card--description p-medium">App card description</h1>
  <div class="app-card--body">
    <div class="app-card--tags">
      <span class="tag">Tag</span>
      <span class="tag" style="--background: yellow">
        Another tag
      </span>
      <span class="tag" style="--color: green">
        Just one more
      </span>
      <span class="tag">JIRA-1234</span>
      <span class="tag icon icon-link">A tag with icon</span>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="app-card--app-logo">
      <circle r="12" cx="12" cy="12" fill="var(--indigo700)"></circle>
    </svg>
  </div>
</div>

To make sure everything is positioned correctly, put all tags and the .app-card--app-logo in a wrapped .app-card--body, within that you should have a container for the tags .app-card--tags.

Here's an empty app card with all containers you need.

html

<div class="app-card">
  <h1 class="app-card--title"></h1>
  <h1 class="app-card--description p-medium"></h1>
  <div class="app-card--body">
    <div class="app-card--tags">
      <span class="tag">Tag</span>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" class="app-card--app-logo"></svg>
  </div>
</div>

Add --accent-color: COLOR to change the theme.

html

<div class="app-card" style="--accent-color: #f4823e"></div>

App card title

Add .app-card--title to style and position your title.

App card title

html

<div class="app-card">
  <h1 class="app-card--title">App card title</h1>
</div>

App card description

Use .app-card--description to position the element. To have the proper styling you also need to add .p-medium.

App card title

The description of this app-card

html

<div class="app-card">
  <h1 class="app-card--title">App card title</h1>
  <p class="app-card--description p-medium">
    The description of this app-card
  </p>
</div>

App card app icon

Use the .app-card--icon class to represent your logo. Add it to the <svg/> directly. Looks best at 24px x 24px.

html

<div class="app-card">
  <div class="app-card--body">
    <div class="app-card--tags"></div>
    <svg class="app-card--app-logo"
        viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <circle r="12" cx="12" cy="12" fill="var(--indigo700)"/>
    </svg>
  </div>
</div>

Table

Use the .table classname to make your tables pretty. By default, the thead will be sticky. You can opt-out of this behaviour by adding .table__no-sticky-headers.

ItemStatusDate
Create table component Done ✅
Create React components for Mirotone To do
Create Vue components for Mirotone To do
Create Angular components for Mirotone To do
Create web-components for Mirotone To do

html

<table class="table">
	<thead>
		<tr>
			<th>Item</th><th>Status</th><th>Date</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<td>Create table component</td>
			<td>Done ✅</td>
			<td><time>May 12, 2022</time></td>
		</tr>
		<tr>
			<td>Create React components for Mirotone</td>
			<td>To do</td>
			<td><time>June 2, 2021</time></td>
		</tr>
		<tr>
			<td>Create Vue components for Mirotone</td>
			<td>To do</td>
			<td><time>July 30, 202</time></td>
		</tr>
		<tr>
			<td>Create Angular components for Mirotone</td>
			<td>To do</td>
			<td><time>February 30 2021</time></td>
		</tr>
		<tr>
			<td>Create web-components for Mirotone</td>
			<td>To do</td>
			<td><time>October 28, 2021</time></td>
		</tr>
	</tbody>
</table>

App templates

Explore different starting kits layouts, which you can use to make good composition for your Miro app. The layout is based on grid. You can explore src/grid-system.css to get more details. You can get the basic structure and start building your app in no time.

You can use Gallery grid to quickly setup a fast layout composition for images, videos or other visual like assets which can be dragged and dropped on the board. You can add different elements inside this composition to answer your design needs.

html

<div class="grid">
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
</div>

Icon template

You can use Icon grid to quickly setup a fast layout composition for icon like assets which can be dragged and dropped on the board. You can add different elements inside this composition to answer your design needs.

html

<div class="grid">
  <div class="cs1 ce3 placeholder"></div>
  <div class="cs4 ce6 placeholder"></div>
  <div class="cs7 ce9 placeholder"></div>
  <div class="cs10 ce12 placeholder"></div>
  <div class="cs1 ce3 placeholder"></div>
  <div class="cs4 ce6 placeholder"></div>
  <div class="cs7 ce9 placeholder"></div>
  <div class="cs10 ce12 placeholder"></div>
  <div class="cs1 ce3 placeholder"></div>
  <div class="cs4 ce6 placeholder"></div>
  <div class="cs7 ce9 placeholder"></div>
  <div class="cs10 ce12 placeholder"></div>
  <div class="cs1 ce3 placeholder"></div>
  <div class="cs4 ce6 placeholder"></div>
  <div class="cs7 ce9 placeholder"></div>
  <div class="cs10 ce12 placeholder"></div>
  <div class="cs1 ce3 placeholder"></div>
  <div class="cs4 ce6 placeholder"></div>
  <div class="cs7 ce9 placeholder"></div>
  <div class="cs10 ce12 placeholder"></div>
</div>

Mixed template

You can use Mixed grid to quickly setup a fast layout composition for images, videos or other visual like assets which can be dragged and dropped on the board. You can add different elements inside this composition to answer your design needs.

Tab one
Tab one
Tab one

html

<div class="grid">
  <div class="cs1 ce12">
    <input class="input input-small" type="search" placeholder="Enter something"/>
  </div>
  <div class="cs1 ce12">
      <div class="tabs">
        <div class="tabs-header-list">
          <div tabindex="0" class="tab tab-active">
              <div class="tab-text tab-badge">Tab one</div>
          </div>
          <div tabindex="0" class="tab ">
            <div class="tab-text tab-badge">Tab one</div>
          </div>
          <div tabindex="0" class="tab">
            <div class="tab-text tab-badge">Tab one</div>
          </div>
        </div>
    </div>
  </div>
  <div class="cs1 ce12">
    <button class="button-icon button-icon-small icon-eye" type="button"></button>
    <button class="button-icon button-icon-small icon-parameters" type="button"></button>
  </div>
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
  <div class="cs1 ce12 placeholder"></div>
</div>

Scrollable view with sticky buttons

If you have one or 2 primary actions that you always want visible, use this template.

Your long content here

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20

html

<div class="scrollable-example">
	<h1 class="h1">Your long content here</h1>
	<ul>
		<li>1</li>
		<li>2</li>
		<li>3</li>
		<li>4</li>
		<li>5</li>
		<li>6</li>
		<li>7</li>
		<li>8</li>
		<li>9</li>
		<li>10</li>
		<li>11</li>
		<li>12</li>
		<li>13</li>
		<li>14</li>
		<li>15</li>
		<li>16</li>
		<li>17</li>
		<li>18</li>
		<li>19</li>
		<li>20</li>
	</ul>
	<div class="buttons">
		<button type="button" class="button button-primary">
			Primary action
		</button>
</div>

css

.scrollable-example .buttons {
  position: sticky;
  bottom: 0;
  padding-block: var(--space-medium);
  background: #fff;
 }

Form template

Use this as a base for forms.

html

<div class="grid form-example">
  <form class="cs1 ce12 form-example--main-content">
    <div class="form-group">
      <label for="form-example-input-1">Input label</label>
      <input class="input" type="text" id="form-example-input-1" placeholder="Enter something"/>
    </div>
    <div class="form-group">
      <label for="form-example-input-3">Input label</label>
      <select class="select" id="form-example-input-3">
        <option value="1">Option one</option>
        <option value="2">Option two</option>
        <option value="3">Option three</option>
        <option value="4">Option four</option>
      </select>
    </div>
    <div class="form-group">
      <label class="checkbox">
        <input type="checkbox"/>
        <span>Select this option</span>
      </label>
    </div>
    
    <div class="form-group">
      <label class="radiobutton">
        <input type="radio" name="radio"/>
        <span>Option 1</span>
      </label>
      <label class="radiobutton">
        <input type="radio" name="radio"/>
        <span>Option 2</span>
      </label>
    </div>
  </form>
  <button type="button" class="cs1 ce12 button button-primary">
    Primary action
  </button>
</div>

css

.form-example {
  grid-auto-rows: 1fr auto
}
.form-example--main-content {
  align-self: flex-start
}

Message template

You can use this template to, for example, display an error message.

Welcome to App Name!

With App Name you can easily sync all of your things with your Miro boards

html

<div class="grid message-example">
  <div class="cs1 ce12 centered">
    <h1 class="h1">Welcome to App Name!</h1>
    <p class="p-medium">With App Name you can easily sync all of your things with your Miro boards</p>
    <div style="background: #f0f0f0; width: 240px; height: 110px"></div>
  </div>
  <button type="button" class="cs1 ce12 button button-primary">
    Primary action
  </button>
</div>

css

.message-example {
  grid-auto-rows: 1fr auto
}