Elements
Lists
Feature Point (in the text box try to only use text not titles, lists or images, you can bold or make italic) for each element set visibility of what you want/don't want copy used rich text to allow you to add bold/italics and links.
Properties
Below are the combo class values
Element
Font Size
Line Height
Border
Border Color
Padding
Background
Link Block
1em
1.2em
Bottom 1.5px
medium-light
1em
Transparent
Combo Classes
The following elements use this combo class structure.
Type
Class Combo
Link Block
Icon
Interaction
The following elements use this combo class structure.
Element
Interaction Name
Mouse In
Mouse Out
Notifications
Notifications which can be used pinned at the top of a page or to an element to highlight status or alerts. When using alerts try to make the alert conversational i.e "It looks like we're missing this, try to adding in this xxx"
Use this announcement bar to draw your user’s attention to important updates and deals.
Use this announcement bar to draw your user’s attention to important updates and deals.
Use this announcement bar to draw your user’s attention to important updates and deals.
Use this announcement bar to draw your user’s attention to important updates and deals.
Use this announcement bar to draw your user’s attention to important updates and deals.
Use this announcement bar to draw your user’s attention to important updates and deals.
Class
Padding
Display
1em 1.2em
Flex
Status Markers
Simple dot to highlight UI status
Dividers
Very simply a 1px line which can have a color class to extend its background color
or
Meta
12,065
Class
Min-Width
Max-Width
Max-Height
Max-Height
1px
1px
1px
1px
Accordion
A very simple accordion with animation for the open state.
01. Accordion Option
Element
Class
Border
Padding
Accordian
2px mid-light bottom
Dropdown Toggle
1em 2em 0 1em
Dropdown List
2px mid-light top
Element
Interaction Name
Open
Close
Loaders and Progress
Progress
Below is an example of a progress bar you can press the preview to see it in action, this uses javascript to action the loader, we have done this so that you can hook this up to any development you have. however this is also an interaction available for the loader.
Preview
content_copy
Copied
Progress Label
10%
Helper text
There are an interaction for page load for showing the loader if required
Element
Starts Loading
Page Loaded
circle-loader
Avatars
3 size avatar which is wrapped in a link block for convenience.
Element
Extender
Width
Height
Radius
Default
50px
50px
50%
Small
40px
40px
50%
Small
30px
30px
50%
User
Nested avatar for profile component
Socials
A list of social icons for placement
Video Player
An example of the video player component using plyr
Image Element
Properties for the image elements are full screen or fit,
