Weight:20
Styleguide Sub.Data.Sponsor.Address
*/
/*
Logo
Description:
Logo of the Company
Markup:
MarkupWrapperClasses: max-w_40 relative h_20 w_100
Weight:10
Styleguide Sub.Data.Sponsor.Logo
*/
/*
Web Address
Markup:
http://wwww.LogoIpsum.com
Weight:25
Styleguide Sub.Data.Sponsor.WebAddress
*/
/*
Website Link
Markup:
Website
Weight:26
Styleguide Sub.Data.Sponsor.WebLink
*/
/* Nav Recipes.00x */
/*
Call to Action Buttons
Description: The Call to Action Button component is used to create a prominent button that encourages users to take a specific action.
Sign Up - Used to encourage users to register or create an account. It prompts them to take action and join a platform, service, or community.
Purchase - Used to prompt users to make a purchase. It creates a sense of urgency and directs users to complete a transaction for a product or service.
Learn More - Used explore further information about a product, service, or topic. It encourages them to click and discover additional details or resources.
Subscribe - Used to encourage users to subscribe to a newsletter, mailing list, or updates from a website or company. It aims to build a relationship with users and keep them engaged.
Get Started - Used to initiate user onboarding or guide users through the first steps of using a product or service. It prompts users to begin their journey and experience the offering.
Markup:
NOTE: The Call to Action Button component is ideal for creating prominent buttons that attract user attention and encourage them to take a specific action, such as signing up, making a purchase, or exploring more content.
Weight:1000
Styleguide HTML.Inputs.Button.CTA
*/
/*
Buttons
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button
*/
/*
Buttons Small
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button.SM
*/
/*
Buttons Large
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button.LG
*/
/* Recipes.40 */
.address {
font-style: unset;
}
@media only screen and (min-width: 640px) {
.reverse-indent {
display: inline-block;
width: 100%;
margin-left: 1em;
padding-right: 1em;
text-indent: -1em;
}
.reverse-indent:after {
display: table;
clear: both;
content: "";
}
}
/*
Generic Footer
This defines the web footer.
Markup:
SubComponents:
Sub.Component.Navigation.Footer.Address - Addresses
Sub.Component.Navigation.Footer.Social - Social Links
Sub.Component.Navigation.Footer.ACCProductLinks - Sister Sites
Sub.Component.Navigation.Footer.Subfooter - Sub Footer
Sub.Component.Navigation.Footer.Cite - Citation for the Site
Weight: 40
Styleguide Component.Navigation.Footer
*/
/*
Sub Footer
Description: ACC has some basic legal information that should be on every property.
Markup:
Weight: 0
Styleguide Sub.Component.Navigation.Footer.Subfooter
*/
/*
Cite and Copyright
Contains copy right
Markup:
MarkupWrapperClasses:
texture_dark p_4 max-w_30
Styleguide Sub.Component.Navigation.Footer.Address
*/
/*
Fat Footers Links
Footers in the ACC sometimes have fat footers with a list of categories and links.
Markup:
MarkupWrapperClasses:
texture_dark p_4
Styleguide Component.Navigation.Footer.Fat-Footer-Links
*/
/*
ACC Product Links
Links to the other major products in the ACC portfolio
Markup:
MarkupWrapperClasses:
texture_dark p_4
Styleguide Sub.Component.Navigation.Footer.ACCProductLinks
*/
/*
Social Links
The college has a collection of social or secondary platforms we interact with.
Markup:
Stay Connected
MarkupWrapperClasses:
texture_dark p_4 max-w_40
Styleguide Sub.Component.Navigation.Footer.Social
*/
/* Nav Recipes.50 */
/*
Quick Utility Links
Quick Links are only text links that are used for special cross marketing to sister sites and utility pages like about, home, extra.
Markup:
Weight:50
Styleguide Component.Navigation.QuickLinks
*/
/* Nav Recipes.04x */
/*
Advertisment Spaces
Advertising comes in static size so wrapper areas ease the alignment issues when in shared column spaces.
Markup:
advertisment
MarkupWrapperClasses:
max-w_30
Styleguide Component.Advertisement
*/
/* content Recipes.100 */
/*
Social Links
The social links From the Footer.
Markup:
Styleguide Component.Navigation.SocialLinks
*/
/*
Social Links Monochrome
The social links can be restyled to be smaller.
Markup:
Styleguide Component.Navigation.SocialLinks.Mono Chrome
*/
/*
Social Links Smaller
The social links can be restyled to be smaller.
Markup:
Styleguide Component.Navigation.SocialLinks.Smaller
*/
/*
Cookie Banner
Description: This page is the root of the page. The cookie banner was used to display a message to the user that the site uses cookies. The user can click on the banner to dismiss the message.
The system will present user a pop-up banner that appears when first accessing the site, which will include text, links and an Accept/OK button.
The system will allow the user to dismiss the pop up by clicking the Accept/OK button
The system will allow the ACC Admin to "reset" the pop up banner, which will show it to all users and require them to click accept again to dismiss it.
The system will track and record the users date/time when they accepted the pop up.
Markup:
This site uses cookies to improve your experience.
MarkupWrapperClasses: relative
NOTE: This design needs to have the 'fixed' class changed to fixed in the parent container of the attached code when in real implementations. 'fixed' is used in the documentation page so it would not break free of the documentation area into the bottom of the browser page.
Weight:100
Styleguide Component.CookieBanner
*/
/* content Recipes.150 */
/*
Ordered Cards
Having cards order on page to help users find there way through steps can some times be very helpful.
Markup:
First it is bad
This is a card.
It has an easy to override visual style, and is appropriately subdued.
Then it is not right
This is a card.
It has an easy to override visual style, and is appropriately subdued.
At last it is good
This is a card.
It has an easy to override visual style, and is appropriately subdued.
Weight: 150
Styleguide Recipes.Ordered Cards
*/
/* content Recipes.250 */
/*
Read More Arrow
This stacked incon is used in multiple locations when a user should know their is more to learn or read on another section of the site.
Markup:
StyleGuide Sub.Component.Common.ReadMoreArrow
*/
/*
600w x 300h
Markup:
https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.600x300
*/
/*
600w x 400h
Markup:
https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.600x400
*/
/*
1200w x 300h
Markup:
https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.1200x300
*/
/*
375w x 250h
Markup:
https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.375x250
*/
/*
320w x 300h
Markup:
https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.320x300
*/
/*
1024w x 256h
Markup:
https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.1024x256
*/
/*
Aspect 21x9
Markup:
https://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.21x9
*/
/*
Aspect 16x9
Markup:
https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.16x9
*/
/*
300w x 400h
Markup:
https://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.300x400
*/
/*
square
Markup:
https://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.Square
*/
/*
Max 20 Character
Markup:
Di dolores (20 Chars)
Styleguide Sub.Placeholder.Text.20ch
*/
/*
Max 30 Character
Markup:
Commodi dolores (30 Characters)
Styleguide Sub.Placeholder.Text.30ch
*/
/*
Max 40 Character
Markup:
Rerum libg dero pariatur (40 Characters)
Styleguide Sub.Placeholder.Text.40ch
*/
/*
Max 60 Character
Markup:
Sed ut perspiciatis unde omnis iste natus er (60 Characters)
Styleguide Sub.Placeholder.Text.60ch
*/
/*
Max 80 Character
Markup:
Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters)
Styleguide Sub.Placeholder.Text.80ch
*/
/*
Max 100 Character
Markup:
Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)
Styleguide Sub.Placeholder.Text.100ch
*/
/*
Max 150 Character
Markup:
Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)
Styleguide Sub.Placeholder.Text.150ch
*/
/*
Max 200 Character
Markup:
Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)
Styleguide Sub.Placeholder.Text.200ch
*/
/*
Max 250 Character
Markup:
Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)
Styleguide Sub.Placeholder.Text.250ch
*/
/*
Grid - Triple Card Holder
Markup:
columns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography
NOTE:
Triple up cards with shaded background are used only in full screen pages
Styleguide Sub.ClassList.Grid.Card.Split-Triple
*/
/*
Triple Split with Sidebar
Markup:
columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left
NOTE:
Triple up splits
Styleguide Sub.ClassList.Grid.TripleLG
*/
/*
Grid - Card Holder - 50 split
Markup:
columns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid
NOTE:
split layouts great for half page cards
Styleguide Sub.ClassList.Grid.Split-50
*/
/*
GridList Triple on XL
Markup:
columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none
Styleguide Sub.ClassList.Grid.TripleXL
*/
/*
GridList Item Basic
Markup:
flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius
NOTE:
Icon and Header use differnt classes because they are a simpler component.
Styleguide Sub.ClassList.Grid.Item
*/
/*
Subs
Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as
sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data
points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone
but are composed into larger, reusable structures.
These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text,
or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials
({{> 'Sub.X' }}) to render dynamic or variable content within patterns.
Common use cases: - {{> 'Sub.Sub.Data.Duration'}} — Displays session duration -
{{> 'Sub.Credit' modifier_class='CME'}} — Outputs a credit tag with a modifier -
{{> 'Sub.ActionButtons.Favorite'}} — Interactive favorite/save button
NOTE: Subs are maintained as composable units to promote consistency, reduce repetition, and streamline pattern updates across the system.
Styleguide Sub
*/
/*
Placeholders
Placeholders are just used across the styleguide. The can be either text or image stand ins for the UI.
Weight: 9999
Styleguide Sub.Placeholder
*/
/*
Recipe
Patterns that are used through out the refactors on ACC.org
Weight: 1000
Styleguide Sub.Recipe
*/
/*
Articles
There are multiple sub components that are used through out the most common page type on ACC.org
Weight: 1000
Styleguide Sub.Recipe.Article
*/
/*
Data
There are data and formats that should be followed when building out components on ACC.org bellow are some of the most common data formatting that is used across the site.
Weight: 500
Styleguide Sub.Data
*/
/*
Class Lists
Arches can be robust when trying to descrbe a complicated peice of UI and here is a respository of the classes used on those UI items
Weight: 2000
Styleguide Sub.ClassList
*/
/*
Rich Text
Markup:
Lorem Ipsum
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Header Level 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Table of Contents
How to Prepare for the Boards
General Principles of Cardiovascular Medicine
Arrhythmias
Coronary Artery Disease
Heart Failure & Cardiomyopathy
Valvular Disease
Pericardial Disease
Congenital Heart Disease
Vascular Diseases
Systemic Hypertension and Hypotension
Pulmonary Circulation Disorders
Systemic Disorders Affecting the Circulatory
System
Weight: 100
Styleguide Bootstrap.Pagination
*/
/*
Tabs
A simple way to show small groups of content that should have the same level of reading hierarchy.
Markup:
consectetur adipisicing elit
Lorem ipsum dolor sit amet. Quisquam maxime consectetur, nisi sed ea perspiciatis a sit porro laboriosam ab sequi est quas optio dolorum at maiores quis incidunt inventore.
Lorem ipsum dolor sit
Amet consectetur adipisicing elit. Vero enim provident consequuntur perspiciatis. Eligendi placeat consequuntur veniam quidem temporibus labore quisquam commodi rem error cumque fugit suscipit nulla, excepturi eos.
MarkupWrapperClasses:
SubComponents:
Sub.Component.Structures.Tabs.Tab.LinkActives - Active Tab
Sub.Component.Structures.Tabs.Tab.Link - Tab
Sub.Component.Structures.Tabs.Tab.LinkDisabled - Disabled Tab
Caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Structures.Tabs.
*/
/*
Simple Tabs: Dark Mode
Reverse Colored Tabs for when on dark background
Markup:
Weight: 0
Styleguide Sub.Component.Structures.Tabs.TabDark
*/
/*
Tab Dark: Active
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4
Weight:0
Styleguide Sub.Component.Structures.Tabs.TabDark.Link
*/
/*
Tab Dark: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4
Weight:0
Styleguide Sub.Component.Structures.Tabs.TabDark.LinkDisabled
*/
/*
Tab: Active
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light
Weight:0
Styleguide Sub.Component.Structures.Tabs.Tab.LinkActive
*/
/*
Tab: Basic
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light
Weight:0
Styleguide Sub.Component.Structures.Tabs.Tab.Link
*/
/*
Tab: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light
Weight:0
Styleguide Sub.Component.Structures.Tabs.Tab.LinkDisabled
*/
/*
UI Tabs
The application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.
Markup:
{{> Sub.Placeholder.Typography }}
{{> Sub.Placeholder.Typography }}
MarkupWrapperClasses: p_4
caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Structures.UITabs
*/
/*
UI Tabs Overflow
The application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.
Markup:
{{> Sub.Placeholder.Typography }}
{{> Sub.Placeholder.Typography }}
MarkupWrapperClasses: p_4
caution: This item is not finalized and might be subject to change
Note: Custom JavaScript is needed to make this scroll back and forth, and will need to have disables applied when overflow has reached a max or min.
Weight:0
Styleguide Component.Structures.UITabs.Overflow
*/
/*
Tab: Default
Description: Active State of Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
Link
caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
MarkupWrapperClasses: flex ul_none
Weight:0
Styleguide Sub.Component.Structures.UITabs.Tab
*/
/*
Tab: Active
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex ul_none
caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Sub.Component.Structures.UITabs.Tab.LinkActive
*/
/*
Tab: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Markup:
caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
MarkupWrapperClasses: flex ul_none
Weight:0
Styleguide Sub.Component.Structures.UITabs.Tab.LinkDisabled
*/
/*
Scroll Overflow Script
Description: Javascript is needed to make the scrolls work on the page
Markup:
MarkupWrapperClasses: p_4
caution: This item is not finalized and might be subject to change
Weight:0
Styleguide Component.Structures.UITabs.Script
*/
/*
Sidebar Nav
Description: Side bar for any 3 layer nav on the site. the parent node is from the main nav.
Markup:
Weight:-1000
MarkupWrapperClasses: max-w_25 m_auto
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Styleguide Component.Navigation.Sidebar
*/
/*
Parent NavItem
Description: The parent is singular in this nav it is always active and its direct children are always expanded so there is not need for a toggle.
Markup:
Weight: -100
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.Parent
*/
/*
Child NavItem
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
default - No added class
active - Nav Item changes its decoration if this the page the user is on.
Markup:
Weight: 10
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.Child
*/
/*
Toggle Child
Description: Toggle elements are set to active if the attached node or its children are active. If the toggle is active the collapsed children navigation are open by default.
default - the toggle when it doesn't have an active class still shades on hover
active - shade the toggle
Markup:
Weight: -10
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.ChildToggle
*/
/*
Child NavItem With Children
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Markup:
Weight: 15
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.ChildWithChildren
*/
/*
Child NavItem With Grand Children
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Markup:
Weight: 15
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Styleguide Component.Navigation.Sidebar.ChildWithGrandChildren
*/
/*
Great Grandchild NavItem
Description: Great Grand Children loose the spacer for toggles because they don't have any child navs and don't need the use of a toggle.
default - No added class
active - Nav Item changes its decoration if this the page the user is on.
Markup:
Weight: 100
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.GreatGrandchild
*/
/*
Bootstrap Toggle Rotation
The toggles for bootstrap collapses use a `+` icon that twists to an `x` when the elements doesn't have `collapsed` or `show` as a class. to reduce confusion the class has a set rotation and speed attached to it. `a:rotation` is applied to the tow specific icons `fa-times` and `fa-chevron-up` only.
These classes are effected by the parent having `collapsed` state.
expanded - when the associated content is expanded the toggle will look like this
collapsed - when the associated content is collapsed the class is added to the toggle and it will look like this.
Markup:
Weight: 100
Styleguide Component.Navigation.Toggle.Rotation
*/
/*
Toggle
Toggle elements of a collapse with user feed back of the icon rotating.
#targetName - the name of the target of the collapse
Markup:
Weight: -10
MarkupWrapperClasses: bg_white font_ui flex c_primary
Styleguide Component.Navigation.Toggle
*/
/*
Toggle Chevron
Toggle elements of a collapse with user feed back of the icon rotating.
#targetName - the name of the target of the collapse
Markup:
Weight: -80
MarkupWrapperClasses: bg_white font_ui flex c_primary
Styleguide Component.Navigation.Toggle.Chevron
*/
/*
Collapse Toggle Advanced
Toggle elements of a collapse with user feed back of the icon morphing.
#targetName - the name of the target of the collapse
Markup:
Weight: -100
MarkupWrapperClasses: bg_white font_ui flex c_primary
Styleguide Component.Navigation.Toggle.Advanced
*/
/*
Collapse Toggle Advanced with Square
Toggle elements of a collapse with user feed back of the icon morphing.
#targetName - the name of the target of the collapse
Markup:
Weight: -90
MarkupWrapperClasses: bg_white font_ui flex c_primary
Styleguide Component.Navigation.Toggle.AdvancedSquare
*/
/*
Accordion
In content accordions are styled differently to User interface accordions. The text of the header should allow for header tags to be added so the style should respond to the surrounding typography sizes.
Markup:
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Accordion
*/
/*
Accordion Child
Description: Sometimes the content needs be collapsed at a secondary level to make it scannable.
Markup:
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Accordion.Child
*/
/*
Accordion Nested Example
In content accordions are styled differently to User interface accordions. The text of the header should allow for header tags to be added so the style should respond to the surrounding typography sizes.
Markup:
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem.
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Accordion.Nested
*/
/*
Content Filler
This is a styleguide only element to show structure edges.
Markup:
Layout Zone: {{ modifier_class }}
MarkupWrapperClasses:
Weight: 100
Styleguide Page.Layouts.Filler
*/
/*
Grid Filler
This is a styleguide only element to show structure edges.
Markup:
Grid Area: {{ modifier_class }}
MarkupWrapperClasses:
Weight: 100
Styleguide Page.Layouts.GridFiller
*/
/*
Sub Grid Filler
This is a styleguide only element to show structure edges.
Markup:
Grid Area: {{ modifier_class }}
MarkupWrapperClasses:
Weight: 100
Styleguide Page.Layouts.SubGridFiller
*/
/*
Side Bar Area
This pattern is often used to push the sidebar bellow the main content area.
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Page.Layouts.Sidebar
*/
/*
Side Bar Area With Ad
This pattern is often used to push the sidebar bellow the main content area.
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Page.Layouts.SidebarAndAd
*/
/*
Agenda Item
Description:
Agenda items are sessions that are scheduled for a specific date, location, and time.
Weight:0
Styleguide Sub.Data.Agenda
*/
/*
Agenda ID
Description:
The ID given to an Agenda. This number is unique to the Agenda and is incremented for each new Agenda created.
Markup:
101
Weight:1
Styleguide Sub.Data.Agenda.ID
*/
/*
Channel Name
Description:
A channel is a visible category that an Agenda Item belongs to.
Markup:
Navigating Health Care Economics
Weight:1
Styleguide Sub.Data.Agenda.ChannelName
*/
/*
Live Time
Description:
The time at which a Agenda is live.
Markup: @ {{> Sub.Data.Agenda.ReleaseTime }} – {{> Sub.Data.Agenda.ReleaseTime }} EDT
FORMAT: 12 hour with 'a.m.'/'p.m' and Abbreviation of Timezone.
NOTE: The 'a.m.'/'p.m.' if the same should only occur on the last time mark. 11:15 a.m. - 11:30 a.m. should be shortened to 11:15 - 11:30 a.m.
Weight:0
Styleguide Sub.Data.Agenda.LiveTime
*/
/*
Release Time
Description:
The time at which a Agenda is item is scheduled to be active, give access, or start playing.
Markup: 11:15 a.m.
FORMAT: 12 hour with 'a.m.'/'p.m'.
Weight:0
Styleguide Sub.Data.Agenda.ReleaseTime
*/
/*
End Time
Description:
The time at which a Agenda item is scheduled to end.
Markup: 12:15 p.m.
FORMAT: 12 hour with 'a.m.'/'p.m'.
Weight:0
Styleguide Sub.Data.Agenda.EndTime
*/
/*
Live Date
Description:
There is usually a delay to when recording will make it to on demand. This is the time that recording will be available.
Markup: Saturday, Nov. 20, 2021
FORMAT: Day-of-Week, Month-Abbreviation. Day, Year
Weight:0
Styleguide Sub.Data.Agenda.LiveDate
*/
/*
On Demand Release Date and Time
Description:
There is usually a delay to when recording will make it to on demand. This is the time that recording will be available.
Markup: Saturday, Nov. 20, 2021 @ 8:00 p.m. EDT
FORMAT: Day-of-Week, Month-Abbreviation. Day, Year @ Hour:Minute 'a.m.'/'p.m' Abbreviation-of-Timezone.
NOTE: Use the simple abbreviation for the timezone without Daylight Savings Time. IE: ET not EDT or EST.
Weight:0
Styleguide Sub.Data.Agenda.onDemandReleaseTime
*/
/*
Session
A Session is a specific time slot in an Agenda. This could be either a single presentation or a series of presentations.
Markup:
Electrical Disorders - Rhythm and Conduction Disorders
Experiential: This is not an approved data point.
Weight:100
Styleguide Sub.Data.Session
*/
/*
Session Subtitle
The subtitle of a Session.
Markup:
Electrical Disorders - Rhythm and Conduction Disorders
Experiential: This is not an approved data point.
Weight:2
Styleguide Sub.Data.Session.Subtitle
*/
/*
Session Title
Description:
The title of a Session.
Markup:
Cardiovascular Update for the Clinician III
Weight:1
Styleguide Sub.Data.Session.Title
*/
/*
Session Identifier
Description:
The ID given to a session
Markup:
3652
Weight:0
Styleguide Sub.Data.Session.ID
*/
/*
Session Description
The description of a session.
Markup:
Maxime et ea adipisci voluptas. Omnis nobis recusandae alias eius sed ipsam aut. Ipsam dolore qui. Soluta laudantium quae assumenda ipsa tempore voluptas et culpa. Et praesentium quasi. Quas ratione vero aspernatur.
Weight:3
Styleguide Sub.Data.Session.Description
*/
/*
Presentation
Description:
A presentation is a single part of education that can not be subdivided.
Weight:0
Styleguide Sub.Data.Presentation
*/
/*
Presentation Description
Description:
The Description of a presentation
Markup:Drug Coated Balloons
Weight:500
Styleguide Sub.Data.Presentation.Description
*/
/*
Presentation Title
Description:
The title of a presentation
Markup:
New York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty
Weight:0
Styleguide Sub.Data.Presentation.Title
*/
/*
Presentation Live Time
Description:
The Live Time of a Presentation
Markup:
11:45 – 11:49 a.m. ET
FORMAT: 12 hour with 'a.m.'/'p.m' and Abbreviation of Timezone.
NOTE: The 'a.m.'/'p.m.' if the same should only occur on the last time mark. 11:15 a.m. - 11:30 a.m. should be shortened to 11:15 - 11:30 a.m.
Weight:0
Styleguide Sub.Data.Presentation.LiveTime
*/
/*
Presentation ID
Description:
Unique system generated identifier for a presentation.
Markup:
15612
Weight:0
Styleguide Sub.Data.Presentation.ID
*/
/*
Faculty
Description:
An educator who created or participated in a presentation
Weight:1000
Styleguide Sub.Data.Faculty
*/
/*
Photo
Description:
A photo of the faculty member
Markup:
MarkupWrapperClasses: max-w_30
FORMAT: 300px by 300px
Weight:0
Styleguide Sub.Data.Faculty.Photo
*/
/*
Full Name
The full name of the faculty member
Markup: Pepper H. Soda III, MD, FACC
FORMAT: First Name MI (if known) Last Name Suffix (Jr., Sr., the III ), Optional Degree, Optional ACC Honorifics, Optional Exceptions Honorifics
Weight:0
Styleguide Sub.Data.Faculty.FullName
*/
/*
Location
Description:
The location of the faculty member
Markup: New York, NY, USA
Weight:0
FORMAT: City, State, Country
NOTE: if the conference country is USA you can drop the country if it is USA.
Styleguide Sub.Data.Faculty.Location
*/
/*
Title
Description:
the roles of the faculty member within the session
Markup:
{{> "Sub.Data.Faculty.Title.InstitutionTitle" }}, {{> "Sub.Data.Faculty.Title.InstitutionDivision" }}, {{> "Sub.Data.Faculty.Title.Institution" }}
FORMAT: Institution Title, Institution Division, Institution
NOTE: This format is currently not being enforced.
Weight:100
Styleguide Sub.Data.Faculty.Title
*/
/*
Institution
Description:
Institution of the faculty member where they hold a title
Markup:
Mount SugarLoaf Hospital
Weight:101
Styleguide Sub.Data.Faculty.Title.Institution
*/
/*
Institution Division
Description:
The Division of the Institution of the faculty member where they hold a title
Markup:
Department of Cardiology
Weight:102
Styleguide Sub.Data.Faculty.Title.InstitutionDivision
*/
/*
Institutional Title
Description:
the roles of the faculty member within the session
Markup:
Physician-in-Chief
Weight:103
Styleguide Sub.Data.Faculty.Title.InstitutionTitle
*/
/*
Twitter Handle
Description:
The handle of the faculty member on twitter
Markup:
Tweat_DrSoda
Weight:0
Styleguide Sub.Data.Faculty.TwitterHandle
*/
/*
Role
Description:
the roles of the faculty member within the session
Markup:
Co-Chair
Weight:0
Styleguide Sub.Data.Faculty.Role
*/
/*
Bio
Description:
simple html text that describes the faculty member
Markup:
Omnis laboriosam vero dolorum harum nihil debitis placeat eligendi. Molestiae voluptatibus nemo eveniet. Vero ipsum eius. Alias sapiente quidem dolore dolorem atque alias est.
Weight:0
Styleguide Sub.Data.Faculty.Bio
*/
/*
Identification Number
Description:
this id can both be used to link to the faculty member's page, the member's image, and disclosures
Markup:
122154254
Weight:0
Styleguide Sub.Data.Faculty.ID
*/
/*
Sponsor
Description:
Sponsor are industry that has offered money or support to an event.
Weight:0
Styleguide Sub.Data.Sponsor
*/
/*
Name
Markup:
LogoIpsum
Weight:-100
Styleguide Sub.Data.Sponsor.Name
*/
/*
Address
Description:
Sponsor's Name
Markup:
Weight:20
Styleguide Sub.Data.Sponsor.Address
*/
/*
Logo
Description:
Logo of the Company
Markup:
MarkupWrapperClasses: max-w_40 relative h_20 w_100
Weight:10
Styleguide Sub.Data.Sponsor.Logo
*/
/*
Web Address
Markup:
http://wwww.LogoIpsum.com
Weight:25
Styleguide Sub.Data.Sponsor.WebAddress
*/
/*
Website Link
Markup:
Website
Weight:26
Styleguide Sub.Data.Sponsor.WebLink
*/
/*
Website Link
Markup:
More
Weight:26
Styleguide Sub.Data.Sponsor.MoreLink
*/
/*
PDF Link
Markup:
PDF
Weight:26
Styleguide Sub.Data.Sponsor.PDFLink
*/
/*
Description
Description: Short html description of the sponsor or the product.
Markup:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?
Ut reiciendis et possimus rerum animi.
Reprehenderit quia et eaque cupiditate illo explicabo architecto.
Et cumque distinctio maxime maiores aut labore ut est esse.
Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.
Weight:3
Styleguide Sub.Data.Sponsor.Description
*/
/*
Award
Description: Awards and Recognition
Weight:5
Styleguide Sub.Data.Award
*/
/*
Award Title
Description: Title of the award
Markup:
Pamela S. Douglas Distinguished Award for Leaderiship in Diversity and Inclusion
Weight:5
Styleguide Sub.Data.Award.Title
*/
/*
Award Description
Description: Description of the award can be html or text and may include a link.
Markup:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, consequuntur similique quibusdam deleniti fuga, ad laudantium vel assumenda incidunt impedit iure molestias! Et laboriosam nulla ut at officia ipsa quaerat?
Ut reiciendis et possimus rerum animi.
Reprehenderit quia et eaque cupiditate illo explicabo architecto.
Et cumque distinctio maxime maiores aut labore ut est esse.
Et quia saepe corporis explicabo consectetur voluptatem iure. Quos nostrum autem. Et omnis nostrum eius autem aut voluptas illum. Et autem velit facere explicabo reiciendis voluptas. Ipsum vel et nisi in iste molestias sit. Eos et aut est ullam.
Watch Video
Weight:5
Styleguide Sub.Data.Award.Description
*/
/*
Abstract
A Abstract is a specific time slot in an Agenda. This could be either a single presentation or a series of presentations.
Markup:
Electrical Disorders - Rhythm and Conduction Disorders
Experiential: This is not an approved data point.
Weight:100
Styleguide Sub.Data.Abstract
*/
/*
Abstract Subtitle
The subtitle of a Abstract.
Markup:
Electrical Disorders - Rhythm and Conduction Disorders
Experiential: This is not an approved data point.
Weight:2
Styleguide Sub.Data.Abstract.Subtitle
*/
/*
Abstract Title
Description:
The title of a Abstract.
Markup:
Abstract on Cardiovascular Update for the Clinician Success H2
Weight:1
Styleguide Sub.Data.Abstract.Title
*/
/*
Abstract Identifier
Description:
The ID given to a Abstract
Markup:
3652
Weight:0
Styleguide Sub.Data.Abstract.ID
*/
/*
Abstract Description
The description of a Abstract.
Markup:
Maxime et ea adipisci voluptas. Omnis nobis recusandae alias eius sed ipsam aut. Ipsam dolore qui. Soluta laudantium quae assumenda ipsa tempore voluptas et culpa. Et praesentium quasi. Quas ratione vero aspernatur.
Weight:3
Styleguide Sub.Data.Abstract.Description
*/
/*
Action Buttons Clear Search
This action button is used to clear the search filters and parameters.
Markup:
Weight:0
Styleguide Sub.ActionButtons.ClearSearch
*/
/*
Faceted Search
Facet Groups
Markup:
MarkupWrapperClasses: max-w_30 ul_none
NOTE: by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count. The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links.
SubComponents:
Sub.Search.FacetCheckbox - Single Facet Checkbox
Sub.CollapseIcon - Collapse Icon
Weight:0
Styleguide Sub.Search.Faceted
*/
/*
Faceted Search
Facet Groups
Markup:
MarkupWrapperClasses: max-w_30 ul_none
NOTE: by default the facet group is collapsed, and only loads the first 10 facets with the sort order of count. The more and less link disable when they have reached the limit of the group's length. The more link will load the next 10 facets. Collapsing the facet group will not change the exposed amount of facets revealed or hidden by the more and less links.
SubComponents:
Sub.Search.FacetCheckbox - Single Facet Checkbox
Sub.CollapseIcon - Collapse Icon
Weight:0
Styleguide Sub.Search.FacetedPrimary
*/
/*
Faceted Type Ahead
A type ahead search that adds a selected faceted filter to the search page. This is used when filters are exceptionally long and could be difficult to read when listed out. Authors, and mesh terms can use this pattern to add them as a filter to the search page.
Markup:
MarkupWrapperClasses:
Weight:100
Styleguide Sub.Search.Faceted.TypeAhead
*/
/*
Collapse/Expand
The collapse/expand icon is used to collapse and expand the facet group.
Markup:
collapse
Weight:0
Styleguide Sub.CollapseIcon
*/
/*
Collapse/Expand No Text
The collapse/expand icon is used to collapse and expand the facet group.
Markup:
Weight:0
Styleguide Sub.CollapseIcon.NoText
*/
/*
Facet Checkbox
The single checkbox for a facet.
Markup:
MarkupWrapperClasses: ul_none
Weight:0
Styleguide Sub.Search.FacetCheckbox
*/
/*
Facet Checkbox With Trash
The single checkbox that is generated by the type ahead filter search. The trash button removes the filter.
Markup:
MarkupWrapperClasses: ul_none
Weight:0
Styleguide Sub.Search.FacetCheckboxWithTrash
*/
/*
Search Bar
Simple Search Bar
Markup:
Program
MarkupWrapperClasses:
Weight: 0
Styleguide Sub.Search.Bar
*/
.jump-buttons_top {
top: 0;
top: 56px;
top: 3.5rem;
}
/*
Program Bar
Some events don't need a search bar the program bar remains because it is need to hide the jump links.
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Sub.Search.NoBar
*/
/*
Result Overview
Small strip of data that shows the number of results and the time it took to search.
Markup:
Weight:0
Styleguide Sub.Search.ResultOverview
*/
/*
Pagination
Pagination is used to navigate through the results.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Pagination
*/
/*
Faculty List
When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.
block - use block on the role type label to stack the faculty names.
inline-block - use inline-block on the role type label to keep all the faculty in wrapping single line.
Markup:
Data:
Sub.Data.Faculty.FullName - Full Name
Sub.Data.Faculty.FullName - Location
FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.
Weight:0
Styleguide Sub.FacultyList
*/
/*
Aux Session Faculty List
When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.
block - use block on the role type label to stack the faculty names.
inline-block - use inline-block on the role type label to keep all the faculty in wrapping single line.
Markup:
Role Type 1
Marty Little ( {{> "Sub.Data.Faculty.Location" }})
SubComponents:
Sub.Data.Faculty.FullName - Full Name
Sub.Data.Faculty.Location - Location
Weight:0
Styleguide Sub.FacultyList.AuxSession
*/
/*
Combined Faculty List
When a presentation is in a single state the combination of session roles and presentation roles are shown.
block - use block on the role type label to stack the faculty names.
inline-block - use inline-block on the role type label to keep all the faculty in wrapping single line.
Markup:
SubComponents:
Sub.Data.Faculty.FullName - Full Name
Sub.Data.Faculty.FullName - Location
Weight:0
Styleguide Sub.FacultyList.SessionAndPresentation
*/
/*
Session Faculty List
When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.
block - use block on the role type label to stack the faculty names.
inline-block - use inline-block on the role type label to keep all the faculty in wrapping single line.
Markup:
SubComponents:
Sub.Data.Faculty.FullName - Full Name
Sub.Data.Faculty.FullName - Location
Weight:0
Styleguide Sub.FacultyList.Session
*/
/*
No Location Faculty List
When you list non-event areas like Posters, and Abstracts the list removes the location of the person.
block - use block on the role type label to stack the faculty names.
inline-block - use inline-block on the role type label to keep all the faculty in wrapping single line.
Markup:
Role Type 1:
{{> "Sub.Data.Faculty.FullName" }}
Role Type 2:
Dianna Denesik III
Miguel Romaguera
Jeanette Franecki
SubComponents:
Sub.Data.Faculty.FullName - Full Name
Weight:0
Styleguide Sub.FacultyList.NoLocation
*/
/*
Member Profile Data
Data for the Member Profile that is visible for the user.
Markup:
Account Information
User Name:Regina Rutherford
Member ID:0152151214
Email:test@boo.com
Click the 'Member Help' button to send along your member information to help diagnose this issue.
MarkupWrapperClasses:
Weight:0
Styleguide Sub.System.MemberData
*/
/*
No Access Trouble Shooting
The instructions to the user when they land on the "No Access" to the page.
Markup:
No Access to [PRODUCT NAME]
[PRODUCT DESCRIPTION]. To read more about the details of [PRODUCT NAME] click the learn more button.
To purchase, please click the "Register" button below. Once you have completed your purchase, please wait 15 minutes to allow the system to process the information.
If you have just registered and you have waited 15 minutes and you have arrived here in error click the "Refresh Access" Button to get into [PRODUCT NAME].
MarkupWrapperClasses:
Weight:0
Styleguide Sub.System.AccessTroubleShooting
*/
/*
Class Lists
This is a combination of the classes that build common decorative elements or spacing in the design.
MarkupWrapperClasses:
Weight:99999
Styleguide Sub.ClassList
*/
/*
Body Classes
The list of classes used on the body tag
Markup:
bg_black-4 w_100 p_3:md p_2
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Body
*/
/*
Page Area
The list of classes used on the body tag
Markup:
p_2 p_3:md isolation_isolate br_radius bg_white-7
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Page
*/
/*
Inset Level_up
The list of classes used on the body tag
Markup:
inset-level_up bg_white-7 br_radius br_solid br_1 br_black-2
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Inset.up
*/
/*
Inset Level_up-1
The list of classes used on the body tag
Markup:
inset-level_up-1 bg_white br_radius shadow_overlap-light relative br_solid br_1 br_black-2
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Inset.up-1
*/
/*
Inset level_down
The list of classes used on the body tag
Markup:
inset-level_down bg_black-_05 shadow_emboss-light br_radius br_solid br_1 br_black-1
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Inset.down
*/
/*
Inset level_down-1
The list of classes used on the body tag
Markup:
inset-level_down-1 bg_black-1 shadow_emboss-light br_solid br_1 br_black-2 br_radius texture_light
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Inset.down-1
*/
/*
Inset level_down-2
The list of classes used on the body tag
Markup:
inset-level_down-2 bg_black-2 shadow_emboss-light br_solid br_1 br_black-3 br_radius texture_light
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Inset.down-2
*/
/*
Inset padding Level 0
The list of classes used on the body tag
Markup:
p_2 p_3:md
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Inset.padding
*/
/*
Inset padding Level 1
The list of classes used on the body tag
Markup:
p_2 p_3:md p_4:lg
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Inset.padding.up-1
*/
/*
Inset Margin Level -1
The list of classes used on the body tag
Markup:
m-x_n2 m-x_n3:md m-x_n4:lg
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Inset.margin.down-1
*/
/*
Inset padding Level 2
The list of classes used on the body tag
Markup:
p_3 p_4:lg
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Inset.padding.up-2
*/
/*
Inset padding Level 3
The list of classes used on the body tag
Markup:
p_4
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Inset.padding.up-3
*/
/*
Inset padding Level 4
The list of classes used on the body tag
Markup:
p_4 p_5:lg
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Inset.padding.up-4
*/
/*
Vertical padding Level 0
The list of classes used on the body tag
Markup:
p-y_2 p-y_3:md
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Vertical.padding
*/
/*
Vertical padding Level 1
The list of classes used on the body tag
Markup:
p-y_2 p-y_3:md p-y_4:lg
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Vertical.padding.up-1
*/
/*
Vertical padding Level 2
The list of classes used on the body tag
Markup:
p-y_3 p-y_4:lg
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Vertical.padding.up-2
*/
/*
Vertical padding Level 3
The list of classes used on the body tag
Markup:
p-y_4 p-y_5:lg
MarkupWrapperClasses:
Weight: 0
NOTE: Combination of classes used as a common decorators.
Styleguide Sub.ClassList.Vertical.padding.up-3
*/
/*
Border Top Primary
Used in dividing lists of items.
Markup:
br-t_1 br_primary-2 br_solid
MarkupWrapperClasses:
Weight:0
Styleguide Sub.ClassList.Border.PrimaryTop
*/
/*
Border Top Primary
Used in dividing lists of items.
Markup:
br-t_1 br_black-3 br_solid
MarkupWrapperClasses:
Weight:0
Styleguide Sub.ClassList.Border.BlackTop
*/
/*
Credits Chiclets
Credits show in the design when they are available to be claimed by the media they are on.
default - there is no default version of credits it is always a type.
CME - CME Credits
CNE - CNE Credits
Markup:
{{ modifier_class }}
MarkupWrapperClasses:p_2
Weight: 0
Styleguide Sub.Credit
*/
/*
Favorite/Bookmark Button
This button has an active and deactivate state depending on the users select of that media item.
default - plan button
active - the media item is selected
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Sub.ActionButtons.Favorite
*/
/*
Section Header
Section Headers are styled the same
default - plan header
Markup:
{{modifier_class}}
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Section.h2
*/
/*
Section Header Down
Section Headers are styled the same
default - plan header
Markup:
{{modifier_class}}
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Section.h3
*/
/*
Section Header
Section Headers are styled the same
default - plan header
Markup:
{{modifier_class}}
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Section.h2.with-padding
*/
/*
Section Header Down
Section Headers are styled the same
default - plan header
Markup:
{{modifier_class}}
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Section.h3.with-padding
*/
/*
Progress Player Bar
shows users where they left off with the player.
default - Has zero player
50 - 50% played
Markup:
Styleguide Sub.ProgressBar
*/
/*
Time Markers
shows users where they results can be found in the result.
Markup:
MarkupWrapperClasses:
ClassList:
Sub.ClassList.Inset.down-1 - Inset Down 1
Sub.ClassList.Inset.padding - Inset Padding
Weight:0
Styleguide Sub.Search.TimeMarkers
*/
/*
Carousel Custom Nav
Tiny Slider custom
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Sub.Carousel.CustomTools.Disabled
*/
/*
Duration
The length of the clip of video or all the of the lengths of the combined clips.
Markup:
15
minutes
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Sub.Sub.Data.Duration
*/
/*
Presentation Count
Number of presentations in the session.
Markup:
4
presentations
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Sub.Sub.Data.PresentationCount
*/
/*
Attachment Link
Link to attachments. it should state pdf or zip depending
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Sub.Sub.Data.AttachmentLink
*/
/*
Attachment Link ZIP
Link to attachments. it should state pdf or zip depending
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Sub.Sub.Data.AttachmentLink.ZIP
*/
/*
Like Buttons
This buttons are used to rate the videos and download the attachments.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Sub.ActionButtons.LikeAndAttachments
*/
/*
Breadcrumb First Item
The not first nor last item in the breadcrumb.
Markup:
MarkupWrapperClasses: ul_none
Weight:0
Styleguide Sub.Component.Navigation.Breadcrumb.FirstItem
*/
/*
Breadcrumb Not-First Item
The not first nor last item in the breadcrumb.
Search - Search Page
Session Name - Session Page
Markup:
MarkupWrapperClasses: ul_none
Weight:0
Styleguide Sub.Component.Navigation.Breadcrumb.NotFirstItem
*/
/*
Breadcrumb Last Item
The last Item in the Breadcrumb doesn't include a link to the page and is decorated as highlighted.
Search - Search Page
Session Name - Session Page
Markup:
Page Type Label{{modifier_class}}
MarkupWrapperClasses: ul_none
Weight:0
Styleguide Sub.Component.Navigation.Breadcrumb.LastItem
*/
/*
Credit Chiclets Horizontal
Horizontal list of credit chiclets.
Markup:
{{> 'Sub.Credit' modifier_class='CME' }}
{{> 'Sub.Credit' modifier_class='CNE' }}
{{> 'Sub.Credit' modifier_class='AAPA' }}
MarkupWrapperClasses:
SubComponents:
Sub.Credit - Credit Chiclet
Weight:0
Styleguide Sub.Credit.Chiclets.Horizontal
*/
/*
Auxiliary Data
Description: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.
Markup:
SubComponents:
Sub.Credits.NonAccredited - Non Accredited
Sub.FacultyList.AuxSession - Session Faculty Lists
Sub.Credit.Chiclets.Horizontal - Credit Chiclets Horizontal
Sub.Tags.Category - Category
Sub.Tags.Filter - Tags
ClassList:
Sub.ClassList.Border.PrimaryTop - Border Primary Top
Weight:0
Styleguide Sub.Player.AuxData
*/
/*
Category Tag
Category Tags are singular tags that divide content. An item can only have a single tag from a category group.
Markup:
Channel 1
{{>"Sub.Data.Agenda.ChannelName"}}
Weight:0
Styleguide Sub.Tags.Category
*/
/*
Filter Tags
Filter Tags are decorative tags that are used to filter content. Many tags from a single group can be applied to a single item.
Markup:
Tag Name 1
Daugherty - Larkin
relationships
web-readiness
Weight:0
Styleguide Sub.Tags.Filter
*/
/*
Footer Logo
The ACC Logo in the footer.
Markup:
American College of Cardiology
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Footer.Logo
*/
/*
Legal RoadBlock Sub Components
The legal roadblock is a page that stops the user when they haven't accepted the terms of use or any other legal agreements needed for the use of the product.
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Legal
*/
/*
Legal Content Block
A legal block will block a user from the program if they user has not signed it. If there is more then one user block all must be accepted before the user can proceed.
Markup:
ACC Anywhere 2022 Credit Information, Terms of Service, and License Agreement
The Terms of Service and License Agreement set forth below constitute a legal agreement (collectively, the "Agreement") between the American College of Cardiology Foundation ("ACCF") and You and your agents ("You" or “Your”) for the use of the ACC Anywhere 2022 (the "Product”).
By clicking on the Agree button below, and by using the Product, You accept and agree to be bound by all of the terms and conditions set forth in this Agreement. If You do not wish to accept the terms and conditions of this Agreement, You may not proceed to use the Product.
I hereby certify that I understand and agree to the terms stated in this Agreement and that this Agreement applies to my initial use of the Product and all other subsequent uses of the Product.
MarkupWrapperClasses:
ClassList:
Sub.ClassList.Vertical.padding.up-1 - Vertical Padding Up 1
Sub.ClassList.Border.PrimaryTop - Border Primary Top
Weight:0
Styleguide Sub.Legal.ContentBlock
*/
/*
Legal Attestation Statement
This statement is used to attest that the user has read and accepted the legal agreement. This follows all Legal Content Blocks. Clicking the button will flip the `btn-secondary` state to 'btn-sucess active'
.btn-success.active - the accepted state
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Legal.AgreeButton
*/
/*
Search Filter Rail
The filter box on the search page.
Markup:
MarkupWrapperClasses:
Weight: -1000
Styleguide Sub.Search.FilterRail
*/
/*
Youtube Embed Playlist
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Sub.YoutubeEmbedPlaylist
*/
@media only screen and (width > 1024px) {
.jump-buttons_top {
top: 0;
}
}
/*
Layouts
This app design is based on levels of inset and overlaps in grid areas.
MarkupWrapperClasses:
Weight: 100
Styleguide Page.Layouts
*/
/*
Base Grid Areas
The library base is a grid system that is used for the library page.
Markup:
MarkupWrapperClasses:
NOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..
Weight:0
Styleguide Page.Pages.NoFilter
*/
/*
Search Page
The sub pages have a common layouts.
Markup:
{{> "Program.Presentation.Search" modifier_class="Myocardial Clinical Blood Vessel Side Effect " }}
MarkupWrapperClasses:
SubComponents:
Component.Navigation.Breadcrumb - Breadcrumb Bar
NOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..
Weight:0
Styleguide Page.Pages.Search
*/
/*
Session Data Page
The sub pages have a common layouts.
Markup:
MarkupWrapperClasses:
NOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..
Weight:0
Styleguide Page.Pages.Session
*/
/*
Presentation Player
The sub pages have a common layouts.
Markup:
MarkupWrapperClasses:
NOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..
Weight:0
Styleguide Page.Pages.Presentation
*/
/*
Credit Page
Credits Pages
Markup:
LINK TO PROTOTYPE FOR THIS PAGE
MarkupWrapperClasses:
NOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..
Weight:1000
Styleguide Page.Pages.Credit
*/
/*
Legal Roadblock
A roadblock page that forces users to log in to view and agree to the legal terms of the product.
Markup:
ACC Anywhere 2022 Credit Information, Terms of Service, and License Agreement
The Terms of Service and License Agreement set forth below constitute a legal agreement (collectively, the "Agreement") between the American College of Cardiology Foundation ("ACCF") and You and your agents ("You" or “Your”) for the use of the ACC Anywhere 2022 (the "Product”).
By clicking on the Agree button below, and by using the Product, You accept and agree to be bound by all of the terms and conditions set forth in this Agreement. If You do not wish to accept the terms and conditions of this Agreement, You may not proceed to use the Product.
I hereby certify that I understand and agree to the terms stated in this Agreement and that this Agreement applies to my initial use of the Product and all other subsequent uses of the Product.
Iure ut ratione magnam similique delectus deserunt occaecati.
Alias nulla qui eos fuga eos eligendi aut tempora. Nisi dicta aut non totam illo consequuntur. Aut aut voluptas est aspernatur placeat distinctio similique dolore laboriosam. Iure velit doloremque dolorum maiores praesentium. Animi exercitationem reiciendis incidunt rerum. Quam consequatur maiores officiis sit enim quidem.Libero dolores aspernatur consequatur labore consequatur sint sint atque. Quo commodi quod repellendus laborum natus amet. Enim aliquam sunt. Nesciunt repellat provident mollitia. Quis nemo modi. Unde ut nisi. Laboriosam et natus saepe a enim aut in voluptates quia. Sed libero alias voluptatum soluta accusantium nesciunt commodi. Eaque cumque quos neque cumque maiores.
You can continue when all legal terms are agreed to.
MarkupWrapperClasses:
Weight:-100
Styleguide Page.Pages.OUTSIDE_APP.Legal
*/
/*
No Access
If a user is logged in but does not have access to the page, they will be redirected to this page.
Markup:
Sorry, but it appears this account doesn't have access to [PRODUCT NAME ShortCode]
{{> 'Sub.System.AccessTroubleShooting'}}
MarkupWrapperClasses:
Weight:-50
Styleguide Page.Pages.OUTSIDE_APP.NoAccess
*/
/*
EMPTY OUTSIDE APP TEMPLATE
There are some pages that live outside of access to the product. They are used to provide information to the user. This is the template for those pages.
Markup:
No Access
We are sorry you don't seem to have access to this product.
MarkupWrapperClasses:
Weight:-50
Styleguide Page.Pages.OUTSIDE_APP
*/
/*
Home
The sub pages have a common layouts.
Markup:
MarkupWrapperClasses:
NOTE: This page will not render 100% correctly because it is calculated based on the whole viewport and the styleguide has it wrapped in page dynamics..
Weight:0
Styleguide Page.Pages.Home
*/
/*
Header
Home page branding splash with ka site search.
Markup:
{{> "Sub.Section.HeaderPanel"}}
MarkupWrapperClasses:
SubComponent:
Sub.Section.HeaderPanel - Search Bar
Weight:0
Styleguide Structures.Home.Header
*/
/*
Home Search Link Inset
A central interaction point for the user on the homepage.
Markup:
MarkupWrapperClasses:
SubComponents:
Sub.Section.SearchBar - Search Bar with `disabled` Class
Component.Navigation.Home.Utility - Quick Links
ClassList:
Sub.ClassList.Inset.up-1 - Inset up 1
Sub.ClassList.Inset.padding.up-4 - Padding up 4
Weight:0
Styleguide Sub.Section.HeaderPanel
*/
/*
Home Search Bar
The Search Bar is disabled on the Home Page when there is no content in the input field.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Section.SearchBar
*/
/*
Section Footer
Section footer links to the Search Collection Page.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Section.Footer
*/
/*
Carousel
Horizontal Carousels to have discoverable areas on the home pages.
Markup:
https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.9.2/min/tiny-slider.js
MarkupWrapperClasses:
Weight: 0
Styleguide Structures.Home.TinySlider
*/
/*
Carousel Empty State
The empty state of the carousel
Markup:
You don't have any previously {{modifier_class}} presentations.
This collection is based off of your watching history. Come back here when you want to review or re-watch what you have previously viewed.
MarkupWrapperClasses: main-area-offset p_2 p-x_5:md p-y_4:md isolation_isolate br_radius bg_white-7
NOTE: container: '#SliderContinueWatching', controlsContainer: "#slider-customize-controls-vertical" need to be unique to the slider.
caution: This item is not finalized and might be subject to change
Weight: 0
Styleguide Structures.Home.ContinuePlaying
*/
/*
Main Nav
THe library because it is an app uses a different style of nav which is more align to streaming software.
Markup:
MarkupWrapperClasses:
Weight: 0
NOTE: This design highly depends on Javascript.There are styles in the pattern that should be ignored because they are just to make the pattern show up correctly in documentation. https://raw.githubusercontent.com/ACC-Style/Arches/master/docs/js/library/library.main-nav.js
Styleguide Component.Navigation.MainNav
*/
/*
Home Utility Nav
Small nav under the home page to quick link users to helpful pieces of content
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Component.Navigation.Home.Utility
*/
/*
Breadcrumb Bar
Basic Nav that helps the user orientate the context of the page.
Markup:
MarkupWrapperClasses:
ClassList:
Sub.ClassList.Inset.padding.up-1 - Inset Padding Up 1
Sub.ClassList.Inset.up - Inset Level Up Decoration
SubComponents:
Sub.Component.Navigation.Breadcrumb.FirstItem - First item
Sub.Component.Navigation.Breadcrumb.NotFirstItem - Not first item
Sub.Component.Navigation.Breadcrumb.LastItem - Last item
Weight:0
Styleguide Component.Navigation.Breadcrumb
*/
/*
Footer Links
The Apps Footer.
Markup:
ClassList:
Sub.ClassList.Inset.padding.up-1 - Inset Padding Up 1
MarkupWrapperClasses:
Weight: 0
Styleguide Component.Navigation.Footer.Links
*/
/*
Sessions - Homepage
Session Designs on the home page.
Markup:
caution: This item is not finalized and might be subject to change
MarkupWrapperClasses:
Data:
Sub.Data.Session.Title - Title
SubComponents:
Sub.Credits - Credits
Weight: 0
Styleguide Program.Session.Home_v2
*/
/*
Sessions - Search
Session Designs on the home page.
Markup:
MarkupWrapperClasses:
Data:
Sub.Data.Session.Title - Title
SubComponents:
Sub.Credits - Credits
Weight: 0
Styleguide Program.Session.Search
*/
/*
Presentation - Home
Presentation designs on the home page.
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Data:
Sub.Data.Session.Title - Session Title
Sub.Data.Presentation.Title - Presentation Title
SubComponents:
Sub.FacultyList - Faculty List
Sub.ProgressBar - Progress
Sub.Credits - Credits
Styleguide Program.Presentation.Home
*/
/*
Presentation - Home Version 2
Presentation designs on the home page.
Markup:
caution: This item is not finalized and might be subject to change
MarkupWrapperClasses: ul_none
Weight: 0
Data:
Sub.Data.Session.Title - Session Title
Sub.Data.Presentation.Title - Presentation Title
SubComponents:
Sub.FacultyList - Faculty List
Sub.ProgressBar - Progress
Sub.Credits - Credits
Styleguide Program.Presentation.Home_V2
*/
/*
Presentation - Search
Presentation designs on the Search page.
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Data:
Sub.Data.Session.Title - Session Title
Sub.Data.Presentation.Title - Presentation Title
SubComponents:
Sub.FacultyList - Faculty List
Sub.Credits - Credits
Sub.Search.TimeMarkers - Time Markers
Styleguide Program.Presentation.CondensedPlaying
*/
/*
Presentation - Condensed Playable
Presentation designs on the Search page.
Markup:
Presentation of the findings {{ modifier_class }}
MarkupWrapperClasses: ul_none
Weight: 0
Data:
Sub.Data.Session.Title - Session Title
Sub.Data.Presentation.Title - Presentation Title
SubComponents:
Sub.FacultyList - Faculty List
Sub.Credits - Credits
Sub.Search.TimeMarkers - Time Markers
Styleguide Program.Presentation.Condensed.Playable
*/
/*
Tabs
A simple way to show small groups of content that should have the same level of reading hierarchy.
Markup:
consectetur adipisicing elit
Lorem ipsum dolor sit amet. Quisquam maxime consectetur, nisi sed ea perspiciatis a sit porro laboriosam ab sequi est quas optio dolorum at maiores quis incidunt inventore.
Lorem ipsum dolor sit
Amet consectetur adipisicing elit. Vero enim provident consequuntur perspiciatis. Eligendi placeat consequuntur veniam quidem temporibus labore quisquam commodi rem error cumque fugit suscipit nulla, excepturi eos.
MarkupWrapperClasses:
SubComponents:
Sub.Component.Structures.Tabs.Tab.LinkActives - Active Tab
Sub.Component.Structures.Tabs.Tab.Link - Tab
Sub.Component.Structures.Tabs.Tab.LinkDisabled - Disabled Tab
Caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Structures.Tabs.
*/
/*
Simple Tabs: Dark Mode
Reverse Colored Tabs for when on dark background
Markup:
Weight: 0
Styleguide Sub.Component.Structures.Tabs.TabDark
*/
/*
Tab Dark: Active
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4
Weight:0
Styleguide Sub.Component.Structures.Tabs.TabDark.Link
*/
/*
Tab Dark: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4
Weight:0
Styleguide Sub.Component.Structures.Tabs.TabDark.LinkDisabled
*/
/*
Tab: Active
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light
Weight:0
Styleguide Sub.Component.Structures.Tabs.Tab.LinkActive
*/
/*
Tab: Basic
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light
Weight:0
Styleguide Sub.Component.Structures.Tabs.Tab.Link
*/
/*
Tab: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light
Weight:0
Styleguide Sub.Component.Structures.Tabs.Tab.LinkDisabled
*/
.filter_blur {
backdrop-filter: blur(5px);
}
.h\:shadow_overlap-light:hover,.a\:shadow_overlap-light.active {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.05), 0 2px 4px rgba(0, 0, 0, 0.3), 1px 5px 5px rgba(0, 0, 0, 0.01);
}
@media only screen and (min-width: 768px) {
.nav-maxed {
max-width: clamp(20em, 25rem, 100%);
}
.nav-mined {
max-width: 4rem;
}
}
html:not([data-scroll="0"]) #navigation_mobile .label {
height: 0;
opacity: 0 !important;
}
.tns-holder-design {
width: 30%;
}
body {
font-size: 16px;
font-size: 1rem;
font-family: var(--font-family_copy);
}
h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-weight: var(--font_regular);
font-family: var(--font-family_display);
}
h6, .h6 {
font-weight: var(--font_bold);
}
p {
line-height: 1.35;
}
ul,
ol {
line-height: 1.6;
}
kbd,
code,
samp,
var {
font-family: var(--font-family_mono);
}
form {
border-color: rgba(19, 18, 18, 0.38);
}
label {
font-weight: var(--font_bold);
}
label,input,
select,
textarea,
legend,
fieldset,
button {
color: currentColor;
font-size: 16px;
font-size: 1rem;
font-family: var(--font-family_ui);
}
input,
select,
textarea,
legend,
fieldset,
button {
box-sizing: border-box;
}
button,
[type=button],
[type=submit],
[type=reset], [type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=url],
[type=week],
[type=time], select,
textarea {
min-height: 1.5em;
padding: 4px 8px;
padding: 0.25rem 0.5rem;
border-width: thin;
border-radius: 6px;
border-color: rgba(19, 18, 18, 0.25);
line-height: 1.6;
}
input:focus,
select:focus,
textarea:focus {
outline-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
box-shadow: inset 1px 1px 2px 2px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.12), inset 2px 2px 3px 0px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1), inset -2px -2px 3px 0px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
}
[type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=url],
[type=week],
[type=time], select,
textarea {
width: 100%;
}
input,
select,
textarea,
legend,
fieldset,
button {
box-sizing: border-box;
}
[type=color] {
width: 24px;
width: 1.5rem;
height: 24px;
height: 1.5rem;
padding: 0;
border-color: rgba(19, 18, 18, 0.25);
}
[type=radio],
[type=checkbox] {
padding-left: 8px;
padding-left: 0.5rem;
}
button,
[type=button],
[type=submit],
[type=reset] {
width: auto;
border-radius: 6px;
}
fieldset {
margin: 8px 0;
margin: 0.5rem 0;
padding: 8px 16px;
padding: 0.5rem 1rem;
border-color: rgba(19, 18, 18, 0.1);
}
/*
Basic Inputs
Arches is strongly based on utility classes styling everything so it commonly just builds on either the base of the browser defaults or the defaults of the framework that is built on. This is a kitchen sink of html elements so you can see how this variation will effect html. There is No basic styling around the pure DOM with the utility class only. To get full brand styling use a framework based version of arches.
Styleguide HTML.Inputs
*/
/*
Text Inputs
Bellow is the comparison of using the basic Html input types with the utility classes only vs using the bootstrap pattern for the input.
Markup:
Utility Class
Bootstrap
Styleguide HTML.Inputs.Text
*/
/*
Inputs UC
Utility Class only build inputs
Markup:
Weight:100
Styleguide HTML.Inputs.All
*/
/*
Table
Basic Tables with this variation of Arches. Please note that the html can have a different look depending on the brand or the framework the variation is built on.
Tables can have captions now.
Person
Number
Third Column
Someone Lastname
900
Nullam quis risus eget urna mollis ornare vel eu leo.
Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person
1500
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One
2800
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
Styleguide HTML.BasicTable
*/
table {
font-size: 16px;
font-size: 1rem;
font-family: var(--font-family_ui);
}
table caption {
padding: 8px;
padding: 0.5rem;
}
th,
td {
padding: 4px 8px;
padding: 0.25rem 0.5rem;
text-align: start;
}
thead {
padding: 4px 8px 0;
padding: 0.25rem 0.5rem 0;
font-weight: var(--font_bold);
}
tbody {
padding: 0 8px;
padding: 0 0.5rem;
}
tfoot,
caption {
padding: 0 8px 4px;
padding: 0 0.5rem 0.25rem;
font-size: 14.222px;
font-size: 0.8888888889rem;
}
/*
Design Base
Arches is design inspired by a pad of paper in the hand. Subtle Textures and Layer shadows keep the readability very high.
Weight: -1000
Styleguide DesignBase
*/
/*
Fonts
The ACC is focused on stable, conservative, clean fonts. Roboto Slab is the standard serif fonts across all products at the ACC.
Styleguide DesignBase.Fonts
*/
/*
Accent Roboto Slab
A beautiful Accent font that shows a complexity and texture to the fonts used in the design.
Roboto Slab
font-family: "Roboto Slab","Times New Roman","Lucida Bright",Georgia,serif, "slab"
RS
Accent Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Weight: -10
Styleguide DesignBase.Fonts.Accent
*/
/*
Display: Maven Pro
A Slick font that has a slight interest used for headers and UI.
Maven Pro
font-family: "Maven Pro","Muli","Open Sans",Verdana,Helvetica,sans-serif
MP
Display Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Weight: -5
Styleguide DesignBase.Fonts.Display
*/
/*
Copy: Open Sans
A clean font for content and text of none UI elements.
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Weight: 1
Styleguide DesignBase.Fonts.UI
*/
/*
Icons: Font Awesome
The American College of Cardiology (ACC) employs Font Awesome icons for its websites and mobile applications.
The organization uses version 6 of Font Awesome's icon sets.
The ACC recognizes that icons convey meaning and has developed an icon dictionary to ensure consistent usage of icons throughout its digital platforms. This approach enhances the user experience by providing clear and concise communication through the use of symbols, while the Font Awesome library enables the ACC to quickly and efficiently incorporate high-quality icons into its digital content.
Styleguide DesignBase.IconsTrue
*/
/*
ACC's Blue
$acc-blue - #004176; acc
Styleguide DesignBase.Colors.ACC
*/
/*
Theme Colors
Colors are based off of the ACC Scrub Colors.
map-get($theme-palette, primary) - #198dae; primary
map-get($theme-palette, secondary) - #676a72; secondary
map-get($theme-palette, shade) - #878585; shade
map-get($theme-palette, accent) - #16a385; accent
map-get($theme-palette, info) - #a3988c; info
map-get($theme-palette, highlight) - #7742bd; highlight
Weight:-1000
Styleguide DesignBase.Colors
*/
/*
Action Colors
Actionable colors used to respond to user inputs and messaging.
map-get($theme-palette, alert) - #dd1a1a; alert
map-get($theme-palette, warning) - #da8210; warning
map-get($theme-palette, success) - #078a2e; success
map-get($theme-palette, navigation) - #2b58c0; navigation
Styleguide DesignBase.Colors.Actions
*/
/*
Color Coding
Color Coding is used in specific products and concepts to illustrate cohesion and collections. All of these color codes are used universally through out the college and have an associated meaning. All of these colors are just used for reference and have no associated decorator classes. You must include the the associated color-code_x.css have access to utlity classes that will color using the bellow colors.
Styleguide DesignBase.Colors.ColorCoding
*/
/*
COR Colors
(COR) Class of Recommendation is a color collect used in Guideline recommendations.
$cor-green - #6fc284; I
$cor-yellow - #ffd44f; IIA
$cor-yellow-orange - #faa74b; IIA
$cor-orange - #f15d4c;III and III-NoHarm
$cor-red - #ed1c00; III-harm
Weight: 10
Styleguide DesignBase.Colors.ColorCoding.COR
*/
/*
LOE Colors
(LOE) level of Evidence is a color collect used in Guideline recommendations.
$loe-dark-blue - rgb(62, 111, 183);LOE A
$loe-mid-blue - rgb(101, 156, 211);LOE B-R
$loe-light-blue - rgb(161, 193, 230);LOE B-NR
$loe-pale-blue - rgb(181, 213, 229); LOE C
Weight: 10
Styleguide DesignBase.Colors.ColorCoding.LOE
*/
/*
Credit Type Color Coding
Credit Types in the ACC have a specific color coding.
$credit-AAPA - #e8c536; AAPA: American Academy of Physician Assistants (AAPA) Category 1 CME Credit
$credit-ABP - #007a5b; ABP-MOC: American Board of Pediatrics
$credit-ABPMOCII - #0b6d4c; ABP-MOC 2: American Board of Pediatrics MOC 2
$credit-ABPMOCIV - #105a3b; ABP-MOC 4: American Board of Pediatrics MOC 4
$credit-ATCEU - #775744; ATCEU: Athletic Trainer Continuing Education Unit
$credit-CE - #a8a8a8; CE: Continuing CCA\Tech Education
$credit-CME - #00a15b; CME: AMA PRA Category 1TM Credit(s)
$credit-CNE - #198dae; CNE: Continuing Nurse Education
$credit-CNErx - #52549e; CNErx: Continuing Nursing Education Pharmaceutical
$credit-COP - #775891; COP: Certificate of Participation
$credit-CPE - #992e2e; CPE: Continuing Pharmacy Education
$credit-ECME - #d16528; ECME: European Board for Accreditation in Cardiology (EBAC) External CME Credit
$credit-IPCE - #6c36b3; IPCE: Interprofessional Continuing Education Credit
$credit-MOCII - #9a1267; MOC II: ABIM MOC Part II
$credit-MOCIV - #d3248d; MOC IV: ABIM MOC Part IV
Weight: 0
Styleguide DesignBase.Colors.ColorCoding.Credits
*/
/*
Clinical Pathway Colors
Each of the clinical pathways has a distinctive color. These colors are used to give a distinct theme to our clinical apps, marketing, pdf's and tools.
$pathway-acute-coronary-syndromes - #009974; Acute Coronary Syndromes
$pathway-arrhythmias-EP - #005b37; arrhythmias and Clinical EP
$pathway-congenital-heart-disease - #fdb918; Congenital Heart Disease
$pathway-ecg-stress-test - #d9691f; Standard ECG, Stress Test
$pathway-heart-failure - #410d49; Heart Failure and Cardiomyopathies
$pathway-invasive-cardiology - #c8b02f; Invasive Cardiology Angiography and Intervention
$pathway-noninvasive-cardiology - #947b33; Noninvasive Cardiology
$pathway-pandemic - #8e2582; Pandemic "Covid"
$pathway-pericardial - #0079ad; pericardial Disease
$pathway-prevention - #a01d51; Prevention
$pathway-pulmonary-hypertension - #d60e7e; Pulmonary Hypertension and Venous Thromboembolic Disease
$pathway-special - #00b6f1; Special
$pathway-stable-ischemic-heart-disease - #0f3e65; Stable ischemic Heart Disease
$pathway-valvular-heart-disease - #4f4190; Valvular Heart Disease
$pathway-vascular-medicine - #ae171c; Vascular Medicine
Weight: -1
Styleguide DesignBase.Colors.ColorCoding.Pathways
*/
/*
Registry CC
Credit Type Color codes in the ACC have a specific color coding.
$registry-cpmi - #f22418; Chest Pain MI Registry
$registry-afib - #ffb300; AFib Ablation Registry
$registry-cathpci - #0086d5; CathPCI Registry
$registry-icd - #80b800; ICD Registry
$registry-impact - #4e1f73; IMPACT Registry
$registry-pinnacle-primary - #0e4f1b; PINNACLE Registry (Primary)
$registry-pinnacle-accent - #b3c4c4; PINNACLE Registry (Accent)
$registry-focus - #d6560d; Patient Navigator Focus MI
$registry-pcibleeding - #c0268e; Reducing Risk PCI Bleeding
$registry-laao - #00667a; LAAO Registry
$registry-pvi - #00947f; PVI Registry
$registry-auxdata - #04adad; Auxiliar Data Collection
$registry-ststvt - #a20062; STS ACC TVT Registry
$registry-diabetes - #7893b8; Diabetes Collaborative
Weight: 2000
Styleguide DesignBase.Colors.ColorCoding.Registry
*/
/*
Journal
Journals of JACC have specific branding colors.
$journal-jc - #002e5a; Journal of the American College of Cardiology: (JC)
$journal-adv - #0000FF; JACC: Advances: (JC-ADV)
$journal-asia - #ec2939; JACC: Asia: (JC-ASIA)
$journal-tran - #1788c2; JACC: Basic to Translational Science: (JC-TRAN)
$journal-cvonc - #00ae81; JACC: CardioOncology: (JC-CVONC)
$journal-case - #f37321; JACC: Case Reports: (JC-CASE)
$journal-ep - #8a5e96; JACC: Clinical Electrophysiology: (JC-EP)
$journal-hf - #991326; JACC: Heart Failure: (JC-HF)
$journal-invt - #038e92; JACC: Cardiovascular Interventions: (JC-INVT)
$journal-imag - #c18a0e; JACC: Cardiovascular Imaging: (JC-IMAG)
Weight: 2000
Styleguide DesignBase.Colors.ColorCoding.Journals
*/
/*
Social Network Colors
Each of the social networks has a distinctive color. These colors are used to give a distinct theme to the social nav that is in different locations.
$twitter - #000; twitter
$facebook - #3b5998; facebook
$linkedin - #007bb6; linkedin
$apple-store - #ea4cc0; apple-store
$google-play - #689f38; google-play
$youtube - #bb0000; youtube
Weight: 100
Styleguide DesignBase.Colors.ColorCoding.Social Networks
*/
/*
Textures
All textures in the Arches design are a subtle variation of transparent. Allowing for colors to bleed through from behind. Different textures have intentions or are reserved for certain usagaes.
.texture_light - Light textures is reserved for the base of a page where it can gve a soft area for text or cards to live on top of.
.texture_medium - medium texture are used for area that are hidden away. Collapsable navs, areas, or sidebars ususaly use the medium texture.
.texture_dust - Dust is the most transparent texture allowing for the color of the background to show through the most. This is used for the painted tops of cards, or score bars.
.texture_dark - This texture predominatly used on the footer. Its rich black will alway requrie reversed text and buttons to be readable.
.texture_cross - A mostly transparent cross texture used for alternating rows of content when a little extra texture is needed.
.texture_disabled - This texture is used to paint disabled buttons and ui items giving it a greyed and X'ed out appearand.
Markup:
{{modifier_class}} with a light primary color background
Styleguide DesignBase.Textures
*/
/*
primary: Color Variations
The Modified versions of the primary color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.primary
*/
/*
secondary: Color Variations
The Modified versions of the secondary color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.secondary
*/
/*
success: Color Variations
The Modified versions of the success color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.success
*/
/*
shade: Color Variations
The Modified versions of the shade color from this theme
Markup:
shade-n5
HEX:#141414
RGB:20, 20, 20
HSL:0deg ,9.2561983471%, 7.8823529412%
shade-n4
HEX:#292828
RGB:41, 40, 40
HSL:0deg ,7.7685950413%, 15.7647058824%
shade-n3
HEX:#444242
RGB:68, 66, 66
HSL:0deg ,5.7851239669%, 26.2745098039%
shade-n2
HEX:#5f5d5d
RGB:95, 93, 93
HSL:0deg ,3.8016528926%, 36.7843137255%
shade-n1
HEX:#737171
RGB:115, 113, 113
HSL:0deg ,2.3140495868%, 44.6666666667%
shade-0
HEX:#878585
RGB:135, 133, 133
HSL:0deg, 0.826446281%, 52.5490196078%
shade-1
HEX:#939191
RGB:147, 145, 145
HSL:0deg ,0.7851239669%, 57.2941176471%
shade-2
HEX:#a5a4a4
RGB:165, 164, 164
HSL:0deg ,0.7231404959%, 64.4117647059%
shade-3
HEX:#c3c2c2
RGB:195, 194, 194
HSL:0deg ,0.6198347107%, 76.2745098039%
shade-4
HEX:#e1e1e1
RGB:225, 225, 225
HSL:0deg ,0.5165289256%, 88.137254902%
shade-5
HEX:#f3f3f3
RGB:243, 243, 243
HSL:0deg ,0.4545454545%, 95.2549019608%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.shade
*/
/*
warning: Color Variations
The Modified versions of the warning color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.warning
*/
/*
alert: Color Variations
The Modified versions of the alert color from this theme
Markup:
alert-n5
HEX:#210404
RGB:33, 4, 4
HSL:0deg ,80.7368421053%, 7.2647058824%
alert-n4
HEX:#420808
RGB:66, 8, 8
HSL:0deg ,80.4210526316%, 14.5294117647%
alert-n3
HEX:#6f0d0d
RGB:111, 13, 13
HSL:0deg ,80%, 24.2156862745%
alert-n2
HEX:#9b1212
RGB:155, 18, 18
HSL:0deg ,79.5789473684%, 33.9019607843%
alert-n1
HEX:#bc1616
RGB:188, 22, 22
HSL:0deg ,79.2631578947%, 41.1666666667%
alert-0
HEX:#dd1a1a
RGB:221, 26, 26
HSL:0deg, 78.9473684211%, 48.431372549%
alert-1
HEX:#e62b2b
RGB:230, 43, 43
HSL:0deg ,75%, 53.5882352941%
alert-2
HEX:#ea4f4f
RGB:234, 79, 79
HSL:0deg ,69.0789473684%, 61.3235294118%
alert-3
HEX:#f18989
RGB:241, 137, 137
HSL:0deg ,59.2105263158%, 74.2156862745%
alert-4
HEX:#f8c4c4
RGB:248, 196, 196
HSL:0deg ,49.3421052632%, 87.1078431373%
alert-5
HEX:#fce7e7
RGB:252, 231, 231
HSL:0deg ,43.4210526316%, 94.8431372549%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.alert
*/
/*
navigation: Color Variations
The Modified versions of the navigation color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.navigation
*/
/*
accent: Color Variations
The Modified versions of the accent color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.accent
*/
/*
info: Color Variations
The Modified versions of the info color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.info
*/
/*
highlight: Color Variations
The Modified versions of the highlight color from this theme
Markup:
highlight-n5
HEX:#120a1c
RGB:18, 10, 28
HSL:265.8536585366deg ,52.6352941176%, 7.5%
highlight-n4
HEX:#241439
RGB:36, 20, 57
HSL:265.8536585366deg ,51.8588235294%, 15%
highlight-n3
HEX:#3c215f
RGB:60, 33, 95
HSL:265.8536585366deg ,50.8235294118%, 25%
highlight-n2
HEX:#532e84
RGB:83, 46, 132
HSL:265.8536585366deg ,49.7882352941%, 35%
highlight-n1
HEX:#6538a1
RGB:101, 56, 161
HSL:265.8536585366deg ,49.0117647059%, 42.5%
highlight-0
HEX:#7742bd
RGB:119, 66, 189
HSL:265.8536585366deg, 48.2352941176%, 50%
highlight-1
HEX:#8555c4
RGB:133, 85, 196
HSL:265.8536585366deg ,45.8235294118%, 55%
highlight-2
HEX:#9971ce
RGB:153, 113, 206
HSL:265.8536585366deg ,42.2058823529%, 62.5%
highlight-3
HEX:#bba1de
RGB:187, 161, 222
HSL:265.8536585366deg ,36.1764705882%, 75%
highlight-4
HEX:#ddd0ef
RGB:221, 208, 239
HSL:265.8536585366deg ,30.1470588235%, 87.5%
highlight-5
HEX:#f1ecf8
RGB:241, 236, 248
HSL:265.8536585366deg ,26.5294117647%, 95%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.highlight
*/
/*
acc: Color Variations
The Modified versions of the acc color from this theme
Markup:
acc-n5
HEX:#000a12
RGB:0, 10, 18
HSL:206.9491525424deg ,100%, 3.4705882353%
acc-n4
HEX:#001423
RGB:0, 20, 35
HSL:206.9491525424deg ,100%, 6.9411764706%
acc-n3
HEX:#00213b
RGB:0, 33, 59
HSL:206.9491525424deg ,100%, 11.568627451%
acc-n2
HEX:#002e53
RGB:0, 46, 83
HSL:206.9491525424deg ,100%, 16.1960784314%
acc-n1
HEX:#003764
RGB:0, 55, 100
HSL:206.9491525424deg ,100%, 19.6666666667%
acc-0
HEX:#004176
RGB:0, 65, 118
HSL:206.9491525424deg, 100%, 23.137254902%
acc-1
HEX:#00579d
RGB:0, 87, 157
HSL:206.9491525424deg ,95%, 30.8235294118%
acc-2
HEX:#0077d8
RGB:0, 119, 216
HSL:206.9491525424deg ,87.5%, 42.3529411765%
acc-3
HEX:#3ba7ff
RGB:59, 167, 255
HSL:206.9491525424deg ,75%, 61.568627451%
acc-4
HEX:#9dd3ff
RGB:157, 211, 255
HSL:206.9491525424deg ,62.5%, 80.7843137255%
acc-5
HEX:#d8edff
RGB:216, 237, 255
HSL:206.9491525424deg ,55%, 92.3137254902%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.acc
*/
/*
Crayon Box
This is all of the colors of the theme broken out with its modifications written in hex code.
Weight:0
HideCodeBlock: display_none
Styleguide DesignBase.CrayonBox
*/
/*Adobe XD Color Map*/
/* $xd-color_primary-0: #198dae*/
/* $xd-color_primary-n5: #04151a*/
/* $xd-color_primary-n4: #082a34*/
/* $xd-color_primary-n3: #0d4757*/
/* $xd-color_primary-n2: #12637a*/
/* $xd-color_primary-n1: #157894*/
/* $xd-color_primary-1: #1da3c9*/
/* $xd-color_primary-2: #33bbe2*/
/* $xd-color_primary-3: #77d2eb*/
/* $xd-color_primary-4: #bbe8f5*/
/* $xd-color_primary-5: #e4f6fb*/
/* $xd-color_secondary-0: #676a72*/
/* $xd-color_secondary-n5: #0f1011*/
/* $xd-color_secondary-n4: #1f2022*/
/* $xd-color_secondary-n3: #343539*/
/* $xd-color_secondary-n2: #484a50*/
/* $xd-color_secondary-n1: #585a61*/
/* $xd-color_secondary-1: #757881*/
/* $xd-color_secondary-2: #8c8f97*/
/* $xd-color_secondary-3: #b2b4b9*/
/* $xd-color_secondary-4: #d9dadc*/
/* $xd-color_secondary-5: #f0f0f1*/
/* $xd-color_success-0: #078a2e*/
/* $xd-color_success-n5: #011507*/
/* $xd-color_success-n4: #02290e*/
/* $xd-color_success-n3: #044517*/
/* $xd-color_success-n2: #056120*/
/* $xd-color_success-n1: #067527*/
/* $xd-color_success-1: #09ad3a*/
/* $xd-color_success-2: #0be14b*/
/* $xd-color_success-3: #51f682*/
/* $xd-color_success-4: #a8fbc1*/
/* $xd-color_success-5: #dcfde6*/
/* $xd-color_shade-0: #878585*/
/* $xd-color_shade-n5: #141414*/
/* $xd-color_shade-n4: #292828*/
/* $xd-color_shade-n3: #444242*/
/* $xd-color_shade-n2: #5f5d5d*/
/* $xd-color_shade-n1: #737171*/
/* $xd-color_shade-1: #939191*/
/* $xd-color_shade-2: #a5a4a4*/
/* $xd-color_shade-3: #c3c2c2*/
/* $xd-color_shade-4: #e1e1e1*/
/* $xd-color_shade-5: #f3f3f3*/
/* $xd-color_warning-0: #da8210*/
/* $xd-color_warning-n5: #211402*/
/* $xd-color_warning-n4: #412705*/
/* $xd-color_warning-n3: #6d4108*/
/* $xd-color_warning-n2: #995b0b*/
/* $xd-color_warning-n1: #b96f0e*/
/* $xd-color_warning-1: #ee9118*/
/* $xd-color_warning-2: #f1a33e*/
/* $xd-color_warning-3: #f6c27e*/
/* $xd-color_warning-4: #fae0bf*/
/* $xd-color_warning-5: #fdf3e5*/
/* $xd-color_alert-0: #dd1a1a*/
/* $xd-color_alert-n5: #210404*/
/* $xd-color_alert-n4: #420808*/
/* $xd-color_alert-n3: #6f0d0d*/
/* $xd-color_alert-n2: #9b1212*/
/* $xd-color_alert-n1: #bc1616*/
/* $xd-color_alert-1: #e62b2b*/
/* $xd-color_alert-2: #ea4f4f*/
/* $xd-color_alert-3: #f18989*/
/* $xd-color_alert-4: #f8c4c4*/
/* $xd-color_alert-5: #fce7e7*/
/* $xd-color_navigation-0: #2b58c0*/
/* $xd-color_navigation-n5: #060d1d*/
/* $xd-color_navigation-n4: #0d1a3a*/
/* $xd-color_navigation-n3: #162c60*/
/* $xd-color_navigation-n2: #1e3e86*/
/* $xd-color_navigation-n1: #254ba3*/
/* $xd-color_navigation-1: #3564d2*/
/* $xd-color_navigation-2: #567ed9*/
/* $xd-color_navigation-3: #8fa9e6*/
/* $xd-color_navigation-4: #c7d4f2*/
/* $xd-color_navigation-5: #e9eefa*/
/* $xd-color_accent-0: #16a385*/
/* $xd-color_accent-n5: #031814*/
/* $xd-color_accent-n4: #073128*/
/* $xd-color_accent-n3: #0b5243*/
/* $xd-color_accent-n2: #0f725d*/
/* $xd-color_accent-n1: #138b71*/
/* $xd-color_accent-1: #1ac09c*/
/* $xd-color_accent-2: #28e2ba*/
/* $xd-color_accent-3: #70ecd1*/
/* $xd-color_accent-4: #b7f5e8*/
/* $xd-color_accent-5: #e2fbf6*/
/* $xd-color_info-0: #a3988c*/
/* $xd-color_info-n5: #191714*/
/* $xd-color_info-n4: #332e28*/
/* $xd-color_info-n3: #544c43*/
/* $xd-color_info-n2: #766b5e*/
/* $xd-color_info-n1: #8f8173*/
/* $xd-color_info-1: #aca298*/
/* $xd-color_info-2: #bab2a9*/
/* $xd-color_info-3: #d1ccc6*/
/* $xd-color_info-4: #e8e5e2*/
/* $xd-color_info-5: #f6f5f4*/
/* $xd-color_highlight-0: #7742bd*/
/* $xd-color_highlight-n5: #120a1c*/
/* $xd-color_highlight-n4: #241439*/
/* $xd-color_highlight-n3: #3c215f*/
/* $xd-color_highlight-n2: #532e84*/
/* $xd-color_highlight-n1: #6538a1*/
/* $xd-color_highlight-1: #8555c4*/
/* $xd-color_highlight-2: #9971ce*/
/* $xd-color_highlight-3: #bba1de*/
/* $xd-color_highlight-4: #ddd0ef*/
/* $xd-color_highlight-5: #f1ecf8*/
/* $xd-color_acc-0: #004176*/
/* $xd-color_acc-n5: #000a12*/
/* $xd-color_acc-n4: #001423*/
/* $xd-color_acc-n3: #00213b*/
/* $xd-color_acc-n2: #002e53*/
/* $xd-color_acc-n1: #003764*/
/* $xd-color_acc-1: #00579d*/
/* $xd-color_acc-2: #0077d8*/
/* $xd-color_acc-3: #3ba7ff*/
/* $xd-color_acc-4: #9dd3ff*/
/* $xd-color_acc-5: #d8edff*/
.font .font--example {
background-image: url(http://basehold.it/i/24);
}
.font .font--name {
color: #000;
}
.font .font--dropcase_2x {
color: #198dae;
}
/*
Basic HTML
The Arches Design System, at its core, is a Utility Class Styling Design. It is built not to prescribe the design of the HTML and components but to paint with classes to create complicated UI without having to create more styles. Arches rely on the browser or branding defaults for basic HTML styling. Below is a kitchen sink of HTML elements so you can see how this variation look without further alteration from adding classes. There is No basic styling around the pure DOM with the utility class only, and there is improved styling as you add Bootstrap or Foundation.
Weight: -100
Styleguide HTML
*/
/*
Reading Typography
Reading typography is a container class to opt into an override of the basic typography from arches. Basic Typography is un-styled and rely on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves reading typography lacking. Most ways typography content is added to a site is devoid of hooks to add styles to an element so work around that restriction and to unified styling across reading experiences the "reading-typography" class is used on the parent container. Please note that the reading typography can still look a bit different look depending on the brand or the framework.
modifier class
customization
usage
.inherit_color
removes all color rules from colored typography and sets it to inherit.
inverting a block of typography where all text and headlines should be white.
.font-size_up
shifts all typography up one font size step
intro blocks of text where the text. Or in articles where you can shift all text up a size.
`.font-size_down`
shifts all typography down one font size step.
citation blocks or boiler plate content where the text should be smaller and less impactful.
.links_dark
turns all links to the dark color standard.
this is used in junction with the .inherit_color class.
.links_light
turns all links to the light color standard.
this is used in junction with the .inherit_color class when text is on a dark background.
* there are further advanced features if you want to apply CSS Property Overrides.
Markup:
This is the primary heading and there should only be one of these per page
sub heading
A small paragraph to emphasis and show important bits.
This is a list item
So is this - there could be more
Make sure to style list items to:
Not forgetting child list items
Not forgetting child list items
Not forgetting child list items
Not forgetting child list items
A couple more
top level list items
Don't forget Ordered lists:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
A sub heading which is not as important as the first, but is quite imporant overall
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Table Heading
Table Heading
table data
table data
table data
table data
table data
table data
table data
table data
A sub heading which is not as important as the second, but should be used with consideration
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”
A sub heading which is not as important as the second, but should be used with consideration
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
A sub heading which is not as important as the second, but should be used with consideration
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Definition list
Consectetur adipisicing 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.
Lorem ipsum dolor sit amet
Consectetur adipisicing 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.
This heading plays a relatively small bit part role, if you use it at all
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Table of Contents
How to Prepare for the Boards
General Principles of Cardiovascular Medicine
Arrhythmias
Coronary Artery Disease
Heart Failure & Cardiomyopathy
Valvular Disease
Pericardial Disease
Congenital Heart Disease
Vascular Diseases
Systemic Hypertension and Hypotension
Pulmonary Circulation Disorders
Systemic Disorders Affecting the Circulatory
System
Miscellaneous
Cardiovascular Genetics
CPR, Post-Resuscitation Care
Cardiac Critical Care
Sleep Disordered Breathing
Sports Cardiology
Pregnancy and Cardiac Disease
Cardiovascular Operative Management
Pharmacology
General Principles of Cardiovascular
Medicine
Weight: -9
HideCodeBlock: display_none
Styleguide HTML.Typography
*/
/*
Reading Typography Modified
This text is used as a lorem content in many of our containers.
.color_inherit.bg_acc.c_white.p_4.links_light - This removes all color defining styles to make it easer to reverse colors. This sets all typography and borders to inherit their colors.
Markup:
{{> Sub.Placeholder.Typography modifier_class=" color_inherit bg_acc c_white p_4 links_light"}}
Weight: -9
HideCodeBlock: display_none
MarkupWrapperClasses: br_solid br_radius br_black-1 br_1 m_3 max-w_50
Styleguide HTML.Typography.Sample
*/
/*
Links States
This shows the look and feel of all the states of a text link, color, underline and decoration.
Markup:
MarkupWrapperClasses: max-w_40 relative h_20 w_100
Weight:10
Styleguide Sub.Data.Sponsor.Logo
*/
/*
Web Address
Markup:
http://wwww.LogoIpsum.com
Weight:25
Styleguide Sub.Data.Sponsor.WebAddress
*/
/*
Website Link
Markup:
MarkupWrapperClasses: max-w_40 relative h_20 w_100
Weight:10
Styleguide Sub.Data.Sponsor.Logo
*/
/*
Web Address
Markup:
http://wwww.LogoIpsum.com
Weight:25
Styleguide Sub.Data.Sponsor.WebAddress
*/
/*
Website Link
Markup:
