Introduction
Use this style guide as a template to build your html-based style guide.
Colors
$app-dark-gray
#34363b
rgb
(52,54,59)
$app-warm-gray
#f7f5f4
rgb
(247,245,244)
$app-cyan
#00aeef
rgb
(0,174,239)
Typography
font-family: 'Source Sans Pro', Helvetica, Arial, sans-serif;
Header 1
font-size: 3.0rem; /* 30px */
Header 2
font-size: 2.4rem; /* 24px */
Header 3
font-size: 1.8rem; /* 18px */
Body
font-size: 1.4rem; /* 14px */ color: #323334;
Secondary text
font-size: 1.4rem; /* 14px */ color: #979ba8;
font-size: 1.4rem; /* 14px */
color: #00aeef;
:hover {text-decoration: underline;}
Icons
SVGs are easier to style in CSS than images or font icons. To add an icon to your HTML, use the following:
<svg class="icon {{icon-id}}"><use xlink:href="./assets/
images/symbol-defs.svg#{{icon-id}}"></use></svg>
To style the color of an icon, you'll want to use fill:#000; in your CSS. You can give SVGs a stroke:#000 as well. Below are some commonly used Helveticons as well as a handful of useful icons that were missing from the original libraries.
-
icon-Search
Used in search inputs
-
icon-Settings
Used to access settings
-
icon-Delete
Delete, close, remove, etc.
-
icon-Trash
Used for deletion
-
icon-Add
Used for addition
-
icon-Chat
Used for chats, comments, etc.
-
icon-Check
Used for checkmarks
-
icon-Calendar-alt
Used for date pickers, calendars, etc.
-
icon-Message
Used for email, messages
-
icon-Save-alt
Used for saving (not a helveticon)
-
icon-Navigationdown
Used to indicate selection box, expansion, or sorting
-
icon-download
Used for download, export
-
icon-Upload
Used for upload, import
-
icon-Thumbnails
Used for grids, tiles, etc.
-
icon-List
Used for menu, justified text
-
icon-Print
Used for print
-
icon-User
Used to indicate person, profile, user
-
icon-Pinlocation
Used for location, maps
-
icon-Edit
Used for edit
-
icon-Folder
Used for folder, project
-
icon-Rate
Used for favorites, rates
-
icon-Favorite
Used for favorites, matters of the heart
-
icon-Barchart
Used for bar chart
Text Input
Label
Show Markup
Show LESS
Required field *
Show Markup
Show LESS
Errored field
Show Markup
Show LESS
Disabled Field
Show Markup
Show LESS
Select box
Label
Show Markup
Show LESS
Errored Select
Show Markup
Show LESS
Disabled Select
Show Markup
Show LESS
Radio Button
Label
Show Markup
Show LESS
Errored Radio
Show Markup
Show LESS
Disabled Radio
Show Markup
Show LESS
Checkbox
Label
Show Markup
Show LESS
Errored Checkboxes
Show Markup
Show LESS
Disabled Checkboxes
Show Markup
Show LESS
Button
Standard Button
Show Markup
Show LESS
Active Button
Show Markup
Show LESS
Slider
Label
Note: Slider not built out in guide, general styles shown below:
Show LESS
Toggle
Label
Show Markup
Show LESS
Disabled Toggle
Show Markup
Show LESS
Edit Title
Show Markup
Show LESS
Show Scripts
Navigational Menu
- Welcome, Jennifer
- User Settings
- Log out
- Healthcare
- Products
- Studio
- Articles
- Notifications 1
Show Markup
Show LESS
Popup
Settings
Changes to settings will apply across all projects.
Personal Information
Email address
Messages
Message Display
Age
Episode Overlapping
Predominant Therapy
Prioritize Segment
Show Markup
Show LESS
Side Panel
Time
Time Presets
Analysis Start *
Analysis End *
Patients
Patient Assignment
Projections
Rounding method
Show Markup
Show LESS
Tiles
Tiles
Corporate
Long Title for Company Workspace
27 Reports, 3 Assets
Private
Private Workspace
3 Reports, 1 Asset
Shared
Shared Workspace
8 Reports, 2 Assets
Heart Failure
Cohort
-
AHA dataset (239.18M)
-
HFSC dataset (8.79M)
247.97 M sample
Includes codes for hypertension and heart failure as well as congenital heart diseases.
Source of Business
Sources of Business over time, and most common win and loss events between market segments.
Show Markup
Show LESS
Chart Grid
Patient
- 4000
- 3500
- 3000
- 2500
- 2000
- 1500
- 1000
- 500
- 0
- -500
- Aug 2014
- Sep
- Oct
- Nov
- Dec
- Jan 2015
- Feb
- Mar
- Apr
- May
- Jun
- Jul
Show Markup
Show LESS
Chart Legend
2 hidden
Show Markup
Show LESS
Show Scripts
Tip Popover
Alphacyn Losses
Aug 2014