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
*/
/*
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
*/
/*
Header Nav
The header nav for the website.
Markup:
Weight: 0
SubComponents:
Component.Navigation.HeaderNav.MobileButton - Primary
Component.Navigation.HeaderNav.Active - Primary: Active
Component.Navigation.HeaderNav.Disabled - Primary: Disabled
Component.Navigation.HeaderNav.MobileToggle - Mobile Menu Toggle
Component.Navigation.HeaderNav.MobileHidden - Secondary
Component.Navigation.HeaderNav.MobileHiddenDisabled - Secondary: Disabled
Component.Navigation.HeaderNav.ExpandMobileLinks - Mobile Menu Link
Component.Navigation.HeaderNav.ExpandMobileLinksDisabled - Mobile Menu Link: Disabled
Styleguide Component.Navigation.HeaderNav
*/
/*
Base Header Nav (Primary)
Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Component.Navigation.HeaderNav.MobileButton
*/
/*
Mobile Toggle
Toggle button for the expanding mobile menu.
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Component.Navigation.HeaderNav.MobileToggle
*/
/*
Base Header Nav (Secondary)
Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Component.Navigation.HeaderNav.MobileHidden
*/
/*
Mobile Hidden Header Nav Disabled
Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Component.Navigation.HeaderNav.MobileHiddenDisabled
*/
/*
Mobile Menu Link
Header Nav in mobile view has an expanded more list that hides the secondary nav items.
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Component.Navigation.HeaderNav.ExpandMobileLinks
*/
/*
Mobile Menu Link Disabled
Header Nav in mobile view has an expanded more list that hides the secondary nav items.
Markup:
MarkupWrapperClasses: ul_none
Weight: 0
Styleguide Component.Navigation.HeaderNav.ExpandMobileLinksDisabled
*/
/*
Nav Active
Header Nav basic design that is not hidden when in mobile viewport have an included icon that makes it easier to see and click on when in mobile viewport.
Markup:
MarkupWrapperClasses: ul_none
Weight: -1
Styleguide Component.Navigation.HeaderNav.Active
*/
/*
Nav Disabled
Disabled Header Nav is used when the conference site is open but all pages should be accessible. This is limited to the early stages of the conference before the site is fully open.
Markup:
MarkupWrapperClasses: ul_none
Weight: 10
Styleguide Component.Navigation.HeaderNav.Disabled
*/
/*
Header Branding Area
Conferences can have a header branding area which gives the design team the ability to add a logo, graphics, and or text to the header or the site.
Weight: -999
Styleguide Structures.BrandArea
*/
/*
Header Brand Area - Logged in
Description: This is the logged in header brand area.
Markup:
{{> "Structures.BrandArea.LoggedIn.Button"}}
MarkupWrapperClasses: relative
Weight: -999
Styleguide Structures.BrandArea.LoggedIn
*/
/*
Logged Buttons
Description: The logged in buttons.
Markup:
MarkupWrapperClasses: relative
Weight:0
Styleguide Structures.BrandArea.LoggedIn.Button
*/
/*
Unsafe Area
Description: Because the UI is floats on top of the images there are area that are unsafe to contain text.
Markup:
MarkupWrapperClasses: relative
Weight: -999
Styleguide Structures.BrandArea.UnSAFE
*/
/*
Header Brand Area - Logged Out
Description: This is the logged Out header brand area.
Markup:
MarkupWrapperClasses: relative
Weight: -1000
Styleguide Structures.BrandArea.LoggedOut
*/
/*
Certified Education Block
Description: This block is added to all sites that offer any level of certification. Most of it links to other area or products but the user must see it on pages.
Markup:
Certified Education Credit Claim
This section of Care of the Athletic Heart 2020 Virtual contains certified education content. If a session offers credit, it is indicated. Credit information and disclosures may be accessed by selecting the below button.
Credit must be claimed by
December 31, 2020, 5:00 PM ET. You may only complete the evaluation and credit claim once; therefore, please do not proceed until you have finished your participation in the certified content for which you wish to claim credit.
MarkupWrapperClasses:
max-w_40
Weight:0
Styleguide Structures.Evergreen.Credits
*/
/*
Sub Components
These sub elements are used in many of the patterns and may be useful when building more complex components.
Weight: 200000
Styleguide Sub
*/
/*
Program
Programs are build via sessions, presentations, and workshops.
Weight: 200000
Styleguide Sub.Program
*/
/*
Date Time Separators
Sessions are divided by date time markers that have been set to east coast time with a reference to GMT.
Markup:
FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.
Data:
Sub.Data.Agenda.LiveDate - Live Date
Sub.Data.Agenda.LiveTime - Live Time
MarkupWrapperClasses: p_4 br_inherit
Weight: 100
Styleguide Sub.DateTimeDividers
*/
/*
Credit Dot
Dots are used to indicate the credit that this education offers.
CME - CME
CNE - CNE
AAPA - AAPA
ABP - ABP
ABPMOCII - ABPMOCII
ABPMOCIV - ABPMOCIV
ACHE - ACHE
Markup:
{{ modifier_class }}
Note: This pattern requires the inclusion of the credit color stylesheets.
FORMAT: This element uses data that has strict data formatting requirements. See color codes => credits.
Weight:0
Styleguide Sub.Credits
*/
/*
Simple Credit Dots
When it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution.
Markup:
Note: This pattern requires the inclusion of the credit color stylesheets.
SubComponents: Sub.Credits
Weight:0
Styleguide Sub.Credits.Dots
*/
/*
Non Accredited
description
Markup:
Industry Session | Nonaccredited
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Credits.NonAccredited
*/
/*
Category Flags
Description: A graphic treatment for the category flags which are tags applied like channel and type.
Markup:
{{>"Sub.Data.Agenda.ChannelName"}}
Category Tag
Data: Sub.Data.Agenda.ChannelName - Channel Name
Weight:0
Styleguide Sub.CategoryFlags
*/
/*
Tags
A full data driven system uses tagging to categorize content, separate the content into groups, or describe the content in ways that are directly applied by the Titles and labels.
Markup:
Weight:0
Styleguide Sub.Tags
*/
/*
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
*/
/*
Presentation List Item
When sessions have more then one presentation they are listed in a list. Presentations are colored with bg_white and bg_white-9 to have color differences.
Markup:
MarkupWrapperClasses: ul_none br-t_1 br_solid br_primary p_0 font_n1 bg_primary-n3
FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.
Data:
Sub.Data.Presentation.Title - Title
Sub.Data.Presentation.LiveTime - Live Time
SubComponents:
Sub.FacultyList - Faculty List
Sub.ActionButtons.Favorite.Small - Small Action Button
ClassList:
Sub.ClassList.Border.BlackTop - Border Top
Weight:0
Styleguide Sub.Presentation.ListItem
*/
/*
Presentation List Item With Details
When sessions have more then one presentation they are listed in a list. Presentations are colored with bg_white and bg_white-9 to have color differences.
Markup:
MarkupWrapperClasses: ul_none br-t_1 br_solid br_primary p_0 font_n1 bg_primary-n3
FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.
NOTE: This might not function completely because of the JavaScript on the page in side the styleguide documentation.
Data:
Sub.Data.Presentation.Title - Title
Sub.Data.Presentation.LiveTime - Live Time
SubComponents:
Sub.FacultyList - Faculty List
Sub.ActionButtons.Favorite.Small - Small Action Button
ClassList:
Sub.ClassList.Border.BlackTop - Border Top
Weight:0
Styleguide Sub.Presentation.ListItemWithDetails
*/
/*
Presentation List
List of Presentations is similar DOM independent of the context.
Markup:
SubComponents:
Sub.Presentation.ListItem - List Item
Sub.Presentation.ListItemWithDetails - List Item with Details
Weight:0
Styleguide Sub.Presentation.List
*/
/*
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.Credits.Dots - Credit Dots
Sub.Tags.Category - Category
Sub.Tags.Filter - Tags
Weight:0
Styleguide Sub.Player.AuxData
*/
/*
Auxiliary Data Not Accredited
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.Credits.Dots - Credit Dots
Sub.Tags.Category - Category
Sub.Tags.Filter - Tags
Weight:0
Styleguide Sub.Player.AuxSub.Data.NotAccredited
*/
/*
Auxiliary Data Abstracts
Description: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.
Markup:
SubComponents:
Sub.Credits.Dots - Credit Dots
Sub.Tags.Category - Category
Sub.Tags.Filter - Tags
Weight:0
Styleguide Sub.Player.AuxSub.Data.Abstracts
*/
/*
Attachments Modal
Description:
Markup:
Attachments
Really long name of a files so the text might wrap because we can never keep titles short and we have to medically explain everything.
lorem text link
MarkupWrapperClasses: relative
Note: A `block relative` class was added to this DOM element to make it visible in this documentation.
Weight: 200
Styleguide Sub.Attachments
*/
/*
Playing Date Time
When presenting the playing date and time this simple dot pattern is a good solution.
Markup:
{{> "Sub.Data.Agenda.LiveDate"}} {{> "Sub.Data.Agenda.LiveTime" }}
Weight:0
Styleguide Sub.PlayingDateTime
*/
/*
Video Thumbnail
Description: The header is just a bit of design flair that can be colored, background swapped out and also the icon can be changed to the content of the presentation.
bg_primary - is the default background color
bg_accent - any background color can be swapped out
Markup:
Weight:0
Styleguide Sub.Header.VideoThumbnail
*/
/*
Abstract Thumbnail
Description: The header is just a bit of design flair that can be colored, background swapped out and also the icon can be changed to the content of the presentation.
bg_primary - is the default background color
bg_accent - any background color can be swapped out
Markup:
Weight:0
Styleguide Sub.Header.AbstractThumbnail
*/
/*
Favorite Button
The favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.
active - when the favorite is active
Markup:
Weight:0
Styleguide Sub.ActionButtons.Favorite
*/
/*
Favorite Button (Disabled)
The favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.
active - when the favorite is active
Markup:
Weight:0
Styleguide Sub.ActionButtons.Favorite.Disabled
*/
/*
Favorite Button Small
The favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.
active - when the favorite is active
Markup:
Weight:0
Styleguide Sub.ActionButtons.Favorite.Small
*/
/*
Action Buttons
The Actions buttons are a combination of functions and a link to the education materials player. has a couple of buttons and a link to the presentation details.
Watch - when the main asset of the loaded page is a video or live stream.
Join - when the main asset of the loaded page is an online meeting or webinar.
Listen - when the main asset of the loaded page is a podcast or audio.
View - when the main asset of the loaded page is a graphic, pdf, or slide deck.
Markup:
Weight:0
Styleguide Sub.ActionButtons
*/
/*
Locked Attachment Button
Attachments can be released after access to the presentation or session UI has been granted. In these cases the button is disabled. And an alert is displayed giving the time when it will be available.
Markup:
Attachments
Weight:0
NOTE: This pattern is using bootstrap modal to display the message. The IDs of the modal and bs-targets are hard coded in the pattern and need to be dynamic for production.
Styleguide Sub.ActionButtons.LockedAttachments
*/
/*
Embargoed Attachment Actions Buttons
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Sub.ActionButtons.EmbargoedAttachments
*/
/*
Action Buttons No Details
Description: The Actions buttons are a combination of functions and a link to the education materials player. has a couple of buttons and a link to the presentation details.
watch - watch action button
Markup:
Weight:0
Styleguide Sub.ActionButtons.NoDetails
*/
/*
Action Buttons Only
The Actions buttons are a combination of functions and a link to the education materials player.
watch - watch action button
Markup:
Weight:0
Styleguide Sub.ActionButtons.Only
*/
/*
Action Buttons On Demand
The On Demand Actions buttons never have the calendar reminder button.
Markup:
Weight:200
Styleguide Sub.ActionButtons.OnDemand
*/
/*
Action Buttons Featured
The Featured Actions buttons never have the calendar reminder button.
Markup:
Weight:200
Styleguide Sub.ActionButtons.Featured
*/
/*
Abstract Flag
Abstract flags are used to indicate that an abstract is awarded for some reason. Use the default and star for most reasons. If there is a need for three levels of awards then use star and trophy alt or the angle up icons. In the content of the page you should denote the legend of the icons used.
fa-star - this denote the premium awarded abstracts (e.g. top 10)
fa-angle-up - this denote the premium awarded abstracts (level up 1)
fa-angle-double-up - this denote the premium awarded abstracts (level up 2)
Markup:
Weight:0
Styleguide Sub.Award.Flags
*/
/*
Abstract Flag Legend
Markup:
{{> "Sub.Award.Flags" modifier_class="fa-star"}}
Special Category
{{> "Sub.Award.Flags" modifier_class=""}}
Top Ten
Weight:0
Styleguide Sub.Award.FlagLegend
*/
/*
Attachments Big Button
On player pages use the big button for attachments. The text only displays when the view port is medium and up.
Markup:
Attachments
Weight:0
Styleguide Sub.Attachments.BigButton
*/
/*
Attachments Big Button (Disabled)
On player pages use the big button for attachments. The text only displays when the view port is medium and up.
Markup:
Attachments
Weight:0
Styleguide Sub.Attachments.BigButton.Disabled
*/
/*
Chat Window
The chat window is used to display the chat in player pages.
Markup:
(2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
(2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
(2:18 PM) Lovely Day : Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment.
(2:18 PM) Lovely Day : Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
(2:18 PM) Lovely Day : Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line.
(2:19 PM) Lovely Day : Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring.
(3:48 PM) Lovely Day : test
(3:50 PM) Matt Watier : hello
Weight:0
Styleguide Sub.Player.Chat
*/
/*
CIO Window
CIO is a survey widget that allows faculty to collect questions and polls from participants.
Markup:
Weight:0
Styleguide Sub.Player.CIO
*/
/*
Program Borders OutSide
CSS Classes on the Article tag of all program elements
Markup:
c_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light bg_white
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Style.OuterBorder
*/
/*
Program Borders Inside
CSS Classes on the Article tag of all program elements
Markup:
br_1 br-b_0 br-tr_radius br-tl_radius br_solid br_black-3 flex flex_column font_ui m-t_n2 relative
MarkupWrapperClasses:
Weight:0
Styleguide Sub.Style.InnerBorder
*/
/*
Section Header
default - Grid
Markup:
Weight:0
Styleguide Sub.LayoutBlock
*/
/*
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
*/
/*
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
*/
/*
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;
}
/*
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
*/
/*
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].
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius vitae ex minus voluptas, debitis consequuntur, voluptatem, ad nostrum quod eum pariatur natus? Aspernatur repellendus a sapiente iure quibusdam molestias nulla?
Lorem ipsum dolor sit amet consectetur adipisicing elit. Eius vitae ex minus voluptas, debitis consequuntur, voluptatem, ad nostrum quod eum pariatur natus? Aspernatur repellendus a sapiente iure quibusdam molestias nulla?
Dolorem quo eos quibusdam illo eveniet. Eius repellendus totam nam atque aut dicta molestias et. Molestiae nobis rerum possimus voluptatem non. Natus soluta aliquam occaecati libero blanditiis sed sed non. Aut asperiores enim ut mollitia. Ea aliquam exercitationem consectetur temporibus laudantium harum voluptatem.Blanditiis sapiente accusantium in dolorem adipisci. Quibusdam nihil voluptates tempora. Itaque nihil iste nulla assumenda velit nam et corporis dolorem. Illo ea officia quibusdam harum. At quisquam ullam nam. Fugiat et debitis.
Weight:0
Styleguide Structures.ImageContentSimple
*/
/*
Call-to-Action Card
Description: Some content areas are chunked out to drive usage through a call to action card.
Markup:
Member Section
Connect with ACC’s Sports and Exercise Member Section, THE home for sports and exercise professionals within the ACC, advocating for and advancing the priorities of the community, and serving as a College-wide resource for issues related to sports and exercise professionals.
Weight:100
Styleguide Structures.Call To Action
*/
/*
External Resource
External Sections of content that are helpful to cross promote other products from the conferences.
primary - Change the color of the block to primary.
accent - Change the color of the block to accent.
Markup:
ACC’sCOVID-19 HUB
MarkupWrapperClasses:
gap-x_4 gap-y_4 grid template-x_30
Styleguide Structures.External Resource
*/
/*
Alpha List
Long list of alpha ordered items with quick link jumping to the letter.
Markup:
Weight:0
Styleguide Structures.AlphaList
*/
/*
Style - Container Classes
Markup:
relative br-t_1 br_dotted br_primary-3 w_100 p-y_4 font_0 flex_row flex
Styleguide Structures.AlphaList.container_classes
*/
/*
Style - Marker Classes
Markup:
c_white font_8 font_accent font_bold inline-block uppercase shadow_overlap-light bg_primary-n2 lh_0 br_radius p_2 p-x_4 m-x_3 sticky t_4 flex_none
Styleguide Structures.AlphaList.marker_classes
*/
/*
Style - List Item Nav Classes
Markup:
c_black-7 text_center
Styleguide Structures.AlphaList.li_classes
*/
/*
Style - List Item Nav Link Classes
Markup:
bg_primary-4 br_radius h:c_white h:bg_primary-n3 p-x_3 block h:undecorated
Styleguide Structures.AlphaList.link_classes
*/
/*
Sub - List Item Name
Markup:
{{ modifier_class }}
{{> "Sub.Data.Faculty.Title" }}
{{> "Sub.Data.Faculty.Location" }}
Styleguide Structures.AlphaList.list_item_name
*/
/*
Style - List Item Container Classes
Markup:
flex_auto gap-x_5 gap-y_4 grid columns_1 columns_2:md columns_3:lg p-t_0 p_4 ul_none
Weight:0
Styleguide Structures.AlphaList.list_item_container_classes
*/
/*
Awardee
The basic Data of an awardee.
Markup:
HeadShot
Display Name
{{> "Sub.Data.Faculty.FullName" }}
Title
{{> "Sub.Data.Faculty.Title" }}
Location
{{> "Sub.Data.Faculty.Location" }}
MarkupWrapperClasses: reading-typography
Weight: 300
Styleguide Awards.Awardee
*/
/*
Awardee Avatar
When a head shot is missing it should use the avatar.
Markup:
MarkupWrapperClasses: br_round br_solid br_black-3 br_1 overflow_hidden shadow_bevel-light max-w_20
Weight: 0
Styleguide Awards.Awardee.Avatar
*/
/*
Awardee Avatar No Video
When a head shot is missing it should use the avatar.
Markup:
MarkupWrapperClasses: br_round br_solid br_black-3 br_1 overflow_hidden shadow_bevel-light max-w_20
Weight: 0
Styleguide Awards.Awardee.AvatarNoVideo
*/
/*
Awardee Premium
The base DOM and Data that represent an awardee. Head shots images are maxed at 350px wide.
flex_column - The stacked version of the awardee.
Markup:
{{> "Sub.Data.Faculty.Photo"}}
{{> "Sub.Data.Faculty.FullName" }}
{{> "Sub.Data.Faculty.Title" }}
{{> "Sub.Data.Faculty.Location" }}
MarkupWrapperClasses: font_2
Weight: -100
Styleguide Awards.Awardee.Premium
*/
/*
Awardee Premium with Video
The base DOM and Data that represent an awardee. Head shots images are maxed at 350px wide.
flex_column - The stacked version of the awardee.
Markup:
Video EMBED
{{> "Sub.Data.Faculty.FullName" }}
{{> "Sub.Data.Faculty.Title" }}
{{> "Sub.Data.Faculty.Location" }}
MarkupWrapperClasses: font_2
Weight: -100
Styleguide Awards.Awardee.Premium.Video
*/
/*
Awardee Standard
The base DOM and Data that represent an awardee. Head shots images are maxed at 240px wide.
flex_column - The stacked version of the awardee.
Markup:
{{> "Sub.Data.Faculty.Photo"}}
{{> "Sub.Data.Faculty.FullName" }}
{{> "Sub.Data.Faculty.Title" }}
{{> "Sub.Data.Faculty.Location" }}
MarkupWrapperClasses: font_1
Weight: -50
Styleguide Awards.Awardee.Standard
*/
/*
Awardee Standard with Avatar
The base DOM and Data that represent an awardee. Head shots images are maxed at 240px wide.
flex_column - The stacked version of the awardee.
Markup:
{{> "Awards.Awardee.Avatar"}}
{{> "Sub.Data.Faculty.FullName" }}
{{> "Sub.Data.Faculty.Title" }}
{{> "Sub.Data.Faculty.Location" }}
MarkupWrapperClasses: font_1
Weight: -50
Styleguide Awards.Awardee.Standard.Avatar
*/
/*
Awardee Condensed
The base DOM and Data that represent an awardee. Head shots images are maxed at 160px wide.
flex_column - The stacked version of the awardee.
Markup:
{{> "Sub.Data.Faculty.Photo"}}
{{> "Sub.Data.Faculty.FullName" }}
{{> "Sub.Data.Faculty.Title" }}
{{> "Sub.Data.Faculty.Location" }}
MarkupWrapperClasses:
Weight: 50
Styleguide Awards.Awardee.Condensed
*/
/*
Awardee Ultra Condensed
The base DOM and Data that represent an awardee. Head shots images are maxed at 80px wide.
flex_column - The stacked version of the awardee.
Markup:
{{> "Sub.Data.Faculty.Photo"}}
{{> "Sub.Data.Faculty.FullName" }}
{{> "Sub.Data.Faculty.Title" }}
{{> "Sub.Data.Faculty.Location" }}
MarkupWrapperClasses:
Weight: 100
Styleguide Awards.Awardee.UltraCondensed
*/
/*
Awards
Awards in the system is a looped collections of information with a title and optional description of the award and the looped recipients. Depending on the type of award, the level of the award is more or less decorated.
MarkupWrapperClasses:
Weight:0
Styleguide Awards.Level
*/
/*
Award Premiere
The Premiere award is a special award that includes additional information about the award and the awardee. The content can be html and event include embeds of video and images.
MarkupWrapperClasses:
Weight:0
Styleguide Awards.Level.Premiere
*/
/*
Award Premiere Tier Stacked
Awards are blocks design to display the awards for the conference.
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Awards.Level.Premiere.Column
*/
/*
Award Premiere Tier Row
Awards are blocks design to display the awards for the conference.
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Awards.Level.Premiere.Row
*/
/*
Award Premiere Video
Awards are blocks design to display the awards for the conference.
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Awards.Level.Standard.Status
*/
/*
Award Condensed
Awards are blocks design to display the awards for the conference.
Markup:
SubComponents:
Sub.Award.FlagLegend - Award Flags
Sub.Attachments.BigButton - Attachments
Sub.FacultyList - Faculty List
Sub.Player.AuxSub.Data.Abstracts - Aux Data
Data:
Sub.Data.Abstract.Title - Title
Weight:1000
Styleguide Page.Player.Abstract
*/
/*
On Demand
Description:
Markup:
SubComponents:
Sub.Award.FlagLegend - Award Flags
Sub.Attachments.BigButton - Attachments
Sub.FacultyList - Faculty List
Sub.Player.AuxData - Aux Data
Data:
Sub.Data.Session.ID - Session ID
Sub.Data.Session.Title - Session Title
Sub.Data.Presentation.Title - Presentation Title
Weight:1000
Styleguide Page.Player.OnDemand
*/
/*
Page Layouts
Combination Patterns to split up the page into sections.
Weight: 5000
Styleguide Page.Layouts
*/
/*
Filter List
Search filter
Markup:
MarkupWrapperClasses:
Weight: 0
NOTE: Note that this page design is supposed to be full screen so in the documentation it might collapse incorrectly or seem too crunched.
Styleguide Page.Search.Filter
*/
/*
Search Bar with Filter
Search filter
Markup:
MarkupWrapperClasses:
Weight: 0
NOTE: Note that this page design is supposed to be full screen so in the documentation it might collapse incorrectly or seem too crunched.
caution: This item is not finalized and might be subject to change
SubComponents:
Sub.CollapseIcon.NoText - Collapse Icon
Sub.Search.Faceted - Search Facet Group
Sub.Search.Bar - Search Bar
Sub.Search.ResultOverview - Search Result Overview
Sub.Pagination - Pagination
Program.Session - Session
Program.Session.Shell - Session Shell
Program.Session.Collapsible - Session Collapsible
Styleguide Page.Search.BarAndFilter
*/
/*
No Results
When the search returns no results or the user has filters all results away.
Markup:
MarkupWrapperClasses:
Weight: 0
NOTE: Note that this page design is supposed to be full screen so in the documentation it might collapse incorrectly or seem too crunched.
caution: This item is not finalized and might be subject to change
SubComponents:
Sub.CollapseIcon.NoText - Collapse Icon
Sub.Search.Faceted - Search Facet Group
Sub.Search.Bar - Search Bar
Sub.Search.ResultOverview - Search Result Overview
Sub.Pagination - Pagination
Program.Session.NoResults - No Result Response
Styleguide Page.Search.NoResults
*/
/*
No Access with Registration Preview
Description:
Markup:
Sorry, but it appears this account doesn't have access to [PRODUCT NAME ShortCode]
{{> 'Sub.System.AccessTroubleShooting'}}
Registration information on this account
Correct Registration [ PRODUCT NAME ]
You do have a Registration for [ PRODUCT NAME ]. Some how you have gotten here by mistake.
Please click the "Refresh Access" button to get to the homepage.
Wrong type of Registration to give you access. [Product Code Title]
[ Product Code Description ... ] Gain access to conference hall in Washington DC. Maiores necessitatibus quis. Numquam tenetur dolorem voluptatem. Eum cum ipsam atque tempore velit tempora cupiditate deleniti et.
Voluptas sint fugiat molestiae error. Culpa odit quas consequuntur. Ut non qui.
You can purchase the upgrade to your Registration to include the virtual platform by clicking the button.
Event Registrations Found
You do have Registrations on this account but it is not for [ PRODUCT NAME ]. Could you have possibly registered for [PRODUCT NAME] on another account?
Do you have a Secondary Account?
If you do have a secondary account you might try to logging out of this account and logging into that account and return to [PRODUCT NAME].
Event Registrations On this Account
[Product Code Title X]
[Product Code Title Y]
[Product Code Title Z]
You have NO Registrations Associated with this Account
Do you have a Secondary Account?
If you do have a secondary account you might try to logging out of this account and logging into that account and return to [PRODUCT NAME].
NOTE: Only one of the "Event Registrations Found Cards" show at a time. The cards fail in the order of the above list.
Weight:0
Styleguide Page.Access.NoAccess
*/
/*
Program
The central UI of an event is the program which displays all educational content from the conference.
MarkupWrapperClasses:
Weight: 0
Styleguide Program
*/
/*
Session
The basic session is Session with a title that has a playlist of presentations
Markup:
MarkupWrapperClasses:
Weight: 0
Data:
Sub.Data.Session.ID - Session ID
Sub.Data.Session.Title - Session title
SubComponents:
Sub.Presentation.List - Presentation List
Sub.ActionButtons.NoDetails - Action Buttons
Sub.ActionButtons.Favorite.Small - Favorite Button
Sub.PlayingDateTime - Playing Date Time
Sub.CategoryFlags - Category Flags
Styleguide Program.Session
*/
/*
Session Collapse
The basic session is Session with a title that has a playlist of presentations
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Program.Session.Collapsible
*/
/*
Session Shell
A session shell is when there is only one presentation.
Markup:
MarkupWrapperClasses:
Weight: 0
Styleguide Program.Session.Shell
*/
/*
On Demand
After the completion of a video the Sessions are broken down to the individual presentations and stored in the On Demand Area for viewing.
Markup:
Weight: 10000
Data:
Sub.Data.Presentation.Title - Presentation Title
Sub.Data.Session.Title - Session Title
Sub.Data.Session.ID - Session ID
SubComponents:
Sub.Credits.Dots - Credit Dots
Sub.FacultyList.SessionAndPresentation - Session & Presentation Faculty List
Sub.PlayingDateTime - Playing Date Time
Sub.ActionButtons.OnDemand - Action Buttons
Sub.CategoryFlags - Category Flags
Styleguide Program.OnDemand
*/
/*
Condensed Session
Condensed Sessions are used for listing designs that are not full featured.
.p_4.bg_black-1.shadow_emboss-light.br_radius.br_1.br_solid.br_black-3 - embossed background
Markup:
MarkupWrapperClasses: max-w_30:md
Weight: 10000
Data:
Sub.Data.Session.ID - Session ID
Sub.Data.Session.Title - Session Title
Sub.Data.Agenda.LiveTime - Live Time
SubComponents:
Sub.ActionButtons - Watch Button
Styleguide Program.CondensedSession
*/
/*
No Results
When the results are empty the user is presented with a message.
Markup:
OH NO!We couldn't find any results for your search.
Search Help
It is easy to search for a session, but its also easy to have a typo. Check your spelling and try again.
Click the `Clear Search` button to return to all sessions.
MarkupWrapperClasses:
Weight:0
Styleguide Program.Session.NoResults
*/
/*
Non Accredited Session
There are sessions that are tagged as non accredited which means they are not eligible for credit and are industry specific.
Markup:
MarkupWrapperClasses:
Components:
Sub.FacultyList.SessionAndPresentation - Session Faculty & Faculty List
Sub.Credits.NonAccredited - Non Accredited Message
Sub.ActionButtons.NoDetails - Action Button w/o Details
Weight:0
Styleguide Program.Session.NonAccredited
*/
/*
Abstracts
Abstracts are a presentation of a static slide deck, or pdf with a possible attached video. These cards link to an abstract player page.
Markup:
MarkupWrapperClasses:
NOTE: A grid-item at its smallest is 300px wide the grid column size needs to be set depending on the width the parent container.
Weight:0
Styleguide Program.GridFormat.FeaturedPresentation.Grid
*/
/*
Whats Happening Now
Condensed Sessions are used for listing designs that are not full featured.
Markup:
MarkupWrapperClasses: max-w_30:md
Data:
Sub.Data.Session.ID - Session ID
Sub.Data.Session.Title - Session Title
Sub.Data.Agenda.EndTime - Session End Time
SubComponents:
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
Weight: 10000
Styleguide Program.GridFormat.WhatsNow
*/
/*
Whats Happening Now NON-Accredited
Condensed Sessions are used for listing designs that are not full featured.
Markup:
MarkupWrapperClasses: max-w_30:md
Data:
Sub.Data.Session.ID - Session ID
Sub.Data.Session.Title - Session Title
Sub.Data.Agenda.EndTime - Session End Time
SubComponents:
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
Weight: 10000
Styleguide Program.GridFormat.WhatsNow.NonAccredited
*/
/*
Whats Now Item - Horizontal
Whats happening now items are used for listing designs that are not full featured. When there is only one on a full width page you can use this horizontal design.
Markup:
MarkupWrapperClasses:
Data:
Sub.Data.Session.ID - Session ID
Sub.Data.Session.Title - Session Title
Sub.Data.Agenda.EndTime - Session End Time
SubComponents:
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
Weight: 10000
Styleguide Program.GridFormat.WhatsNow.Horizontal
*/
/*
Whats Happening Now Grid
A zone on the page that displays the current live session.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Program.GridFormat.WhatsNow.Grid
*/
/*
Whats Happening Next
During the day there will be gaps that will not have a video or session playing so we want to broadcast the information of what will be playing soon.
Markup:
MarkupWrapperClasses: max-w_30:md
Data:
Sub.Data.Session.ID - Session ID
Sub.Data.Session.Title - Session Title
Sub.Data.Agenda.EndTime - Session End Time
SubComponents:
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
NOTE: the Date in the Starting message is conditional. If the session starts on a day that isn't today then the date will be displayed.
Weight: 10000
Styleguide Program.GridFormat.WhatsNext
*/
/*
Whats Happening Next - Non Accredited
During the day there will be gaps that will not have a video or session playing so we want to broadcast the information of what will be playing soon.
Markup:
MarkupWrapperClasses: max-w_30:md
Data:
Sub.Data.Session.ID - Session ID
Sub.Data.Session.Title - Session Title
Sub.Data.Agenda.EndTime - Session End Time
SubComponents:
Sub.Header.VideoThumbnail - Thumbnail of Video
Sub.Tags.Category - Category Tag
Sub.ActionButtons - Watch Button
Sub.Credits.NonAccredited - Non Accredited Tag
NOTE: the Date in the Starting message is conditional. If the session starts on a day that isn't today then the date will be displayed.
Weight: 10000
Styleguide Program.GridFormat.WhatsNext.NonAccredited
*/
/*
Whats Happening Next - Grid
At times between breaks of sessions the whats happening next will be a grid will show a whats happening next grid because there are no sessions playing.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Program.GridFormat.WhatsNext.Grid
*/
/*
Whats Happening Next - Grid
At times before the end of the conference but if there is no scheduled session.
Markup:
{{> "Sub.SectionHeader" modifier_class="End of Current Scheduled Program" }}
The Current Program has ended
But the event is not over yet and there could possibly be more. Check back soon for more information or view pass sessions from the On Demand Page.
Weight:0
Styleguide Program.GridFormat.WhatsNext.EndOfProgram
*/
/*
Agenda Grid
The agenda grid is a day layout for the agenda view.
MarkupWrapperClasses:
Weight:0
Styleguide Program.AgendaGrid
*/
/*
Non-Accredited Session
Based on the Session the Non-accredited session is styled to represent that it does not have an accreditation.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Program.AgendaGrid.Session.NonAccredited
*/
/*
Grid Session
The day grid sessions are light on information because the limitations of the layout.
Markup:
MarkupWrapperClasses:
Weight:0
Styleguide Program.AgendaGrid.Session
*/
/*
Day Grid with Channels.
There is need to override the default css variables of this design if you are going to shift away from the default. The units of time are set to increments of 5 minutes.
Markup:
Full Program
Channel Name 1Channel Name 2Channel Name 3Channel Name 4
{{> "Program.AgendaGrid.Hour" modifier_class="9" }}
{{> "Program.AgendaGrid.Session" modifier_class="time-start_9-00 time-end_10-00 channel-start_3 channel-end_4" }}
{{> "Program.AgendaGrid.Hour" modifier_class="10" }}
{{> "Program.AgendaGrid.Session" modifier_class="time-start_10-00 time-end_11-40 channel-start_1 channel-end_1" }}
{{> "Program.AgendaGrid.Session.NonAccredited" modifier_class="time-start_10-00 time-end_11-40 channel-start_2 channel-end_3" }}
{{> "Program.AgendaGrid.Hour" modifier_class="11" }}
{{> "Program.AgendaGrid.Hour" modifier_class="12" }}
{{> "Program.AgendaGrid.Session" modifier_class="time-start_12-00 time-end_13-00 channel-start_1 channel-end_3" }}
{{> "Program.AgendaGrid.Hour" modifier_class="13" }}
{{> "Program.AgendaGrid.Session" modifier_class="time-start_13-30 time-end_15-10 channel-start_3 channel-end_4" }}
{{> "Program.AgendaGrid.Hour" modifier_class="14" }}
{{> "Program.AgendaGrid.Hour" modifier_class="15" }}
{{> "Program.AgendaGrid.Hour" modifier_class="16" }}
{{> "Program.AgendaGrid.Hour" modifier_class="17" }}
MarkupWrapperClasses:
Weight:0
FORMAT: In the real design the hours should be in the format of "3 p.m" and not military time of "15:00"
NOTE: Limitation of this design because of the pattern library. The Hours could be formatted differently to reflect the AM and PM. But this build needs to be done in military time because of lack of dynamic labels for the hours.
Styleguide Program.AgendaGrid.Day
*/
/*
Hour Line
description
Markup:
{{ modifier_class }}:00
MarkupWrapperClasses: day_grid
Weight:0
Styleguide Program.AgendaGrid.Hour
*/
/*
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
*/
/*
Sponsor Tiles
Description: A tile version of sponsor information
Weight:0
Styleguide Sponsor.Tile
*/
/*
Sponsor Grid
Description:
Markup:
{{> Sponsor.Tile.WebLink }}
{{> "Sub.Data.Sponsor.Name"}}
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?
{{> "Sub.Data.Sponsor.Address"}}
{{> "Sub.Data.Sponsor.Name"}}
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?
Quia cum enim voluptates quas qui assumenda omnis qui. Modi ducimus totam amet et vel aut eveniet. Perferendis temporibus distinctio eos labore quaerat eius rerum. Ipsam qui et eveniet quo necessitatibus.
Data:
Sub.Data.Sponsor.Name - Name
Sub.Data.Sponsor.Description - Description in HTML
Sub.Data.Sponsor.Address - Address
MarkupWrapperClasses: grid columns_3:lg columns_2:md columns_1 gap_4
Weight:0
Styleguide Sponsor.Tile.WebLink
*/
/*
Faculty
Description: Faculty are the people who are responsible for the design and development of the sessions used in an event. They can take many roles in the session or presentation, such as: chair, panelist, presenter, facilitator, or even a author. There can be many faculty members to a single presentation.
Weight:0
Styleguide Faculty
*/
/*
Full Data with Photo
Description: The most basic way we represent a faculty.
br_radius - The border radius of the image.
br_round - The border radius of the image.
br_circle - The border radius of the image.
Markup:
{{> "Sub.Data.Faculty.Photo" }}
{{> "Sub.Data.Faculty.FullName" }}
{{> "Sub.Data.Faculty.Title" }}
{{> Sub.Data.Faculty.Location }}
{{> Sub.Data.Faculty.Bio }}
{{> "Sub.Faculty.TwitterButton"}}
MarkupWrapperClasses: grid-col_4 grid
FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.
SupComponents:
Sub.Faculty.TwitterButton - Twitter Button
Data:
Sub.Data.Faculty.Photo - Profile Photo
Sub.Data.Faculty.FullName - Full Name
Sub.Data.Faculty.Title - Title
Sub.Data.Faculty.Bio - Bio
Weight:0
Styleguide Faculty.PhotosHorizontal
*/
/*
Twitter Button
Description: When a faculty member has a twitter handle, we can display a twitter button.
Markup:
{{> Sub.Data.Faculty.TwitterHandle }}
Data:
Sub.Data.Faculty.TwitterHandle - Twitter Handle
Weight:0
Styleguide Sub.Faculty.TwitterButton
*/
/*
Full Data with Photo
Description:
This component is used to display full information about faculty members, including a headshot, name, title, location, biography, and social media links.
Markup:
{{> "Sub.Data.Faculty.Photo"}}
{{> "Sub.Data.Faculty.FullName" }}
{{> "Sub.Data.Faculty.Title" }}
{{> "Sub.Data.Faculty.Location" }}
{{> "Sub.Data.Faculty.Bio"}}
{{> "Sub.Faculty.TwitterButton"}}
MarkupWrapperClasses: p_4
SubComponents:
Sub.Faculty.TwitterButton - Twitter Button
Data:
Sub.Data.Faculty.Photo - Faculty Photo
Sub.Data.Faculty.FullName - Faculty Full Name
Sub.Data.Faculty.Title - Faculty Title
Sub.Data.Faculty.Location - Faculty Location
Sub.Data.Faculty.Bio - Faculty Bio
FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.
NOTE: Please ensure that the faculty data, especially the biography, is properly formatted HTML.
Weight:0
Styleguide Faculty.Photos
*/
/*
Full Data Without Photo
Description: The most basic way we represent a faculty.
Markup:
{{> "Sub.Data.Faculty.FullName" }}
{{> "Sub.Data.Faculty.Title" }}
{{> Sub.Data.Faculty.Location }}
{{> Sub.Data.Faculty.Bio }}
{{> "Sub.Faculty.TwitterButton"}}
FORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.
Weight:0
Styleguide Faculty.NoPhotos
*/
/*
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
*/
/*
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
*/
/*
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
*/
/*
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
*/
/*
Pages
Combination of UI brought together for pages on the site.
Weight: 0
Styleguide Page
*/
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:
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: 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:
