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 basedLinks are used to create pathways from one page to another.
-
Paragraph
#Code basedParagraphs are blocks of text separated from adjacent blocks by blank lines.
-
Intro Paragraph
#Code basedIntro 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 basedHeadings 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 basedLists 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 basedDefinition Lists are used to display name/value pairs such as terms and definitions. Particularly useful for glossaries.
-
Legend
#Code basedLegends are used for providing explanatory caption for the rest of the contents of the legend element's parent element.
-
Caption
#Code basedCaptions 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 basedButtons 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 basedPrimary Button should be used for main call-to-action on a page. There should be only one primary button per view.
-
Secondary Button
#Code basedSecondary Button is used for secondary interface actions. Often used next to the Primary Button.
-
Negative Button
#Code basedNegative Button is used in areas where contrast might be an issue. For example on top of hero areas.
-
Borderless Button
#Code basedBorderless Button is used to define a clickable interface action that visually looks like an icon or text without borders.
Form components #
-
Radio Button
#Code basedRadio Buttons are graphical interface elements that allow user to choose only one of a predefined set of mutually exclusive options.
-
Checkbox
#Code basedCheckboxes are used to let a user choose one or more options from a limited number of options.
-
Toggle
#Code basedToggles are graphical interface switches that give user control over a feature or option that can be turned on or off.
-
Input
#Code basedInput 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 basedTextarea 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 basedSelect 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 basedChoice 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 basedDate 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 basedRange 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 basedOutputs are used to represent the result of user’s action or a calculation.
-
Label
#Code basedLabels are used to create text labels for items in an interface.
-
Validation
#Code basedForm 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 basedNavigation 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 basedDropdowns 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 basedTabs 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 basedSteppers 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 basedNext & 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 basedFooter is used as the global footer for all views. Contains copyright data and links to related documents.
-
Card
#Code basedCards 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 basedIcons 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 basedHero 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 basedModals are used to display content that temporarily blocks interactions with the main view of an app.
-
Grid
#Code basedGrid component provides structure for other components using Flexbox based layout system.
-
Divider
#Code basedDividers 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 basedSidebar is used to represent a portion of a document whose content is only indirectly related to the document’s main content.
-
Table
#Code basedTables are used to arrange data like text, images, links, other tables, etc. into rows and columns of cells.
-
Overlay
#Code basedOverlays are used to create dark color layers on top of the page when displaying Modals and other similar components above.
-
Chat
#Code basedChat refers to a component that allows text-based communication which is live or happens in real-time.
-
Spacer
#Code basedSpacer is used to give additional white space between two components in an interface.
Messaging components #
-
Inline Validation
#Code basedInline 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 basedAlert 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 basedToasts 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 basedStatus Badges are used to inform users of the status of an object or of an action that’s been taken.
-
Empty State
#Code basedEmpty 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 basedLoading indicators are used when showing loading state or progress inline.
-
Tooltip
#Code basedTooltips 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”)