You must attend a meeting of the User Experience Community of Practice to make your case for the
change. This creates a democratic and transparent process for input and decision-making.
The pattern and component library team makes the final decision about requested changes.
Accessibility
Everyone should be able to easily interact with the county online. This includes people with
visual, hearing, motor, and
cognitive disabilities. These disabilities could be permanent, temporary or situational.
Semantic structure is the bedrock of accessible markup. Screen readers rely HTML elements and attributes
to convey
information to blind users. Semantic markup allows assistive technologies to convey information through
the
accessibility API.
Interactive components
Design these for touch, mouse, and keyboard users. Use relevant WAI-ARIA to make interactive components
understandable and useable by assistive technologies.
You may need to use extra ARIA attributes and JavaScript depending on the component function.
Any element that receives focus should have a visual focus indicator. The focus indicator must be a
solid outline. The default color is inherited from the font color. If that does not meet acceptable contrast ratios, use black. If black does not meet
contrast ratios, use another brand color that does. The width should be
about 4px, but the width can be adjusted to accommodate large or small components. Set the default
outline-offset to zero for padded elements like buttons and inputs. Adjust the offset to allow space
around other elements that need it like inline text and image links. For example, tab through the
interactive controls below:
Sometimes important visual cues are provided to sighted users, like red text. These cues are picked up by
assistive technology only by using visually hidden content. For example:
Danger:
This action is not reversible!
For visually hidden controls like "skip" links make sure the control becomes
visible once focused (for sighted keyboard users).
Reduced motion
You must include support for the prefers-reduced-motion media feature. CSS
transitions should be disabled. Meaningful animations such as spinners should be slowed down.
Alerts are used to convey special messages distinct from regular content.
A simple primary alert—check it out!
A simple secondary alert—check it out!
A simple success alert—check it out!
A simple danger alert—check it out!
A simple warning alert—check it out!
A simple info alert—check it out!
A simple light alert—check it out!
A simple dark alert—check it out!
Alert accessibility considerations
Use of color: Using color to add meaning provides only a visual cue. Assistive
technologies will not pick up this visual cue. To make the color meaningful to assistive
technologies, either use visual or visually hidden text. See the section on visually hidden content.
Accessible Role: The role="alert" is used for important and usually
time-sensitive messages.
For example:
An invalid value was entered into a form field
The user's login session is about to expire
The connection to the server was lost, local changes will not be saved
Use the alert role sparingly because of its intrusive nature. Less urgent dynamic changes can use
methods like aria-live="polite" or other live region roles.
Use of dismissible "close" button: Close buttons are optional on the alert
component. If you choose to use one, it must have ample clickable spacing around it (at least 40px
by 40px). The close button must be a button element, or make use of the button role
(role="button"). The close button should include the visible word "Close." If that is
not possible, it must be present through other
means, like visually hidden text.
Branding
Refer to the Hennepin
County brand guide for more information regarding logos, colors, typography, and more.
Logos
Hennepin County's logo and wordmark communicate who we are immediately. Using each correctly
is a key part of maintaining a professional and coherent brand.
Hennepin County "H"
Hennepin County's primary logo is the trusted Hennepin "H." This bold and highly recognizable
symbol acts as a seal of
approval on all Hennepin County branded materials. It must be used in all publications and
promotional materials for
county programs and services.
Hennepin County wordmark
The Hennepin County wordmark is a clear and uniform visual expression of the county name. It
is designed to augment the
Hennepin "H" in specific circumstances, but should never be used in place of it.
Colors
Our color system reflects the diversity and vibrancy of Hennepin County. We're not a
one-dimensional region and our organization is not a single shade of blue.
Core colors
Our rich core colors set the tone of any design and are used in contrast with ample proportions of
white and/or white space. We use the core colors to create anchor design elements such as color
floods and shapes or as dense color masks for images.
Hennepin Blue
#0058a4
rgb(0, 88, 164)
White
#ffffff
rgb(255, 255, 255)
Rich Purple
#3e1151
rgb(62, 17, 81)
Deep Blue
#113c66
rgb(17, 60, 102)
Accent colors
Use accent sets to add small pops of color. We recommend using one accent color set in a single
design to avoid a rainbow effect.
Blue 1
#00aeef
rgb(0, 174, 239)
Blue 2
#44c8f5
rgb(68, 200, 245)
Green 1
#9fcc3b
rgb(159, 204, 59)
Green 2
#cbdb2a
rgb(203, 219, 42)
Gold 1
#f7941e
rgb(247, 148, 30)
Gold 2
#ffcb05
rgb(255, 203, 5)
Red 1
#ce1432
rgb(206, 20, 50)
Red 2
#ef413d
rgb(239, 65, 61)
Neutral colors
Three neutral colors help warm and soften design elements.
Neutral Dark
#928884
rgb(146, 136, 132)
Neutral Medium
#a49e99
rgb(164, 158, 153)
Neutral Light
#ded3ce
rgb(222, 211, 206)
Breadcrumbs
Use breadcrumbs to show the current page's location within a navigational hierarchy.
Breadcrumb accessibility considerations
Since breadcrumbs provide a navigation, it's a good idea to add a meaningful label such as
aria-label="breadcrumb" to describe the type of navigation provided in the
<nav> element, as well as applying an aria-current="page" to the
last item of the set to indicate that it represents the current page.
Use buttons to let a user take an action. An example is when asking a user to create a new
profile, or to register.
Buttons have a primary and secondary action. A primary action is the
primary option or task for the user. The secondary action is available, but used less often.
Language used for button labels should reflect what action the user will take. We recommend using verbs
or adverbs and
limiting words to two or three. If you need more content to describe the button action, consider using a
tooltip for
clarity.
Hennepin County branded buttons uses the following colors:
Primary
Default
background-color: #113c66
color: #ffffff
:hover
background-color: #44c8f5
color: #000000
Secondary
Default
background-color: #ffffff
color: #113c66
:hover
background-color: #44c8f5
color: #000000
Disabled
Primary
Secondary
opacity: 0.65
Button options
Default
Disabled state
Button sizing
Large
Small
Button accessibility considerations
It is important to use semantic HTML for buttons. Not using semantic HTML for buttons risks making
the buttons less accessible.
If not using a <button> tag consider:
Having to define event handlers for keydown and click/tap events
(If needed) adding a class and aria-label to signify the button is disabled
Adding in role="button"
Ensuring the element is focusable for all assistive technology
The need for aria attributes and other complexities that comes with it, as
outlined by the W3C
Buttons vs. links
Assistive technologies read buttons and links differently. Both are focusable when using a keyboard.
Buttons trigger
with a space or enter key, but a link only triggers with an enter key.
Buttons tell the user they can take an action. Links offer the user a way to get to a new page
related to the context of
their current page.
digitala11y offered two points that can serve as a reminder of when to use a
button over a link:
Use buttons when the user- action causes a change in either back-end or the
front-end of the website. For example, submitting a form, opening a pop-up or a modal or a panel
on the same page.
Use links when the user- action doesn't affect the website at all. In this, the
users are readers or spectators of the site. For example, to navigate to the next page or an
external source after viewing the content of the page.
Collapse
Collapsible panels are a great way to toggle the visibility of content. Hennepin County
often refers to these as Drawers.
Some placeholder content for the first collapse component of this multi-collapse example.
This panel is hidden by
default but revealed when the user activates the relevant trigger.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Ut enim ad minim veniam
Quis nostrud exercitation ullamco laboris
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est
laborum.
Some placeholder content for the second collapse component of this multi-collapse example.
This panel is hidden
by default but revealed when the user activates the relevant trigger.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Ut enim ad minim veniam
Quis nostrud exercitation ullamco laboris
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est
laborum.
Some placeholder content for the third collapse component of this multi-collapse example.
This panel is hidden by
default but revealed when the user activates the relevant trigger.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Ut enim ad minim veniam
Quis nostrud exercitation ullamco laboris
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est
laborum.
Some placeholder content for the fourth collapse component of this multi-collapse example.
This panel is hidden
by default but revealed when the user activates the relevant trigger.
Lorem ipsum dolor sit amet
Consectetur adipiscing elit
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
Ut enim ad minim veniam
Quis nostrud exercitation ullamco laboris
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est
laborum.
Reduced motion: The animation effect of this component should depend on the
prefers-reduced-motion media
query. For more information see the accessibility
section.
Accessible Role: If the control element's HTML element is not a
<button>, you must add the attribute role="button" to the element.
Accessible state: This attribute conveys the state of the collapsible element to
assistive technologies. Based on the open or closed state, toggle the aria-expanded
attribute (true or false).
Accessible control: Add the aria-controls attribute to any control that
targets a single collapsible element. The value of that attribute must contain the id
of the collapsible element. Assistive technologies use this attribute to jump to the collapsible
element.
Footers
Use footers to signify the end of a section especially the end of an HTML document.
For the sake of this document, we are only going to focus on footers used to signify the end of an HTML page.
Footers may contain contact information, navigation items, and social media links.
At a minimum, footers must display the Hennepin County "H" logo in the lower right corner. They also
must link to the county's privacy policy and display copyright information.
Forms
Textual controls
Textual controls include form elements that are textual inputs or textareas. For example:
input[type="text|email|password|search|tel|url"] and textarea.
Checkboxes and radios
Custom checkboxes and radios create a consistent experience across browsers and devices.
Checkboxes
The focus indicator for checkboxes wraps around the entire label and control element.
Radios
The focus indicator for radios wraps around the entire label and control element.
Selects
File browser
Form validation
Form validation should take place on the front and back end.
Include these features in form validation:
Don't display errors until a user has had a chance to complete the input.
Remove error messages when the field becomes valid on keypress.
Customize the error message to help the user fix the issue.
Scroll the user to the top-most error and give that field focus.
Show all errors to the user at the same time when the user tries to submit the form.
Make error message clickable to give focus to its associated form field.
Inputs with an error must have an attribute aria-invalid="true"
Use aria-describedby to associate error messages with form fields to relay the error to
screen readers.
Ensure error messages are visible and next to the inputs.
Date input
We use the native HTML5 input[type="date"] for date input types.
This input lets browsers handle the date picker function while following accessibility standards.
Labels
Visible form labels are crucial to making forms accessible.
Form controls should always have a visible label. (Emphasis on
the word "visible"). It's crucial for users with cognitive disabilities. It's also crucial
for those who use speech recognition
software. It also increases usability.
Help text
Form accessibility considerations
Labels:You must programmatically associate labels with their fields:
Label text must be meaningful.
You may use icons as visual labels instead of text. Make sure the icon is visually self-evident.
Make sure to also
associate it with the field for assistive technologies.
Don't use placeholder text as the only way to provide a label for a text input.
Place labels next to their corresponding elements.
A label should be next to its corresponding element in the DOM.
Form validation: Give focus to inputs that have an error. Give them an attribute of
aria-invalid="true." Use aria-describedby to associate error
messages with form fields to relay the error to screen readers. Make the error messages visible and
next to the inputs.
Help text: Use aria-describedby to associate help text with the form
control it relates to. Assistive technologies can then announce the help text when the control
receives focus.
Modals
Modals dialogs require the user to take an action. They direct a user’s attention to
important information.
Modals should include:
An explicit close button (either with an "x" in the upper right corner, or a close button in the
modal footer, or both)
The ability to close the modal by clicking the backdrop
The ability to close the modal by pressing the esc key
The modal must be given keyboard focus when opened
The element that opened the modal must be given keyboard focus when the modal is closed
The modal must create a keyboard trap for when the modal is open
Modal title
...
Modal accessibility considerations
Accessible role: You need to add role="dialog" to the modal container.
Accessible ARIA attributes: Be sure to add aria-labelledby="...",
referencing the modal title, to modal container. Additionally, you may give a description of your
modal dialog with aria-describedby on the modal container. If the modal is only
visually hidden from the page, you will need to include aria-hidden="true" as well.
That value must be changed to false, or the attribute must be removed once the modal is opened.
Use of dismissible "close" button: It must have ample clickable spacing around it
(at least 40px by 40px). The close button must be a button element, or make use of the
button role (role="button"). If the close button does include the visible word "Close",
then it must be present through alternative means (such as visually hidden text that is accessible
to assistive technology).
Keyboard experience: There are a couple considerations you need to make for keyboard
users.
Keyboard trap: Typically when developing with accessibility in mind, you want
to avoid keyboard traps, but modals are an exception to the rule. You must create a keyboard
trap when modals are open to force keyboard users to interact with the dialog, and prevent them
from getting lost in the content behind the modal.
Close on esc keypress: It's always good UX practice to allow the esc key to
close modal windows, but it's especially critical when we are creating a keyboard trap. This
will allow keyboard users to close modals with ease.
Skip links
These let keyboard users skip navigation or other repeated components across many pages.
To see a working example, tab around this site (especially around navigation controls). Skip links should
be visually hidden until they receive focus.
Example of a static skip link (its position and display have been overridden):
Tables are meant for tabular data that preserves relationships within the information.
Tabular information displays in columns and rows. It has logical relationships among data like text,
numbers and images.
Columns and rows must be identified for the logical relationships to be perceived.
Responsive tables
Responsive tables can be set to side scroll by setting overflow-x: auto; to the parent
element of a
table.
Example responsive table with side scroll
Col 1
Col 2
Col 3
Col 4
Col 5
Row A
A1
A2
A3
A4
A5
Row B
B1
B2
B3
B4
B5
Row C
C1
C2
C3
C4
C5
Responsive tables can change their display properties to stack on smaller screens. This second example is
more complex
and needs to follow all accessibility guidelines.
Example responsive table with collapsing rows
Col 1
Col 2
Col 3
Col 4
Col 5
Row A
A1
A2
A3
A4
A5
Row B
B1
B2
B3
B4
B5
Row C
C1
C2
C3
C4
C5
Table styles
Table stripes
Table stripes should be used to help guide a user's eyes across wide tables with a lot of data.
Example table with striped rows
Col 1
Col 2
Col 3
Col 4
Col 5
Row A
A1
A2
A3
A4
A5
Row B
B1
B2
B3
B4
B5
Row C
C1
C2
C3
C4
C5
Table borders
Borders are another acceptable approach to help guide a user's eyes across tables with a lot of data.
This is especially true when using colspan.
Example table with borders
Col 1
Col 2
Col 3
Col 4
Col 5
Row A
A1
A2
A3
A4
A5
Row B
B1
B2
B3
B4
B5
Row C
C1
C2 - C4
C5
Sortable Tables
Sortable tables should be used to help users sort data by the column headers, in ascending or descending order.
Example table with sortable column headers
1
Myk
33
Purple
2
Hannah
21
Blue
3
Salim
18
Green
4
Greg
45
Orange
5
Caitlin
58
Red
6
Cyan
35
Yellow
Table accessibility considerations
A <caption> functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it.
Table headers must be designated with <th>. It is also a good idea to make the scope explicit by adding a scope of one of the following: col, row, colgroup, or
rowgroup.
Never use tables to lay out webpages. But if HTML is not editable, you must use role="presentation" to clearly identify its purpose.
Sorted tables should utilize buttons in the column headers to allow :focus and native keyboard controls to activate the sorting functionality. An aria-live region should also be used to alert screen readers when a table has been sorted, and how it was sorted.
Tabs
Add quick, dynamic tab function to move through panes of content.
Horizontal tabs
Tab 1
Sample content for tab 1. Sample link to exemplify how focus management should work with tabs (ie. keyboard navigation.
Sample bullet for tab 1
Sample bullet for tab 1
Sample bullet for tab 1
Tab 2
Sample content for tab 2. Sample link to exemplify how focus management should work with tabs (ie. keyboard navigation.
Sample bullet for tab 2
Sample bullet for tab 2
Sample bullet for tab 2
Tab 3
Sample content for tab 3. Sample link to exemplify how focus management should work with tabs (ie. keyboard navigation.
Sample bullet for tab 3
Sample bullet for tab 3
Sample bullet for tab 3
Vertical tabs
Tab 1
Sample content for tab 1. Sample link to exemplify how focus management should work with tabs (ie. keyboard navigation.
Sample bullet for tab 1
Sample bullet for tab 1
Sample bullet for tab 1
Tab 2
Sample content for tab 2. Sample link to exemplify how focus management should work with tabs (ie. keyboard navigation.
Sample bullet for tab 2
Sample bullet for tab 2
Sample bullet for tab 2
Tab 3
Sample content for tab 3. Sample link to exemplify how focus management should work with tabs (ie. keyboard navigation.
Sample bullet for tab 3
Sample bullet for tab 3
Sample bullet for tab 3
Tab accessibility considerations
Accessible roles: Add role="navigation" to the most logical parent container of the <ul> Or wrap a <nav> element around the whole navigation. Do not add the role to the <ul> itself. This would prevent assistive technologies from announcing it as a list.
The containing tab element should be given an attribute of role="tablist". The tab element itself should be given the attribute role="tab". The tab serves as a label for the tab panels. The tab content associated with a given tab should be given the attribute role="tabpanel".
Vertical tabs should make use of aria-orientation="vertical". Horizontal tabs can use aria-orientation="horizontal". But it is not required since this is the default value.
Keyboard Interaction:
Tab: When focus moves into the tab list, places focus on the active tab element. When the tab list contains the focus, moves focus to the next element in the page tab sequence outside the tablist, which is typically either the first focusable element inside the tab panel or the tab panel itself.
When focus is on a tab in a tablist with either horizontal or vertical orientation:
Left Arrow: moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab.
Right Arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab.
Space or Enter: Activates the tab if it was not activated automatically on focus.
Home (Optional): Moves focus to the first tab. Optionally, activates the newly focused tab.
End (Optional): Moves focus to the last tab. Optionally, activates the newly focused tab.
Shift + F10: If the tab has an associated pop-up menu, opens the menu.
Delete (Optional): If deletion is allowed, deletes (closes) the current tab element and its associated tab panel, sets focus on the tab following the tab that was closed, and optionally activates the newly focused tab. If there is not a tab that followed the tab that was deleted, e.g., the deleted tab was the right-most tab in a left-to-right horizontal tab list, sets focus on and optionally activates the tab that preceded the deleted tab. If the application allows all tabs to be deleted, and the user deletes the last remaining tab in the tab list, the application moves focus to another element that provides a logical work flow. As an alternative to Delete, or in addition to supporting Delete, the delete function is available in a context menu.
When focus is on a tab element in a vertical tab list:
Left Arrow: moves focus to the previous tab. If focus is on the first tab, moves focus to the last tab. Optionally, activates the newly focused tab.
Right Arrow: Moves focus to the next tab. If focus is on the last tab element, moves focus to the first tab. Optionally, activates the newly focused tab.
If a navigation is styled as tabs, but does not function like tabs (eg. navigation that goes to other pages), do not give the tabs role="tablist,"role="tab" or role="tabpanel." Only use these for dynamic tabbed interfaces. Find details in the WAI ARIA Authoring Practices.
Tooltips
Use a tooltip to specify extra information about an element. The tooltip appears when the
user mouses over an element, or the element receives focus.
Always make tooltips visible within a user's viewport on all screen sizes. The position of the tooltip
should adapt to
different screen sizes so it's always visible.
Tooltip accessibility considerations
Accessible role: You need to add role="tooltip" to the tooltip
container.
Accessible ARIA attributes: Be sure to add aria-describedby="...",
referencing the
tooltip container. If the tooltip is visually hidden you must include
aria-hidden="true." Once the tooltip is visible, change the value to
false, or remove the attribute.
Typography
Font family
Consistent use of our corporate typefaces reinforces Hennepin's brand identity.
Primary font family - Myriad Pro
Use Myriad Pro for all text, including headings and body copy. When using Myriad Pro Light, use larger
point sizes to maximize readability. As a general guide, headlines should be twice as large as subheads,
which should be
twice as large as body copy. Reserve bold and semi-bold should for subheads.
Font family fallbacks
When Myriad Pro does not load, always provide font fallbacks. Target similar system fonts for your
fallback. This will
give you the best alternative for the user's system.
Serif fonts
For formal communications use Adobe Garamond (Garamond). Always provide similar font fallbacks for serif
text.
Headings
Headings help organize the content on the page.
Headings are hierarchical, with <h1> representing the overall idea of the page. Each
page should only have one <h1>. Headings from <h2> to
<h6> help provide more organization and subsections to the content.
The rankings or level of the header relate to the number (for example, the number 2 in h2).
We recommend not skipping headings. For example, from <h2> to
<h4>. It is okay to skip headings if going backwards. For example, from
<h4> to <h3>.
Appropriate headings help provide assistive technologies a way to provide in-page navigation.
h1 Heading
h2 Heading
h3 Heading
h4 Heading
h5 Heading
h6 Heading
Body copy
Body copy should be 16px with a line-height of at least 1.5. This makes it easier for users
to read, especially those with cognitive disabilities. Provide a line-height of 1.5 to 2.
See WCAG specifying
line spacing in CSS.
For example:
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in
voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi
architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit
aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione
voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet,
consectetur, adipisci velit.
Sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat
voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit
qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum
fugiat quo voluptas nulla pariatur?