Styleguide with stylebooks - PRTLQA_TSTSite
Base theme core
Here goes information that is not directly linked to any component, but rather core base theme changes & updates that are relevant to product and customer themes.
Colors
-
Primary
Used for primary actions, active icons, focused, active and selected states.
-
Secondary
Used for secondary actions, default icon states, toggles and default images.
-
Tertiary
Used for tertiary actions, default icon states.
-
Brand
Used for non-interactive design elements and typography.
-
Callout
Used for to highlight certain design elements.
-
Separator
Used for all borders and box-borders.
-
Discount
Used for all elements relating to discounted prices and items on sale.
-
Copy
Used for all text.
-
Monochrome
Used to set the baseline of what is white and what is black.
User Feedback Color Palette
-
Info
Used for all types of inforation messages to the user.
-
Success
Used for all types of success messages.
-
Warning
Used for all types of warnings where no action of the user is required.
-
Error
Used for all types of alerts and errors where action of the user is required.
Typography
Heading 1 (h1)
Heading 2 (h2)
Heading 3 (h3)
Heading 4 (h4)
Heading 5 (h5)
Heading 6 (h6)
Separators
Separator for content and sections
Example of a bottom separator using the $separator variable.
Box borders
Box border example
Borders other
For borders that doesn't categorize as one of the other two but follow the same apperance can for easier themability use the $border variable, but not directly. Defining a new variable that's ineriting this variable is strongly advised for flexibility in variable overriding at a later stage. Components like Input fields, Calendar and Search fields all has their own variable that is inheriting the $border variable.
Buttons
Checkboxes
Radio Buttons
Calendar
Droppy dropdowns
- Alabama
- Alaska
- A super long title that is truncated bla bla bla cats and dogs and more bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla
- Arizona
- Arkansas
- California
- Colorado
- Connecticut
- Delaware
- District Of Columbia
- Florida
- Georgia
- Hawaii
- Idaho
- Illinois
- Indiana
- Iowa
- Kansas
- Kentucky
- Louisiana
- Maine
- Maryland
- Massachusetts
- Michigan
- Minnesota
- Mississippi
- Missouri
- Montana
- Nebraska
- Nevada
- New Hampshire
- New Jersey
- New Mexico
- New York
- North Carolina
- North Dakota
- Ohio
- Oklahoma
- Oregon
- Pennsylvania
- Rhode Island
- South Carolina
- South Dakota
- Tennessee
- Texas
- Utah
- Vermont
- Virginia
- Washington
- West Virginia
- Wisconsin
- Wyoming
Toggles
Input Fields
Search
Header Search Fields
Breadcrumbs
Pagination
- Currently on page 1
- Go to page 2
- Go to page 3
- ...
- Go to page 22
Tabs
Tab 1
Subheading
Condense the browser window to view tab collapse effect.
This is a very long tab name that will be truncated if it does not fit on two lines.
Subheading
Integer quis pharetra elit. Nam est ex, consequat nec turpis vitae, varius ullamcorper nulla. Aenean euismod sapien vel massa rhoncus feugiat.
Tab 3
Another tab
I am another tab's content. Blah blah blah.
Notifications
Error Messages
Error not attached to an input
Alerts
Description describing the alert more in detail. This is intentionally left with no padding/margin to be able to fullfil requirement where we want to have separators/borders taking up full width (or close to).
Tooltips
Popovers
Tags
Indicators
Loaders
Please wait while your content is being loaded
Process Steps
Accordions
-
Heading of the accordion
Body copy inside of the accordion that repeats and then repeats again. Body copy inside of the accordion that repeats and then repeats again. Body copy inside of the accordion that repeats and then repeats again.
-
Heading of the accordion
Body copy inside of the accordion that repeats and then repeats again. Body copy inside of the accordion that repeats and then repeats again. Body copy inside of the accordion that repeats and then repeats again.
-
Heading of the accordion
Body copy inside of the accordion that repeats and then repeats again. Body copy inside of the accordion that repeats and then repeats again. Body copy inside of the accordion that repeats and then repeats again.
-
Heading of the accordion
Body copy inside of the accordion that repeats and then repeats again. Body copy inside of the accordion that repeats and then repeats again. Body copy inside of the accordion that repeats and then repeats again.
-
Heading of the accordion
Body copy inside of the accordion that repeats and then repeats again. Body copy inside of the accordion that repeats and then repeats again. Body copy inside of the accordion that repeats and then repeats again.
Header Modules
Item
Quantity
Total
Boxes
Simple Content box demo
Collapse / Expand
Collapsible plugin demo
-
Expandable/collapsible list-item
Area for some content
-
Expandable/collapsible list-item
Area for some content
-
Expandable/collapsible list-item
Area for some content
Form Groups
Modal
Icons
Actionable Icons
Non-Actionable Icons
Social Icons
Credit Card Icons
American Express 4-Digit code
Visa/Mastercard 3-Digit code