Elements
Container
Nested avatar for profile component
Heading 1
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.
Heading 1
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.
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 & Tags
Simple dot to highlight UI status, Also a tag which you set two properties of, status or is tag which will turn into a tag or just text
8.0
Status
Is Tag
Is Tag
true
false
true
false
true
false
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.
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. Set the status to active to show notification circle
Element
Extender
Width
Height
Radius
Default
50px
50px
50%
Small
40px
40px
50%
Small
30px
30px
50%
User
Nested avatar for profile component
Shapes
Square classes to style add any color class to set the color value or apply class to an image to crop
Socials
A list of social icons for placement