Colors
Brand colors
$blue
#0050BB
$soft-blue
#249FFF
Correct usage
Acceptable use
Only these colors are acceptable in the logo. They can be used elsewhere to support the Espoo brand.
Avoid
Do not use any other colors for the logo.
Accessibility
Using $soft-blue may cause problems in usability. Avoid using it in texts or accompany it with a suitable icon.
Accent colors
$water
#9FC1D3
$petrol
#1F6390
$green
#C6DB00
$yellow
#FFCE00
$orange
#FF7300
$red
#DB0C41
Correct usage
Acceptable use
Use accent colors to draw attention, clarify, indicate certain action or state and create visual interest within your designs.
Avoid
Avoid using colors and tints similar to each other (e.g. green and orange) to avoid confusion. To create a harmonious look, consider carefully whenever adding colors to the design. Do not use colors for disabled elements. Avoid using colored text or accompany it with a suitable icon. Using dark shades of grey should always be considered the first option in texts.
Accessibility
When using $red and $green, it is important to have enough contrast between them. Note: $rock-blue, $green, $yellow and $orange fail in accessibility tests when used in text.
Adjusting value
shade($blue, 25%)
#013c8c
$blue
tint($blue, 20%)
#3273c9
tint($blue, 60%)
#99b9e4
Correct usage
Acceptable use
These tints are modified versions of the Espoo brand blue. Tints can be used in various components. It is highly recommended to use only these four values to keep the design consistent.
Avoid
Adding new tints should always be considered carefully. It is highly recommended to stick to these.
Accessibility
Note that lighter tints do not pass the accessibility criteria when used in text. They should be avoided or accompanied with relevant icon.
Greyscale
$grey-darker
#0F0F0F
$grey-dark
#6E6E6E
$grey
#9E9E9E
$grey-light
#C4C4C4
$grey-lighter
#D8D8D8
$white
#FFFFFF
Correct usage
Acceptable use
Using different shades of grey should always be considered the first option in text and lines. Always use gray shades for disabled elements.
Avoid
Do not use black of value #000000. Instead, use a softer black (#0F0F0F) for it is easier on eyes.
Accessibility
$0F0F0F and $6E6E6E pass the accessibility test, other shades of grey fail. Lighter greys should only be used in larger headers or with appropriate icon. Grey text should be used on white background to have enough contrast.
Typography
Headings
Title 1
Title 2
Title 3
Show example code
<h1 class="title is-1">Title 1</h1>
<h2 class="title is-2">Title 2</h2>
<h3 class="title is-3">Title 3</h3>
Correct usage
Acceptable use
Use headings in the correct hierarchical manner (<h1> followed by <h2>, and so on) as this improves readability and scannability for all users.
Avoid
Avoid using more than one H1 (Title 1) per page. Do not use text formatting, such as font size or bold, to give the visual appearance of a heading when it is not a heading.
Accessibility
Screen readers can navigate to any heading on the page. All headings should be descriptive and unique. A clear hierarchy in using headings helps people with disabilities in navigating on the page. Use headings (even visually hidden ones) to help screen readers navigate a complex page or DOM structure.
Style definitions
Heading H1:
Montserrat, Extralight, 48 pt, #6E6E6E
Heading H2:
Montserrat, Light, 36 pt, #6E6E6E
Heading H3:
Montserrat, Regular, 22 pt, #6E6E6E
Additional heading styles
Heading bold
Show example code
<h1 class="title is-strong is-4">Heading bold</h1>
Correct usage
Acceptable use
Use additional headings when other headings are already used or to help the user to scan the content. Use headings consistently e.g. in modals to create a clearer structure for information represented.
Avoid
Avoid hyphens in headings if you can. In resized windows or mobile devices, they can result in awkward line breaks.
Style definitions
Montserrat, Semibold, 20 pt, #6E6E6E
Introductory paragraph
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non est ut justo scelerisque tincidunt vel eget odio. Maecenas consequat interdum elit, sed commodo orci efficitur at. Vestibulum ultrices magna vitae dapibus tristique.
Show example code
<p class="introductory">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non est ut justo scelerisque tincidunt vel eget odio. Maecenas
consequat interdum elit, sed commodo orci efficitur at. Vestibulum ultrices magna vitae dapibus tristique.
</p>
Correct usage
Acceptable use
This style can be used for a brief summary of the topic. The necessary background information can typically be provided in 3–5 sentences.
Avoid
Do not use introductory paragraph style to replace paragraph style (body) with bigger font size.
Style definitions
Open Sans, Regular, 19 pt, #0F0F0F
Body paragraph
Donec convallis urna eget lacinia dictum. Cras at felis lectus. Nullam mollis pharetra nisi, vehicula congue tortor posuere ac. Vivamus dolor lectus, viverra nec elit quis, pretium tincidunt mauris. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nam vel turpis mollis, porta lorem pharetra, consequat magna. Nullam ultrices justo quis magna venenatis vehicula.
Show example code
<p>
Donec convallis urna eget lacinia dictum. Cras at felis lectus. Nullam mollis pharetra nisi, vehicula congue tortor posuere
ac. Vivamus dolor lectus, viverra nec elit quis, pretium tincidunt mauris. Orci varius natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Nam vel turpis mollis, porta lorem pharetra, consequat magna. Nullam ultrices justo quis
magna venenatis vehicula.
</p>
Correct usage
Acceptable use
The default body text is Open Sans, Regular 15 px, aligned left. Use only #0F0F0F for paragraphs to ensure readability.
Avoid
Do not use font size smaller than the standard paragraph size for text (other than captions and labels). Do not use justification for the text will run unevenly.
Accessibility
When possible, place the distinguishing information of a paragraph in the first sentence to help improve the scannability of content for all users.
Style definitions
Open Sans, Regular, 15 pt, #0F0F0F
Align left
Links
Style definitions
Open Sans, Regular 15 pt
Default: #4175C8
Hover: #0050BB
Active: #003891
Visited: #1f6390
Button
Default
Show example code
<button class="button">Button</button>
<button class="button is-hovered">Hovered</button>
<button class="button is-active">Active</button>
<button class="button" disabled>Disabled</button>
Correct usage
See primary button.
Style definitions
Border: 1 px, position inside
Primary
Show example code
<button class="button is-primary">Button</button>
<button class="button is-primary is-hovered">Hovered</button>
<button class="button is-primary is-active">Active</button>
<button class="button is-primary" disabled>Disabled</button>
Correct usage
Acceptable use
Buttons trigger an operation. Create a button to retain the native click function. Also use white space around the buttons to make them easily noticeable. All buttons should be located in places where users can easily find them or expect to see them. Basic buttons are 45 px high with a font size of 14 px, uppercase. Button sizes and behavior remain consistent across all platforms and screen sizes.
Use back button in complex forms. It is highly recommended to state what actions the buttons do when clicked like “Send message” instead of using generic words such as "submit" for actions on buttons. Use a disabled attribute when a button cannot be clicked.
Lack of visual distinction between primary and secondary actions can easily lead to errors. Reducing the visual prominence of secondary actions minimizes the risk for potential errors and further directs people toward a successful outcome.
Place the affirmative button on the right, the dismissive button on the left. Button placement in non-standard dialogs and modal windows depends on the complexity of the content they contain. For dialogs with relatively simple content, it is recommended to place buttons on the right side of a dialog, with the affirmative button to the right of the dismissive button.
Avoid
Avoid using too many buttons and choose the most important actions that you want the user to take.
Accessibility
To ensure usability for people with disabilities, give basic buttons a height of 45 px.
Style definitions
Open Sans, Semibold, 14 px, uppercase.
Character spacing 0,2 px
Line spacing 16 px.
Button height: 45 px
Minimum width: 100 dp
Touchable target height: 49 dp
Corner radius: 2 dp
Horizontal margin: 8 dp
Horizontal padding: 8 dp
Plain
Show example code
<button class="button is-plain">Button</button>
<button class="button is-plain is-hovered">Hovered</button>
<button class="button is-plain is-active">Active</button>
<button class="button is-plain" disabled>Disabled</button>
Correct usage
Acceptable use
Flat buttons are text-only buttons with no borderline. They may be used in dialogs, toolbars, or inline. They do not lift but fill with color on press.
Round icons
Show example code
<button class="button is-primary is-round-icon is-small">
<span class="icon">
<i class="fas fa-info"></i>
</span>
</button>
<button class="button is-primary is-round-icon">
<span class="icon">
<i class="fas fa-info"></i>
</span>
</button>
<button class="button is-primary is-round-icon is-medium">
<span class="icon">
<i class="fas fa-info"></i>
</span>
</button>
</button>
<button class="button is-primary is-round-icon is-large">
<span class="icon">
<i class="fas fa-info"></i>
</span>
</button>
<button class="button is-green is-round-icon is-large">
<span class="icon">
<i class="fal fa-check"></i>
</span>
</button>Form
Without labels
This username is available
This username is unavailable
Show example code
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Hint text" value="" />
</div>
</div>
<div class="field">
<div class="control has-icons-right">
<input class="input is-success" type="text" placeholder="Hint text" value="Success input" />
<span class="icon is-right">
<i class="fas fa-check-circle"></i>
</span>
</div>
<p class="help">This username is available</p>
</div>
<div class="field">
<div class="control has-icons-right">
<input class="input is-warning" type="text" placeholder="Hint text" value="Warning input" />
<span class="icon is-right">
<i class="fas fa-exclamation-triangle"></i>
</span>
</div>
<p class="help">This username is unavailable</p>
</div>
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Hint text" value="Disabled input" disabled />
</div>
</div>
Correct usage
Acceptable use
An input field can vary in length. It is recommended to use the field size to match the intended length in the answer. An input field shows which field the user is currently interacting with by increased line thickness and colored line. Input icons can be used in the input fields. Note that input fields do not receive pointer-events unless a link icon is used.
When providing error tips or help, be short and informative. For example, if date is in an incorrect format, provide users with details on how to format it properly ("The date should be in the dd-mm-yyyy -format").
If using placeholders, they should never be used to show requirements to the field but only show hints on the content expected to be entered. Fields that require specific formats (e.g. phone number) should have constraints and be split into multiple fields or auto format as values are entered. The entered text needs to be darker than the placeholder text, so they won’t get mixed up. Keep placeholder text until a user begins to type, not when they click the field. When having a clear starting point the cursor should go automatically to the beginning of the field.
When disabled, the label is grey to indicate the user isn’t able to modify the field.
Validation feedback
Input fields that have not passed validation are updated with an invalid class. A validation object includes a list of form elements and rules to validate each field against. There are several different types of validation you can perform: correct format, required fields and confirmation fields.
The invalid-error message is placed right under the input field. Also the success / failure indicator should be used below the row. It has to describe the purpose of the field such as “Confirm your password”. Users should be informed and correct format should be suggested, if the information is not in the correct format.
Validation of each input field will be shown when the user leaves the field (when a field loses focus), not before that. The user will be able to move on to fill other parts of form on the same page even when having an error in validation. However, the form cannot get submitted unless the input fields have been validated.
Avoid
Do not show possible error message until the user has left the input field.
Accessibility
For users who are colorblind, or cannot see differences in color, include design elements in addition to color that ensure they receive the same amount of information. Use multiple visual cues (the color change in error message, text field stroke and an icon with icon color) to communicate important states.
All form fields and elements must have an associated <label> for accessibility. If you must hide the text of the label, use the class. Never use sr-only display:none as that will hide it from screen readers as well.
Associate each message with the form field by using the attribute aria-describedby=[id]. This will cause the screen reader to read the contents of the message when focusing on the form field. This means that as the state changes, so should the id that the aria-describedby references.
When using the invalid state, use the attribute aria-invalid="true" so screen readers know the form field is invalid.
Style definitions
Text:
Placeholder (hint) text: Open Sans, italic 15 px, #6E6E6E. Indent: 0 px.
Input text: Open Sans, regular 15 px, #0F0F0F. Indent: 0 px.
Read-only-text and disabled: Open Sans, regular 15 px, #6E6E6E. Indent: 0 px.
Others:
Leading icon (optional): Font Awesome 15 px, solid, #9E9E9E.
Assistive text: Open Sans, regular, 12 px, #6E6E6E.
Character counter: Open Sans, regulat, 12 px, aligned right, #6E6E6E.
Space between elements:
Label (above) and text: 8 px
Label (above) and line: 36 px
Text and line: 7 px
Line and assistive text: 5 px
Label (on the left, aligned right) and text (on the right): 30 px When the label is positioned on the left side, it can be also aligned left. Then the space needs to be concidered case by case.
Activation indicator and signifier icons:
Default: Line: 1 px, #9E9E9E
Hover: Line 1 px, #6E6E6E
Focused: Line: 2 px, #00A0E2 Success: Line: 2 px, #C6D800. Signifier icon: ”check-circle”: Font Awesome, solid, 15 px.
Error/warning: Line: 2 px, #FF7300. Error message icon: ”exclamation-triangle”, Font Awesome, solid, 15 px.
Disabled: / Read-only: 1 px (dash 1/3), #6E6E6E
With labels
This username is available
Show example code
<div class="field">
<label class="label">Label</label>
<div class="control">
<input class="input" type="text" placeholder="Hint text" />
</div>
</div>
<div class="field">
<label class="label">Username</label>
<div class="control has-icons-right">
<input class="input is-success" type="text" placeholder="Hint text" value="Success input" />
<span class="icon is-right">
<i class="fas fa-check-circle"></i>
</span>
</div>
<p class="help">This username is available</p>
</div>With horizontal labels
This username is available
Show example code
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Label</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" type="text" placeholder="Hint text" value="" />
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Username</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icons-right">
<input class="input is-success" type="text" placeholder="Hint text" value="Success input" />
<span class="icon is-right">
<i class="fas fa-check-circle"></i>
</span>
</div>
<p class="help">This username is available</p>
</div>
</div>
</div>With icons
Should contain only numbers, e.g. 0501234567
Show example code
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Email</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icons-left">
<input class="input" type="text" placeholder="Hint text" value="" />
<span class="icon is-left">
<i class="fas fa-envelope"></i>
</span>
</div>
</div>
</div>
</div>
<div class="field is-horizontal">
<div class="field-label">
<label class="label">Phone</label>
</div>
<div class="field-body">
<div class="field">
<div class="control has-icons-left has-icons-right">
<input class="input is-warning" type="text" placeholder="Hint text" value="Warning input" />
<span class="icon is-left">
<i class="fas fa-phone"></i>
</span>
<span class="icon is-right">
<i class="fas fa-exclamation-triangle"></i>
</span>
</div>
<p class="help">Should contain only numbers, e.g. 0501234567</p>
</div>
</div>
</div>Radio button
Show example code
<div class="radio">
<input class="input" type="radio" id="r1" name="radio_example" checked />
<label class="label" for="r1">
<div class="tick">
<i class="fal fa-check" aria-hidden></i>
</div>
Radio Button
</label>
</div>
<div class="radio">
<input class="input" type="radio" id="r2" name="radio_example" />
<label class="label" for="r2">
<div class="tick">
<i class="fal fa-check" aria-hidden></i>
</div>
Radio Button2
</label>
</div>
<div class="radio">
<input class="input" type="radio" id="r3" name="radio_example" disabled />
<label class="label" for="r3">
<div class="tick">
<i class="fal fa-check" aria-hidden></i>
</div>
Disabled Radio Button
</label>
</div>
Correct usage
Acceptable use
Radio buttons are used when the user must select only one option out of two or more options. It is recommended to have no more than five options on the list. One radio button must always be active. Default should be the one the users are most likely to choose or the button that is recommended. To enlarge the target area, let users select an option by clicking on either the radio button itself or its label.
Avoid
Avoid using radio buttons when there are more than five options. Those options would be better displayed as a select menu.
Accessibility
Each radio button must have an associated <label> for accessibility. If you must hide the text of the label, add the text as an aria-label attribute. Never use display:none as that will hide it from screen readers as well. Wrap the radio buttons in a <fieldset> element with a short and descriptive <legend>. Screen readers will prefix the text to each control label contained within the fieldset
Style definitions
Label: Open Sans, Regular, 15 pt
Label default text color: #0F0F0F
Label disabled text color: #9E9E9E
Circle diameter: 35 px
Circle default: border 1px #6E6E6E
Circle hover: border 1px #0F0F0F
Circle checked: background blue #3273C9
Circle disabled: border 1 px #9E9E9E
Check: Font Awesome Pro Light 25 px #FFFFFF
Space between radio button and label 24 px
Checkbox
Show example code
<div class="checkbox">
<input class="input" type="checkbox" id="c1" name="checkbox_example1" checked />
<label class="label" for="c1">
<div class="tick">
<i class="fal fa-check" aria-hidden></i>
</div>
Checkbox
</label>
</div>
<div class="checkbox">
<input class="input" type="checkbox" id="c2" name="checkbox_example2" />
<label class="label" for="c2">
<div class="tick">
<i class="fal fa-check" aria-hidden></i>
</div>
Checkbox 2
</label>
</div>
<div class="checkbox">
<input class="input" type="checkbox" id="c3" name="checkbox_example3" disabled />
<label class="label" for="c3">
<div class="tick">
<i class="fal fa-check" aria-hidden></i>
</div>
Disabled Checkbox
</label>
</div>
Correct usage
Acceptable use
Checkboxes are used when there is a list of options and the user may select any number of choices, including zero, one or several. It is recommended to place options vertically to make the list more scannable.
Avoid
Avoid negations such as "Don’t send me notifications", which would mean that the user would have to check the box in order for something not to happen.
Accessibility
Wrap the checkboxes in a <fieldset> element with a short and descriptive <legend>. Screen readers will prefix the text to each control label contained within the fieldset. Each checkbox must have an associated <label> for accessibility. If you must hide the text of the label, add the text as an aria-label attribute. Never use display:none as that will hide it from screen readers as well. To enlarge the target area, let users select an option by clicking on either the checkbox itself or its label.
Style definitions
Label: Open Sans, Regular, 15 pt
Label default text color: #0F0F0F
Label disabled text color: #9E9E9E
Square width and hight: 30 px
Square default: border 1px #6E6E6E
Square hover: border 1px #0F0F0F
Square checked: background blue #3273C9
Square disabled: border 1 px #9E9E9E
Check: Font Awesome Pro Light 25 px #FFFFFF
Space between radio button and label 24 px
Toggle
Show example code
<div class="toggle">
<input class="input" type="checkbox" id="toggle" name="checkbox_toggle" aria-label="toggle example" />
<label class="label" for="toggle"></label>
</div>
<div class="toggle">
<input class="input" type="checkbox" id="toggle2" name="checkbox_toggle" aria-label="toggle" disabled />
<label class="label" for="toggle2"></label>
</div>
Correct usage
Acceptable use
Use this pattern to switch between two states as an on/off -control. If a physical switch would work for the action, a toggle switch is probably the best control to use. User can make a switch either by clicking the circle in the toggle or by clicking the other end of the toggle. The change takes place immediately, not after pressing save or submit.
Accessibility
Avoid creating a toggle switch that requires the texts "on" and "off" within the graphic itself.
Accessibility
A toggle switch requires a corresponding inline label.
Style definitions
Activated: #3273C9 and white
Deactivated: #6E6E6E and white
Disabled: #9E9E9E and white
Stepper
Default
Show example code
<div class="stepper">
<div class="step">
<div class="step-bar">
<div class="step-circle">1</div>
</div>
</div>
<div class="step">
<div class="step-bar">
<div class="step-circle">2</div>
</div>
</div>
<div class="step active">
<div class="step-bar">
<div class="step-circle">3</div>
</div>
</div>
<div class="step">
<div class="step-bar">
<div class="step-circle">4</div>
</div>
</div>
</div>With labels
Title
Lorem ipsum sit amet lorem.
Title
Lorem ipsum sit amet lorem.
Title
Lorem ipsum sit amet lorem.
Title
Lorem ipsum sit amet lorem.
Show example code
<div class="stepper">
<div class="step">
<div class="step-bar">
<div class="step-circle">1</div>
</div>
<div class="step-title">Title</div>
<div class="step-label">Lorem ipsum sit amet lorem.</div>
</div>
<div class="step">
<div class="step-bar">
<div class="step-circle">2</div>
</div>
<div class="step-title">Title</div>
<div class="step-label">Lorem ipsum sit amet lorem.</div>
</div>
<div class="step active">
<div class="step-bar">
<div class="step-circle">3</div>
</div>
<div class="step-title">Title</div>
<div class="step-label">Lorem ipsum sit amet lorem.</div>
</div>
<div class="step">
<div class="step-bar">
<div class="step-circle">4</div>
</div>
<div class="step-title">Title</div>
<div class="step-label">Lorem ipsum sit amet lorem.</div>
</div>
</div>Large with images
Title
Lorem ipsum sit amet lorem.
Title
Lorem ipsum sit amet lorem.
Title
Lorem ipsum sit amet lorem.
Title
Lorem ipsum sit amet lorem.
Show example code
<div class="stepper is-large">
<div class="step">
<div class="step-image">
<div class="img-placeholder"></div>
</div>
<div class="step-bar">
<div class="step-circle">1</div>
</div>
<div class="step-title">Title</div>
<div class="step-label">Lorem ipsum sit amet lorem.</div>
</div>
<div class="step">
<div class="step-image">
<div class="img-placeholder"></div>
</div>
<div class="step-bar">
<div class="step-circle">2</div>
</div>
<div class="step-title">Title</div>
<div class="step-label">Lorem ipsum sit amet lorem.</div>
</div>
<div class="step active">
<div class="step-image">
<div class="img-placeholder"></div>
</div>
<div class="step-bar">
<div class="step-circle">3</div>
</div>
<div class="step-title">Title</div>
<div class="step-label">Lorem ipsum sit amet lorem.</div>
</div>
<div class="step">
<div class="step-image">
<div class="img-placeholder"></div>
</div>
<div class="step-bar">
<div class="step-circle">4</div>
</div>
<div class="step-title">Title</div>
<div class="step-label">Lorem ipsum sit amet lorem.</div>
</div>
</div>X-large with icons
Title
Lorem ipsum sit amet lorem.
Title
Lorem ipsum sit amet lorem.
Title
Lorem ipsum sit amet lorem.
Title
Lorem ipsum sit amet lorem.
Title
Lorem ipsum sit amet lorem.
Show example code
<div class="stepper is-x-large">
<div class="step completed">
<div class="step-bar">
<div class="step-circle">
<i class="fal fa-pen"></i>
</div>
</div>
<div class="step-title">Title</div>
<div class="step-label">Lorem ipsum sit amet lorem.</div>
</div>
<div class="step pending">
<div class="step-bar">
<div class="step-circle">
<i class="fal fa-gavel"></i>
</div>
</div>
<div class="step-title">Title</div>
<div class="step-label">Lorem ipsum sit amet lorem.</div>
</div>
<div class="step active">
<div class="step-bar">
<div class="step-circle">
<i class="fal fa-edit"></i>
</div>
</div>
<div class="step-title">Title</div>
<div class="step-label">Lorem ipsum sit amet lorem.</div>
</div>
<div class="step not-started">
<div class="step-bar">
<div class="step-circle">
<i class="fal fa-euro-sign"></i>
</div>
</div>
<div class="step-title">Title</div>
<div class="step-label">Lorem ipsum sit amet lorem.</div>
</div>
<div class="step disabled">
<div class="step-bar">
<div class="step-circle">
<i class="fal fa-dollar-sign"></i>
</div>
</div>
<div class="step-title">Title</div>
<div class="step-label">Lorem ipsum sit amet lorem.</div>
</div>
</div>Pagination
Show example code
<nav class="pagination" role="navigation" aria-label="pagination">
<a class="pagination-previous" aria-label="Goto previous page">‹</a>
<a class="pagination-next" aria-label="Goto next page">›</a>
<ul class="pagination-list">
<li>
<a class="pagination-link" aria-label="Goto page 1">1</a>
</li>
<li>
<span class="pagination-ellipsis">…</span>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 45">45</a>
</li>
<li>
<a class="pagination-link is-current" aria-label="Page 46" aria-current="page">46</a>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 47">47</a>
</li>
<li>
<span class="pagination-ellipsis">…</span>
</li>
<li>
<a class="pagination-link" aria-label="Goto page 86">86</a>
</li>
</ul>
</nav>Header
Show example code
<header class="header">
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="container">
<div class="logo-wrapper">
<a href="/">
<img class="logo" src="/assets/EspooLogo.png" alt="Espoo">
</a>
</div>
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item is-tab is-active">
Home
</a>
<a class="navbar-item is-tab">
About
</a>
</div>
<div class="navbar-end">
<div class="navbar-item">
<a class="button is-text is-narrow">
<span class="icon">
<i class="fal fa-user"></i>
</span>
</a>
<a class="button is-text is-narrow">
<span class="icon">
<i class="fas fa-ellipsis-v"></i>
</span>
</a>
</div>
</div>
</div>
</div>
</nav>
</header>Table
|
|
Jane Doe | 1.10.2018 | 30.9.2019 | Lorem ipsum dolor sit amet consectetur adipisci elit | Link |
Approved
12.8.2018
|
||
|
|
John Doe | 1.12.2017 | 1.1.2018 | Sed eiusmod tempor incidunt ut labore et dolore magna aliqua | Link |
Approved
1.8.2017
|
||
|
|
Jack Doe | 1.1.2019 | 31.12.2019 | Ut enim ad minim veniam | Link |
On hold
1.8.2018
|
||
|
|
Cookie Dough | 1.12.2018 | 1.1.2019 | Excepteur sint obcaecat cupiditat non proident sunt in culpa qui officia deserunt | Link |
Urgent
1.8.2018
|
||
Show example code
<table class="table is-fullwidth is-hoverable">
<thead>
<tr>
<th class="status"></th>
<th></th>
<th>
<button class="button is-plain is-dark has-sorting">
Name
<span class="icon">
<i class="fas fa-caret-down fa-2x"></i>
</span>
</button>
</th>
<th>
<button class="button is-plain is-dark has-sorting">
Submitted
<span class="icon">
<i class="fas fa-caret-down fa-2x"></i>
</span>
</button>
</th>
<th>
<button class="button is-plain is-dark has-sorting">
Due
<span class="icon">
<i class="fas fa-caret-down fa-2x"></i>
</span>
</button>
</th>
<th>
<button class="button is-plain is-dark has-sorting">
Description
<span class="icon">
<i class="fas fa-caret-down fa-2x"></i>
</span>
</button>
</th>
<th>
<button class="button is-plain is-dark has-sorting">
Link
<span class="icon">
<i class="fas fa-caret-down fa-2x"></i>
</span>
</button>
</th>
<th colspan="2">
<button class="button is-plain is-dark has-sorting">
State
<span class="icon">
<i class="fas fa-caret-down fa-2x"></i>
</span>
</button>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="status is-blue"></td>
<td>
<div class="checkbox">
<input
class="input"
type="checkbox"
id="tc1"
name="table_checkbox_example1"
checked
/>
<label class="label" for="tc1">
<div class="tick">
<i class="fal fa-check" aria-hidden></i>
</div>
</label>
</div>
</td>
<td class="has-no-wrap-text">Jane Doe</td>
<td>1.10.2018</td>
<td class="has-text-warning has-text-weight-semibold">30.9.2019</td>
<td>Lorem ipsum dolor sit amet consectetur adipisci elit</td>
<td>
<a href="#" class="is-link is-uppercase has-text-weight-semibold"
>Link</a
>
</td>
<td>
<div class="is-uppercase has-text-weight-semibold">Approved</div>
12.8.2018
</td>
<td class="has-text-right">
<button class="button is-plain is-dark is-narrow">
<i class="fal fa-ellipsis-v fa-2x"></i>
</button>
</td>
</tr>
<tr>
<td class="status is-blue"></td>
<td>
<div class="checkbox">
<input
class="input"
type="checkbox"
id="tc2"
name="table_checkbox_example2"
checked
/>
<label class="label" for="tc2">
<div class="tick">
<i class="fal fa-check" aria-hidden></i>
</div>
</label>
</div>
</td>
<td class="has-no-wrap-text">John Doe</td>
<td>1.12.2017</td>
<td class="has-text-warning has-text-weight-semibold">1.1.2018</td>
<td>Sed eiusmod tempor incidunt ut labore et dolore magna aliqua</td>
<td>
<a href="#" class="is-link is-uppercase has-text-weight-semibold"
>Link</a
>
</td>
<td>
<div class="is-uppercase has-text-weight-semibold">Approved</div>
1.8.2017
</td>
<td class="has-text-right">
<button class="button is-plain is-dark is-narrow">
<i class="fal fa-ellipsis-v fa-2x"></i>
</button>
</td>
</tr>
<tr>
<td class="status is-rock-blue"></td>
<td>
<div class="checkbox">
<input
class="input"
type="checkbox"
id="tc3"
name="checkbox_example3"
checked
/>
<label class="label" for="tc3">
<div class="tick">
<i class="fal fa-check" aria-hidden></i>
</div>
</label>
</div>
</td>
<td class="has-no-wrap-text">Jack Doe</td>
<td>1.1.2019</td>
<td class="has-text-warning has-text-weight-semibold">31.12.2019</td>
<td>Ut enim ad minim veniam</td>
<td>
<a href="#" class="is-link is-uppercase has-text-weight-semibold"
>Link</a
>
</td>
<td>
<div class="is-uppercase has-text-weight-semibold">On hold</div>
1.8.2018
</td>
<td class="has-text-right">
<button class="button is-plain is-dark is-narrow">
<i class="fal fa-ellipsis-v fa-2x"></i>
</button>
</td>
</tr>
<tr>
<td class="status is-orange"></td>
<td>
<div class="checkbox">
<input
class="input"
type="checkbox"
id="tc4"
name="checkbox_example4"
checked
/>
<label class="label" for="tc4">
<div class="tick">
<i class="fal fa-check" aria-hidden></i>
</div>
</label>
</div>
</td>
<td class="has-no-wrap-text">Cookie Dough</td>
<td>1.12.2018</td>
<td class="has-text-warning has-text-weight-semibold">1.1.2019</td>
<td>
Excepteur sint obcaecat cupiditat non proident sunt in culpa qui officia
deserunt
</td>
<td>
<a href="#" class="is-link is-uppercase has-text-weight-semibold"
>Link</a
>
</td>
<td>
<div class="is-uppercase has-text-weight-semibold">Urgent</div>
1.8.2018
</td>
<td class="has-text-right">
<button class="button is-plain is-dark is-narrow">
<i class="fal fa-ellipsis-v fa-2x"></i>
</button>
</td>
</tr>
</tbody>
</table>
Style definitions
Minimum height 80 px, #FFFFFF
Line below: 1 px, #C4C4C4
Hover: Shadow: #9E9E9E, opacity 18%, Y:2, Blur 4 px, Spread 4 px.
Text:
Open Sans Regular 15 pt, line spacing 19, #0F0F0F. Padding 20 px.
Names: Open Sans Semibold 15 px, #0F0F0F
When urgent: Open Sans Semibold 15 pt, #FF7300
When a link: #3273C9
Text can be 1–3 rows. 1-2 is recommended. In cases when more than 3 rows is needed, the rest of the text can be seen in hover.
State:
Text: Open Sans Regular 15 px, #0F0F0F, uppercase (e.g. Waiting for information).
When a link or opens a modal: #3273C9, either lower or upper case can be used depending on the case.
Color code line: Width: 5 px, Height 80 px, accent colors.
Checkbox: Height 25 px, Width 25 px, #4175C8.
Padding 25px. Can be used either on the right or on the left side.
Three dots menu: Can be used on the right:
Font Awesome Pro Light 30 pt, #6E6E6E. Padding: 20 px above and 30 px on the right.
Active row
| Column 2 | Column 3 | Column 4 | ||
|---|---|---|---|---|
| Column 1 | Column 2 | Column 3 | Column 4 | |
| Column 1 | Column 2 | Column 3 | Column 4 | |
| Column 1 | Column 2 | Column 3 | Column 4 | |
| Column 1 | Column 2 | Column 3 | Column 4 |
Show example code
<table class="table is-fullwidth has-fixed-layout">
<thead>
<tr>
<th class="status"></th>
<th>
<button class="button is-plain is-dark has-sorting">
Column 1
<span class="icon">
<i class="fas fa-caret-down fa-2x"></i>
</span>
</button>
</th>
<th>
Column 2
</th>
<th>
Column 3
</th>
<th>
Column 4
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="status is-blue"></td>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr class="is-selected">
<td class="status is-blue"></td>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td class="status is-rock-blue"></td>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
<tr>
<td class="status is-orange"></td>
<td>Column 1</td>
<td>Column 2</td>
<td>Column 3</td>
<td>Column 4</td>
</tr>
</tbody>
</table>