Sketch

Draft

#

Before creating a new design, please make sure something similar doesn’t already exist. Use this list as a reference for existing Sketch based components.

“Code based” label means that we have the component in both Sketch Toolkit and Duet’s Components. If you’re wondering whether to create a new component or extend an existing one, you might find this chart useful.

Text components #

• Link

  Code based

  #

  Links are used to create pathways from one page to another.

• Paragraph

  Code based

  #

  Paragraphs are blocks of text separated from adjacent blocks by blank lines.

• Intro Paragraph

  Code based

  #

  Intro Paragraphs are used as distinct sections of text designed to make a bold visual statement. They utilize bigger than normal font sizes and are often below the main page heading.

• Heading

  Code based

  #

  Headings are used as the titles of each major section of a page in the interface. H1 being the highest (or most important) level and H6 the least. Heading component supports the following levels and styles:

  h1, h2, h3, h4, h5, h6

• List

  Code based

  #

  Lists display related pieces of text-only information. Each list item begins with a bullet or a number. List component supports the following content types:

  unordered, ordered

• Definition List

  Code based

  #

  Definition Lists are used to display name/value pairs such as terms and definitions. Particularly useful for glossaries.

• Legend

  Code based

  #

  Legends are used for providing explanatory caption for the rest of the contents of the legend element's parent element.

• Caption

  Code based

  #

  Captions are used as brief explanations accompanying an illustration, form element, or similar. Caption text is smaller than the recommended size for general reading.

Button components #

• Default Button

  Code based

  #

  Buttons are used to make clickable interface actions immediately visible and easy to perform. Inside a button we can use text, icon, or a combination of both.

• Primary Button

  Code based

  #

  Primary Button should be used for main call-to-action on a page. There should be only one primary button per view.

• Secondary Button

  Code based

  #

  Secondary Button is used for secondary interface actions. Often used next to the Primary Button.

• Negative Button

  Code based

  #

  Negative Button is used in areas where contrast might be an issue. For example on top of hero areas.

• Borderless Button

  Code based

  #

  Borderless Button is used to define a clickable interface action that visually looks like an icon or text without borders.

Form components #

• Radio Button

  Code based

  #

  Radio Buttons are graphical interface elements that allow user to choose only one of a predefined set of mutually exclusive options.

• Checkbox

  Code based

  #

  Checkboxes are used to let a user choose one or more options from a limited number of options.

• Toggle

  Code based

  #

  Toggles are graphical interface switches that give user control over a feature or option that can be turned on or off.

• Input

  Code based

  #

  Input specifies an input field where the user can type into. Used when the expected user input is short. For longer input, use the Textarea component. Input component supports the following content types:

  Default, Money, Number, Zip Code, Identity Code, City, Street Address,
Bank Account, Telephone, Time, Email, Date, Daterange

• Textarea

  Code based

  #

  Textarea specifies a control that allows user to write text over multiple rows. Used when the expected user input is long. For shorter input, use the Input component.

• Select

  Code based

  #

  Select lets user choose one option from an options menu. Consider using select when you have 4 or more options. Select component supports the following content types:

  Default, Country

• Choice Button

  Code based

  #

  Choice Buttons allow selection of a single or multiple options from a set of predefined options. They are a good alternative to radio buttons, checkboxes, and select menus. Supports the following use cases:

  Single selection (Radio Button like functionality),
Multiple selection (Checkbox like functionality),
Expandable selection

• Date Picker

  Code based

  #

  Date Picker lets user pick a single date or a date range using a special calendar like date picker interface.

• File Upload #

  File Upload lets user choose one or more files from their device storage and upload them to server.

• Range Slider

  Code based

  #

  Range Slider lets user specify a numeric value using a slider which must be no less than a given value, and no more than another given value.

• Output

  Code based

  #

  Outputs are used to represent the result of user’s action or a calculation.

• Label

  Code based

  #

  Labels are used to create text labels for items in an interface.

• Validation

  Code based

  #

  Form validation helps us ensure that users fill out forms in the correct format, making sure that submitted data will work successfully.

Nav components #

• Navigation

  Code based

  #

  Navigation is used as an introductory content for all views including navigational aids, a logo, main navigation and so on. Browsers, such as screen readers for disabled users, can use this component to determine whether to omit the initial rendering of this content.

• Dropdown

  Code based

  #

  Dropdowns are used to create menus that appear below a menu title when it’s selected, and remaining until used or dismissed.

• Tabs / Sub Navigation

  Code based

  #

  Tabs are used as graphical interface elements that allow multiple panels to be contained within a single window, using tabs as a navigational element.

• Stepper

  Code based

  #

  Steppers are used to create wizard-like workflows by dividing content into logical steps. Steppers support the following user flows:

  Vertical steps, Page by page steps

• Pagination #

  Paginations are used to create controls that allow user to browse paged content from page to page.

• Progress Bar #

  Progress Bars are used to show the progress of a flow in Stepper component or similar.

• Next & Previous

  Code based

  #

  Next & Previous are used to create controls that allow user to go back and forth in a paged flow or dataset.

• Filter #

  Filters provide a way to see only the data that user wants displayed.

Generic components #

• Footer

  Code based

  #

  Footer is used as the global footer for all views. Contains copyright data and links to related documents.

• Card

  Code based

  #

  Cards are used to group similar concepts and tasks together to make the interface easier to scan, read, and get things done. Card component provides the following options:

  With Header, Without Header, Collapsible

• Icon

  Code based

  #

  Icons are used to provide additional meaning or in places where text label doesn’t fit. For most purposes, we use Streamline 3.0 iconset.

• Hero Area

  Code based

  #

  Hero areas are used to catch user’s attention. When placed at the top of the page they are often the first thing user sees, making them a great spot to get users acquainted with catchy content. Can include an illustration as well.

• Action Banner #

  Action Banners are used to highlight and “market” specific interface call-to-actions in between other content.

• Modal

  Code based

  #

  Modals are used to display content that temporarily blocks interactions with the main view of an app.

• Grid

  Code based

  #

  Grid component provides structure for other components using Flexbox based layout system.

• Divider

  Code based

  #

  Dividers are used to represent thematic breaks between paragraph-level elements. Visually, they look like horizontal rules or lines.

• Video Player #

  Video Player is used to embed a media player which supports video playback into the document.

• Sidebar

  Code based

  #

  Sidebar is used to represent a portion of a document whose content is only indirectly related to the document’s main content.

• Table

  Code based

  #

  Tables are used to arrange data like text, images, links, other tables, etc. into rows and columns of cells.

• Overlay

  Code based

  #

  Overlays are used to create dark color layers on top of the page when displaying Modals and other similar components above.

• Chat

  Code based

  #

  Chat refers to a component that allows text-based communication which is live or happens in real-time.

• Spacer

  Code based

  #

  Spacer is used to give additional white space between two components in an interface.

Messaging components #

• Inline Validation

  Code based

  #

  Inline Validation is a brief, in-context message that tells user something went wrong with a single or group of inputs in a form.

• Alert

  Code based

  #

  Alert informs user about important changes or conditions in the interface. Use this component if you need to capture user’s attention in a prominent way.

• Toast

  Code based

  #

  Toasts are non-disruptive messages that appear in the interface to provide quick, at-a-glance feedback on the outcome of an action.

• Status Badge

  Code based

  #

  Status Badges are used to inform users of the status of an object or of an action that’s been taken.

• Empty State

  Code based

  #

  Empty state is used when a component has no items or data to show. It provides explanation or guidance to help user progress.

• Loading Indicator

  Code based

  #

  Loading indicators are used when showing loading state or progress inline.

• Tooltip

  Code based

  #

  Tooltips are floating labels that briefly explain the function of a user interface element. They can be triggered when user hovers, focuses or clicks.

Chart components #

• Pie Chart #

  Pie Charts are used to display type of graphs in which a circle is divided into sectors that each represent a proportion of the whole.

• Line Chart #

  Line Charts are used to display type of charts which displays information as a series of data points called “markers” connected by straight line segments.

• Bar Chart #

  Bar Charts are used to display diagrams in which the numerical values of variables are represented by the height or length of lines of equal width.

Additional patterns #

• Accordion (Expand/Collapse)
• Attachment List
• Accident Information
• Applied Expenses Card
• Payment Wall
• Error Template
• Thank You Template
• Signed Out Template
• Summary Card
• Summary View
• Summary List
• Price Card
• Details Card
• Policy Summary/Details
• Edit Template
• Confirm View
• Claims Table
• Compensation Decision
• Compensation Example
• Consent Card
• Sticky Price
• Product Details
• Comparison Table
• User Profile
• List of Persons
• Add a New Person
• Marketing Authorization
• Insurance Details
• Downloadable Files
• Active Claims List
• Calculator Module
• List of News Articles
• Yearly Report View
• Related Links

Functionality #

• Delete [object]
• Edit [object]
• Add [object]
• Send [object]
• Save [object]
• Comment [object]
• Show more/less of [object]
• Cancel [object]
• Info about [object]
• Clear [object]
• Next [object]
• Previous [object]
• Browse back to [object]
• Close [object]
• Expand [object]
• Collapse [object]
• Upload [object]
• Log in of [object]
• Log out of [object]
• Active [object]
• Inactive [object]
• Disabled [object]
• Focused [object]
• Character Limit of [object]
• Identify [object] (“Tunnistaudu”)