\n\n\nWeight:20\n\nStyleguide Sub.Data.Sponsor.Address\n*/\n/*\nLogo\n\nDescription:\nLogo of the Company\n\nMarkup:\n\n\nMarkupWrapperClasses: max-w_40 relative h_20 w_100\n\n\nWeight:10\n\nStyleguide Sub.Data.Sponsor.Logo\n*/\n/*\nWeb Address\n\nMarkup:\nhttp://wwww.LogoIpsum.com\n\nWeight:25\n\nStyleguide Sub.Data.Sponsor.WebAddress\n*/\n/*\nWebsite Link\n\nMarkup:\n 'Sub.Data.Sponsor.WebAddress'}}\">Website\n\nWeight:26\n\nStyleguide Sub.Data.Sponsor.WebLink\n*/\n/* Nav Recipes.00x */\n/*\nCall to Action Buttons\n\nDescription: The Call to Action Button component is used to create a prominent button that encourages users to take a specific action.\n\nSign Up - Used to encourage users to register or create an account. It prompts them to take action and join a platform, service, or community.\nPurchase - 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.\nLearn More - Used explore further information about a product, service, or topic. It encourages them to click and discover additional details or resources.\nSubscribe - 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.\nGet 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.\n\nMarkup:\n\n\n\nNOTE: 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.\n\n\nWeight:1000\n\nStyleguide HTML.Inputs.Button.CTA\n*/\n/*\nButtons\n\nDescription: Basic Buttons and modifiers. \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button\n*/\n/*\nButtons Small\n\nDescription: Basic Buttons and modifiers. \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button.SM\n*/\n/*\nButtons Large\n\nDescription: Basic Buttons and modifiers. \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button.LG\n*/\n/* Recipes.40 */\n.address {\n font-style: unset;\n}\n\n@media only screen and (min-width: 640px) {\n .reverse-indent {\n display: inline-block;\n margin-left: 1em;\n padding-right: 1em;\n text-indent: -1em;\n width: 100%;\n }\n .reverse-indent:after {\n content: \"\";\n display: table;\n clear: both;\n }\n}\n/*\nGeneric Footer\n\nThis defines the web footer. \n\nMarkup:\n\n\nSubComponents: \nSub.Component.Navigation.Footer.Address - Addresses\nSub.Component.Navigation.Footer.Social - Social Links\nSub.Component.Navigation.Footer.ACCProductLinks - Sister Sites\nSub.Component.Navigation.Footer.Subfooter - Sub Footer\nSub.Component.Navigation.Footer.Cite - Citation for the Site\n\nWeight: 40\n\nStyleguide Component.Navigation.Footer\n*/\n/*\nSub Footer\n\nDescription: ACC has some basic legal information that should be on every property. \n\nMarkup:\n\n\n\n\n\nWeight: 0\n\nStyleguide Sub.Component.Navigation.Footer.Subfooter\n*/\n/*\n\tCite and Copyright\n\n\tContains copy right \n\n\tMarkup:\n
\n \n\n\nMarkupWrapperClasses:\n texture_dark p_4 max-w_30\n\nStyleguide Sub.Component.Navigation.Footer.Address\n\n*/\n/*\nFat Footers Links\n\nFooters in the ACC sometimes have fat footers with a list of categories and links. \n\nMarkup:\n\n
\n\n\nMarkupWrapperClasses:\n texture_dark p_4\n\n\nStyleguide Component.Navigation.Footer.Fat-Footer-Links\n\n*/\n/*\nACC Product Links\n\nLinks to the other major products in the ACC portfolio \n\nMarkup:\n\n\n
\n \n\n\nMarkupWrapperClasses:\ntexture_dark p_4\n\nStyleguide Sub.Component.Navigation.Footer.ACCProductLinks\n\n*/\n/*\nSocial Links\n\nThe college has a collection of social or secondary platforms we interact with.\n\nMarkup:\n\n
Stay Connected\n
\n
\n
\n
\n
\n
\n
\n \n
\n\n\nMarkupWrapperClasses:\ntexture_dark p_4 max-w_40\n\nStyleguide Sub.Component.Navigation.Footer.Social\n\n*/\n/* Nav Recipes.50 */\n/*\n Quick Utility Links\n\n Quick Links are only text links that are used for special cross marketing to sister sites and utility pages like about, home, extra. \n\n Markup:\n\n\nWeight:50\n\n\n Styleguide Component.Navigation.QuickLinks\n*/\n/* Nav Recipes.04x */\n/*\nAdvertisment Spaces\n\nAdvertising comes in static size so wrapper areas ease the alignment issues when in shared column spaces. \n\n Markup:\n
\n
\n \n
\n advertisment\n
\n\nMarkupWrapperClasses:\n max-w_30\n\nStyleguide Component.Advertisement\n*/\n/* content Recipes.100 */\n/*\nSocial Links\n\nThe social links From the Footer.\n\n\nMarkup:\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\nStyleguide Component.Navigation.SocialLinks\n\n*/\n/*\nSocial Links Monochrome\n\nThe social links can be restyled to be smaller.\n\n\nMarkup:\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\nStyleguide Component.Navigation.SocialLinks.Mono Chrome\n\n*/\n/*\nSocial Links Smaller\n\nThe social links can be restyled to be smaller.\n\n\nMarkup:\n\n
\n
\n
\n
\n
\n
\n
\n
\n\n\n\nStyleguide Component.Navigation.SocialLinks.Smaller\n\n*/\n/*\nCookie Banner\n\nDescription: 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.
\n
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.
\n
The system will allow the user to dismiss the pop up by clicking the Accept/OK button
\n
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.
\n
The system will track and record the users date/time when they accepted the pop up.
\n
\n\nMarkup:\n
\n
\n
\n
This site uses cookies to improve your experience.
\n\nMarkupWrapperClasses: relative\n\nNOTE: 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.\n\nWeight:100\n\nStyleguide Component.CookieBanner\n*/\n/* content Recipes.150 */\n/*\nOrdered Cards\n\nHaving cards order on page to help users find there way through steps can some times be very helpful. \n\nMarkup:\n
\n
\n
\n
\n
First it is bad
\n
\n
\n
This is a card.
\n
It has an easy to override visual style, and is appropriately subdued.
\n
\n
\n
\n
\n
\n
Then it is not right
\n
\n
\n
This is a card.
\n
It has an easy to override visual style, and is appropriately subdued.
\n
\n
\n
\n
\n
\n
At last it is good
\n
\n
\n
This is a card.
\n
It has an easy to override visual style, and is appropriately subdued.
\n
\n
\n
\n\nWeight: 150\n\nStyleguide Recipes.Ordered Cards\n*/\n/* content Recipes.250 */\n/*\n\nRead More Arrow\n\nThis 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.\n\nMarkup:\n\n \n \n\n\n\nStyleGuide Sub.Component.Common.ReadMoreArrow \n\n*/\n/*\n\n600w x 300h \n\nMarkup:\nhttps://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.600x300\n\n*/\n/*\n\n600w x 400h \n\nMarkup:\nhttps://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.600x400\n\n*/\n/*\n\n1200w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.1200x300\n\n*/\n/*\n\n375w x 250h\n\nMarkup:\nhttps://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.375x250\n\n*/\n/*\n320w x 300h\n\nMarkup:\nhttps://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.320x300\n\n*/\n/*\n\n1024w x 256h\n\nMarkup:\nhttps://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.1024x256\n\n*/\n/*\nAspect 21x9\n\nMarkup:\nhttps://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42\n\n\nStyleguide Sub.Placeholder.Image.21x9\n*/\n/*\nAspect 16x9\n\nMarkup:\nhttps://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42\n\n\nStyleguide Sub.Placeholder.Image.16x9\n*/\n/*\n\n300w x 400h\n\nMarkup:\nhttps://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.300x400\n\n*/\n/*\n\nsquare\n\nMarkup:\nhttps://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42\n\nStyleguide Sub.Placeholder.Image.Square\n\n*/\n/*\n\nMax 20 Character\n\nMarkup:\nDi dolores (20 Chars)\n\nStyleguide Sub.Placeholder.Text.20ch\n\n*/\n/*\n\nMax 30 Character\n\nMarkup:\nCommodi dolores (30 Characters)\n\nStyleguide Sub.Placeholder.Text.30ch\n\n*/\n/*\n\nMax 40 Character\n\nMarkup:\nRerum libg dero pariatur (40 Characters)\n\nStyleguide Sub.Placeholder.Text.40ch\n\n*/\n/*\n\nMax 60 Character\n\nMarkup:\nSed ut perspiciatis unde omnis iste natus er (60 Characters)\n\nStyleguide Sub.Placeholder.Text.60ch\n\n*/\n/*\n\nMax 80 Character\n\nMarkup:\nEius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters)\n\nStyleguide Sub.Placeholder.Text.80ch\n\n*/\n/*\n\nMax 100 Character\n\nMarkup:\nOfficia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)\n\nStyleguide Sub.Placeholder.Text.100ch\n\n*/\n/*\n\nMax 150 Character\n\nMarkup:\nSvel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)\n\nStyleguide Sub.Placeholder.Text.150ch\n\n*/\n/*\n\nMax 200 Character\n\nMarkup:\nDignissimos 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)\n\nStyleguide Sub.Placeholder.Text.200ch\n\n*/\n/*\n\nMax 250 Character\n\nMarkup:\nSed 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)\n\nStyleguide Sub.Placeholder.Text.250ch\n\n*/\n/*\n\nGrid - Triple Card Holder\n\nMarkup:\ncolumns_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\n\nNOTE:\nTriple up cards with shaded background are used only in full screen pages\n\nStyleguide Sub.ClassList.Grid.Card.Split-Triple \n\n*/\n/*\n\nTriple Split with Sidebar\n\nMarkup:\ncolumns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left\n\nNOTE:\nTriple up splits\n\nStyleguide Sub.ClassList.Grid.TripleLG\n\n*/\n/*\n\nGrid - Card Holder - 50 split\n\nMarkup:\ncolumns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid\n\nNOTE:\nsplit layouts great for half page cards\n\nStyleguide Sub.ClassList.Grid.Split-50\n\n*/\n/*\n\nGridList Triple on XL\n\nMarkup:\ncolumns_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\n\nStyleguide Sub.ClassList.Grid.TripleXL \n\n*/\n/*\n\nGridList Item Basic\n\nMarkup:\nflex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius\n\nNOTE:\nIcon and Header use differnt classes because they are a simpler component.\n\nStyleguide Sub.ClassList.Grid.Item \n\n*/\n/*\n\nSubs\n\n
Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as\n sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data\n points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone\n but are composed into larger, reusable structures.
\n
These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text,\n or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials\n ({{> 'Sub.X' }}) to render dynamic or variable content within patterns.
\n
Common use cases: - {{> 'Sub.Sub.Data.Duration'}} — Displays session duration -\n {{> 'Sub.Credit' modifier_class='CME'}} — Outputs a credit tag with a modifier -\n {{> 'Sub.ActionButtons.Favorite'}} — Interactive favorite/save button
\n\n\n\nNOTE: Subs are maintained as composable units to promote consistency, reduce repetition, and streamline pattern updates across the system.\n\nStyleguide Sub\n*/\n/*\nPlaceholders\n\nPlaceholders are just used across the styleguide. The can be either text or image stand ins for the UI.\n\nWeight: 9999\n\nStyleguide Sub.Placeholder\n*/\n/*\nRecipe\n\nPatterns that are used through out the refactors on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe\n*/\n/*\nArticles\n\nThere are multiple sub components that are used through out the most common page type on ACC.org\n\nWeight: 1000\n\nStyleguide Sub.Recipe.Article\n*/\n/*\nData\n\nThere 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.\n\nWeight: 500\n\nStyleguide Sub.Data\n*/\n/*\nClass Lists\n\nArches 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\n\nWeight: 2000\n\nStyleguide Sub.ClassList\n*/\n/*\n\nRich Text \n\nMarkup:\n
\n
Lorem Ipsum
\n
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.
\n
Header Level 2
\n \n
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
\n
Aliquam tincidunt mauris eu risus.
\n \n
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.
\n
Header Level 3
\n
\n
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
\n
Aliquam tincidunt mauris eu risus.
\n
\n \n\t\n Table of Contents\n
\n \n
How to Prepare for the Boards
\n
General Principles of Cardiovascular Medicine\n
\n
Arrhythmias
\n
Coronary Artery Disease
\n
Heart Failure & Cardiomyopathy
\n
Valvular Disease
\n
Pericardial Disease
\n
Congenital Heart Disease
\n
Vascular Diseases
\n
Systemic Hypertension and Hypotension
\n
Pulmonary Circulation Disorders
\n
Systemic Disorders Affecting the Circulatory\n System
\n\nWeight: 100\n\nStyleguide Bootstrap.Pagination\n\n*/\n/*\nTabs\n\nA simple way to show small groups of content that should have the same level of reading hierarchy. \n\nMarkup:\n\n
\n
\n
consectetur adipisicing elit
\n 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.
\n
\n
Lorem ipsum dolor sit
\n 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.
\n
\n\nMarkupWrapperClasses:\n\nSubComponents:\nSub.Component.Structures.Tabs.Tab.LinkActives - Active Tab\nSub.Component.Structures.Tabs.Tab.Link - Tab\nSub.Component.Structures.Tabs.Tab.LinkDisabled - Disabled Tab\n\nCaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight:0\n\nStyleguide Component.Structures.Tabs.\n*/\n/*\nSimple Tabs: Dark Mode\n\nReverse Colored Tabs for when on dark background\n\nMarkup:\n
\n \n
\n\nWeight: 0\n\nStyleguide Sub.Component.Structures.Tabs.TabDark\n*/\n/*\nTab Dark: Active\n\nDescription: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4\n\nWeight:0\n\n\nStyleguide Sub.Component.Structures.Tabs.TabDark.Link\n*/\n/*\nTab Dark: Disabled\n\nDescription: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.\n\nMarkup:\n
\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4 \n\nWeight:0\n\n\nStyleguide Sub.Component.Structures.Tabs.TabDark.LinkDisabled\n*/\n/*\nTab: Active\n\nDescription: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n\nMarkupWrapperClasses: 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\n\nWeight:0\n\nStyleguide Sub.Component.Structures.Tabs.Tab.LinkActive\n*/\n/*\nTab: Basic\n\nDescription: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n\n\nMarkupWrapperClasses: 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\n\nWeight:0\n\nStyleguide Sub.Component.Structures.Tabs.Tab.Link\n*/\n/*\nTab: Disabled\n\nDescription: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.\n\nMarkup:\n
\n\nMarkupWrapperClasses: 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\n\nWeight:0\n\nStyleguide Sub.Component.Structures.Tabs.Tab.LinkDisabled\n*/\n/*\nUI Tabs\n\nThe application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.\n\nMarkup:\n
\n \n
\n
\n {{> Sub.Placeholder.Typography }}\n
\n
\n {{> Sub.Placeholder.Typography }}\n
\n
\n
\n\nMarkupWrapperClasses: p_4\n\ncaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight:0\n\nStyleguide Component.Structures.UITabs\n*/\n/*\nUI Tabs Overflow\n\nThe application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.\n\nMarkup:\n
\n \n
\n
\n {{> Sub.Placeholder.Typography }}\n
\n
\n {{> Sub.Placeholder.Typography }}\n
\n
\n
\n\nMarkupWrapperClasses: p_4\n\ncaution: This item is not finalized and might be subject to change\n\nNote: 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. \n\nWeight:0\n\nStyleguide Component.Structures.UITabs.Overflow\n*/\n/*\nTab: Default\n\nDescription: Active State of Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n Link\n
\n\n\n\ncaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nMarkupWrapperClasses: flex ul_none\n\nWeight:0\n\nStyleguide Sub.Component.Structures.UITabs.Tab\n*/\n/*\nTab: Active\n\nDescription: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n\nMarkupWrapperClasses: flex ul_none\n\ncaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight:0\n\nStyleguide Sub.Component.Structures.UITabs.Tab.LinkActive\n*/\n/*\nTab: Disabled\n\nDescription: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.\n\nMarkup:\n
\n\n\ncaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nMarkupWrapperClasses: flex ul_none\n\nWeight:0\n\nStyleguide Sub.Component.Structures.UITabs.Tab.LinkDisabled\n*/\n/*\nScroll Overflow Script\n\nDescription: Javascript is needed to make the scrolls work on the page\n\nMarkup:\n\nMarkupWrapperClasses: p_4\n\ncaution: This item is not finalized and might be subject to change\n\nWeight:0\n\nStyleguide Component.Structures.UITabs.Script\n*/\n/*\nSidebar Nav\n\nDescription: Side bar for any 3 layer nav on the site. the parent node is from the main nav.\n\nMarkup:\n\n\nWeight:-1000\n\nMarkupWrapperClasses: max-w_25 m_auto \n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nStyleguide Component.Navigation.Sidebar\n*/\n/*\nParent NavItem\n\nDescription: 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.\n\nMarkup:\n
\n\nWeight: -100\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.Parent\n*/\n/*\nChild NavItem\n\nDescription: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.\n\ndefault - No added class \nactive - Nav Item changes its decoration if this the page the user is on.\n\nMarkup:\n
\n\nWeight: 10\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.Child\n*/\n/*\nToggle Child\n\nDescription: 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.\n\ndefault - the toggle when it doesn't have an active class still shades on hover\nactive - shade the toggle\n\nMarkup:\n
\n\nWeight: -10\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.ChildToggle\n*/\n/*\nChild NavItem With Children\n\nDescription: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.\n\n\nMarkup:\n
\n\nWeight: 15\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.ChildWithChildren\n*/\n/*\nChild NavItem With Grand Children\n\nDescription: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.\n\nMarkup:\n
\n\nWeight: 15\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nStyleguide Component.Navigation.Sidebar.ChildWithGrandChildren\n*/\n/*\nGreat Grandchild NavItem\n\nDescription: 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.\n\ndefault - No added class \nactive - Nav Item changes its decoration if this the page the user is on.\n\nMarkup:\n
\n\nWeight: 100\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.GreatGrandchild\n*/\n/*\nBootstrap Toggle Rotation\n\nThe 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.
\n\nexpanded - when the associated content is expanded the toggle will look like this\ncollapsed - when the associated content is collapsed the class is added to the toggle and it will look like this. \n\nMarkup:\n
\n \n
\n
\n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n \n
\n\n\nWeight: 100\n\nStyleguide Component.Navigation.Toggle.Rotation\n\n*/\n/*\nToggle \n\nToggle elements of a collapse with user feed back of the icon rotating.\n\n#targetName - the name of the target of the collapse\n\nMarkup:\n
\n \n
\n\nWeight: -10\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle\n*/\n/*\nToggle Chevron\n\nToggle elements of a collapse with user feed back of the icon rotating.\n\n#targetName - the name of the target of the collapse\n\nMarkup:\n
\n \n
\n\nWeight: -80\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle.Chevron\n*/\n/*\nCollapse Toggle Advanced\n\nToggle elements of a collapse with user feed back of the icon morphing.\n\n#targetName - the name of the target of the collapse\n\nMarkup:\n
\n \n \n \n \n
\n\nWeight: -100\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle.Advanced\n*/\n/*\nCollapse Toggle Advanced with Square\n\nToggle elements of a collapse with user feed back of the icon morphing.\n\n#targetName - the name of the target of the collapse\n\nMarkup:\n
\n \n \n \n \n \n
\n\nWeight: -90\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle.AdvancedSquare\n*/\n/*\nAccordion\n\nIn 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.\n\nMarkup:\n
\n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nWeight:0\n\nStyleguide Component.Accordion\n*/\n/*\nAccordion Child\n\nDescription: Sometimes the content needs be collapsed at a secondary level to make it scannable. \n\nMarkup:\n
\n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nWeight:0\n\nStyleguide Component.Accordion.Child\n*/\n/*\nAccordion Nested Example\n\nIn 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.\n\nMarkup:\n
\n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nWeight:0\n\nStyleguide Component.Accordion.Nested\n*/\n/*\nAgenda Item\n\nDescription:\nAgenda items are sessions that are scheduled for a specific date, location, and time.\n\nWeight:0\n\nStyleguide Sub.Data.Agenda\n*/\n/*\nAgenda ID\n\nDescription:\nThe ID given to an Agenda. This number is unique to the Agenda and is incremented for each new Agenda created.\n\nMarkup:\n101\n\nWeight:1\n\nStyleguide Sub.Data.Agenda.ID\n*/\n/*\nChannel Name\n\nDescription:\nA channel is a visible category that an Agenda Item belongs to.\n\nMarkup:\nNavigating Health Care Economics \n\n\nWeight:1\n\nStyleguide Sub.Data.Agenda.ChannelName\n*/\n/*\nLive Time\n\nDescription:\nThe time at which a Agenda is live.\n\nMarkup: @ {{> Sub.Data.Agenda.ReleaseTime }} – {{> Sub.Data.Agenda.ReleaseTime }} EDT\n\nFORMAT: 12 hour with 'a.m.'/'p.m' and Abbreviation of Timezone.\n\nNOTE: 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.\n\nWeight:0\n\nStyleguide Sub.Data.Agenda.LiveTime\n*/\n/*\nRelease Time\n\nDescription:\nThe time at which a Agenda is item is scheduled to be active, give access, or start playing.\n\nMarkup: 11:15 a.m.\n\nFORMAT: 12 hour with 'a.m.'/'p.m'.\n\nWeight:0\n\nStyleguide Sub.Data.Agenda.ReleaseTime\n*/\n/*\nEnd Time\n\nDescription:\nThe time at which a Agenda item is scheduled to end.\n\nMarkup: 12:15 p.m.\n\nFORMAT: 12 hour with 'a.m.'/'p.m'.\n\nWeight:0\n\nStyleguide Sub.Data.Agenda.EndTime\n*/\n/*\nLive Date\n\nDescription:\nThere is usually a delay to when recording will make it to on demand. This is the time that recording will be available.\n\nMarkup: Saturday, Nov. 20, 2021 \n\nFORMAT: Day-of-Week, Month-Abbreviation. Day, Year\n\nWeight:0\n\nStyleguide Sub.Data.Agenda.LiveDate\n*/\n/*\nOn Demand Release Date and Time\n\nDescription:\nThere is usually a delay to when recording will make it to on demand. This is the time that recording will be available.\n\nMarkup: Saturday, Nov. 20, 2021 @ 8:00 p.m. EDT\n\nFORMAT: Day-of-Week, Month-Abbreviation. Day, Year @ Hour:Minute 'a.m.'/'p.m' Abbreviation-of-Timezone. \n\nNOTE: Use the simple abbreviation for the timezone without Daylight Savings Time. IE: ET not EDT or EST.\n\nWeight:0\n\nStyleguide Sub.Data.Agenda.onDemandReleaseTime\n*/\n/*\nSession \n\nA Session is a specific time slot in an Agenda. This could be either a single presentation or a series of presentations.\n\nMarkup:\nElectrical Disorders - Rhythm and Conduction Disorders\n\nExperiential: This is not an approved data point.\n\nWeight:100\n\nStyleguide Sub.Data.Session\n*/\n/*\nSession Subtitle\n\nThe subtitle of a Session.\n\nMarkup:\nElectrical Disorders - Rhythm and Conduction Disorders\n\nExperiential: This is not an approved data point.\n\nWeight:2\n\nStyleguide Sub.Data.Session.Subtitle\n*/\n/*\nSession Title\n\nDescription:\nThe title of a Session.\n\nMarkup:\nCardiovascular Update for the Clinician III\n\nWeight:1\n\nStyleguide Sub.Data.Session.Title\n*/\n/*\nSession Identifier\n\nDescription:\nThe ID given to a session\n\nMarkup:\n3652\n\nWeight:0\n\nStyleguide Sub.Data.Session.ID\n*/\n/*\nSession Description\n\nThe description of a session.\n\nMarkup:\n
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.
\n\nWeight:3\n\nStyleguide Sub.Data.Session.Description\n*/\n/*\nPresentation \n\nDescription:\nA presentation is a single part of education that can not be subdivided.\n\nWeight:0\n\nStyleguide Sub.Data.Presentation\n*/\n/*\nPresentation Description\n\nDescription:\nThe Description of a presentation\n\nMarkup:Drug Coated Balloons\n\nWeight:500\n\nStyleguide Sub.Data.Presentation.Description\n*/\n/*\nPresentation Title\n\nDescription:\nThe title of a presentation\n\nMarkup:\nNew York Cardiovascular Symposium 2021 Welcome Video and Introduction of Session and Faculty\n\nWeight:0\n\nStyleguide Sub.Data.Presentation.Title\n*/\n/*\nPresentation Live Time\n\nDescription:\nThe Live Time of a Presentation\n\nMarkup:\n11:45 – 11:49 a.m. ET\n\nFORMAT: 12 hour with 'a.m.'/'p.m' and Abbreviation of Timezone.\n\nNOTE: 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.\n\n\nWeight:0\n\nStyleguide Sub.Data.Presentation.LiveTime\n*/\n/*\nPresentation ID\n\nDescription:\nUnique system generated identifier for a presentation.\n\nMarkup:\n15612\n\nWeight:0\n\nStyleguide Sub.Data.Presentation.ID\n*/\n/*\nFaculty \n\nDescription:\nAn educator who created or participated in a presentation\n\nWeight:1000\n\nStyleguide Sub.Data.Faculty\n*/\n/*\nPhoto\n\nDescription:\nA photo of the faculty member\n\nMarkup:\n \"Sub.Data.Faculty.FullName\" }}\"\n/>\n\nMarkupWrapperClasses: max-w_30\n\nFORMAT: 300px by 300px\n\nWeight:0\n\nStyleguide Sub.Data.Faculty.Photo\n*/\n/*\nFull Name\n\nThe full name of the faculty member\n\nMarkup: Pepper H. Soda III, MD, FACC\n\n\nFORMAT: First Name MI (if known) Last Name Suffix (Jr., Sr., the III ), Optional Degree, Optional ACC Honorifics, Optional Exceptions Honorifics\n\nWeight:0\n\nStyleguide Sub.Data.Faculty.FullName\n*/\n/*\nLocation\n\nDescription:\nThe location of the faculty member\n\nMarkup: New York, NY, USA\n\nWeight:0\n\nFORMAT: City, State, Country\n\nNOTE: if the conference country is USA you can drop the country if it is USA.\n\nStyleguide Sub.Data.Faculty.Location\n*/\n/*\nTitle\n\nDescription:\nthe roles of the faculty member within the session\n\nMarkup:\n{{> \"Sub.Data.Faculty.Title.InstitutionTitle\" }}, {{> \"Sub.Data.Faculty.Title.InstitutionDivision\" }}, {{> \"Sub.Data.Faculty.Title.Institution\" }}\n\n\n\nFORMAT: Institution Title, Institution Division, Institution\n\nNOTE: This format is currently not being enforced.\n\nWeight:100\n\nStyleguide Sub.Data.Faculty.Title\n*/\n/*\nInstitution\n\nDescription:\nInstitution of the faculty member where they hold a title\n\nMarkup:\nMount SugarLoaf Hospital\n\nWeight:101\n\nStyleguide Sub.Data.Faculty.Title.Institution\n*/\n/*\nInstitution Division\n\nDescription:\nThe Division of the Institution of the faculty member where they hold a title\n\nMarkup:\nDepartment of Cardiology\n\nWeight:102\n\nStyleguide Sub.Data.Faculty.Title.InstitutionDivision\n*/\n/*\nInstitutional Title\n\nDescription:\nthe roles of the faculty member within the session\n\nMarkup:\nPhysician-in-Chief\n\nWeight:103\n\nStyleguide Sub.Data.Faculty.Title.InstitutionTitle\n*/\n/*\nTwitter Handle\n\nDescription:\nThe handle of the faculty member on twitter\n\nMarkup:\nTweat_DrSoda\n\nWeight:0\n\nStyleguide Sub.Data.Faculty.TwitterHandle\n*/\n/*\nRole\n\nDescription:\nthe roles of the faculty member within the session\n\nMarkup:\nCo-Chair\n\nWeight:0\n\nStyleguide Sub.Data.Faculty.Role\n*/\n/*\nBio\n\nDescription:\nsimple html text that describes the faculty member\n\nMarkup:\n
Omnis laboriosam vero dolorum harum nihil debitis placeat eligendi. Molestiae voluptatibus nemo eveniet. Vero ipsum eius. Alias sapiente quidem dolore dolorem atque alias est.
\n\nWeight:0\n\nStyleguide Sub.Data.Faculty.Bio\n*/\n/*\nIdentification Number\n\nDescription:\nthis id can both be used to link to the faculty member's page, the member's image, and disclosures\n\nMarkup:\n122154254\n\nWeight:0\n\nStyleguide Sub.Data.Faculty.ID\n*/\n/*\nSponsor\n\nDescription:\nSponsor are industry that has offered money or support to an event.\n\nWeight:0\n\nStyleguide Sub.Data.Sponsor\n*/\n/*\nName\n\nMarkup:\nLogoIpsum\n\nWeight:-100\n\nStyleguide Sub.Data.Sponsor.Name\n*/\n/*\nAddress\n\nDescription:\nSponsor's Name\n\nMarkup:\n\n \n
\n\n\nWeight:20\n\nStyleguide Sub.Data.Sponsor.Address\n*/\n/*\nLogo\n\nDescription:\nLogo of the Company\n\nMarkup:\n\n\nMarkupWrapperClasses: max-w_40 relative h_20 w_100\n\n\nWeight:10\n\nStyleguide Sub.Data.Sponsor.Logo\n*/\n/*\nWeb Address\n\nMarkup:\nhttp://wwww.LogoIpsum.com\n\nWeight:25\n\nStyleguide Sub.Data.Sponsor.WebAddress\n*/\n/*\nWebsite Link\n\nMarkup:\n 'Sub.Data.Sponsor.WebAddress'}}\">Website\n\nWeight:26\n\nStyleguide Sub.Data.Sponsor.WebLink\n*/\n/*\nWebsite Link\n\nMarkup:\n 'Sub.Data.Sponsor.WebAddress'}}\">More\n\nWeight:26\n\nStyleguide Sub.Data.Sponsor.MoreLink\n*/\n/*\nPDF Link\n\nMarkup:\n 'Sub.Data.Sponsor.WebAddress'}}.pdf\">PDF\n\nWeight:26\n\nStyleguide Sub.Data.Sponsor.PDFLink\n*/\n/*\nDescription\n\nDescription: Short html description of the sponsor or the product.\n\nMarkup:\n
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?
\n
\n
Ut reiciendis et possimus rerum animi.
\n
Reprehenderit quia et eaque cupiditate illo explicabo architecto.
\n
Et cumque distinctio maxime maiores aut labore ut est esse.
\n
\n
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.
\n\nWeight:3\n\nStyleguide Sub.Data.Sponsor.Description\n*/\n/*\nAward\n\nDescription: Awards and Recognition \n\nWeight:5\n\nStyleguide Sub.Data.Award\n\n*/\n/*\nAward Title\n\nDescription: Title of the award\n\nMarkup:\nPamela S. Douglas Distinguished Award for Leaderiship in Diversity and Inclusion\n\nWeight:5\n\nStyleguide Sub.Data.Award.Title\n\n*/\n/*\nAward Description\n\nDescription: Description of the award can be html or text and may include a link.\n\nMarkup:\n
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?
\n
\n
Ut reiciendis et possimus rerum animi.
\n
Reprehenderit quia et eaque cupiditate illo explicabo architecto.
\n
Et cumque distinctio maxime maiores aut labore ut est esse.
\n
\n
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.
\nWatch Video\n\nWeight:5\n\nStyleguide Sub.Data.Award.Description\n\n*/\n/*\nAbstract \n\nA Abstract is a specific time slot in an Agenda. This could be either a single presentation or a series of presentations.\n\nMarkup:\nElectrical Disorders - Rhythm and Conduction Disorders\n\nExperiential: This is not an approved data point.\n\nWeight:100\n\nStyleguide Sub.Data.Abstract\n*/\n/*\nAbstract Subtitle\n\nThe subtitle of a Abstract.\n\nMarkup:\nElectrical Disorders - Rhythm and Conduction Disorders\n\nExperiential: This is not an approved data point.\n\nWeight:2\n\nStyleguide Sub.Data.Abstract.Subtitle\n*/\n/*\nAbstract Title\n\nDescription:\nThe title of a Abstract.\n\nMarkup:\nAbstract on Cardiovascular Update for the Clinician Success H2\n\nWeight:1\n\nStyleguide Sub.Data.Abstract.Title\n*/\n/*\nAbstract Identifier\n\nDescription:\nThe ID given to a Abstract\n\nMarkup:\n3652\n\nWeight:0\n\nStyleguide Sub.Data.Abstract.ID\n*/\n/*\nAbstract Description\n\nThe description of a Abstract.\n\nMarkup:\n
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.
\n\nWeight:3\n\nStyleguide Sub.Data.Abstract.Description\n*/\n/*\nHeader Nav\n\nThe header nav for the website. \n\nMarkup:\n
\n \n
\n\nWeight: 0\n\nSubComponents: \nComponent.Navigation.HeaderNav.MobileButton - Primary\nComponent.Navigation.HeaderNav.Active - Primary: Active\nComponent.Navigation.HeaderNav.Disabled - Primary: Disabled\nComponent.Navigation.HeaderNav.MobileToggle - Mobile Menu Toggle\nComponent.Navigation.HeaderNav.MobileHidden - Secondary\nComponent.Navigation.HeaderNav.MobileHiddenDisabled - Secondary: Disabled\nComponent.Navigation.HeaderNav.ExpandMobileLinks - Mobile Menu Link\nComponent.Navigation.HeaderNav.ExpandMobileLinksDisabled - Mobile Menu Link: Disabled\n\nStyleguide Component.Navigation.HeaderNav\n*/\n/*\nBase Header Nav (Primary)\n\nHeader 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. \n\nMarkup:\n\n
\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nStyleguide Component.Navigation.HeaderNav.MobileButton\n*/\n/*\nMobile Toggle\n\nToggle button for the expanding mobile menu.\n\nMarkup:\n\n
\n\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nStyleguide Component.Navigation.HeaderNav.MobileToggle\n*/\n/*\nBase Header Nav (Secondary)\n\nHeader 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. \n\nMarkup:\n\n
\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nStyleguide Component.Navigation.HeaderNav.MobileHidden\n*/\n/*\nMobile Hidden Header Nav Disabled\n\nHeader 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. \n\nMarkup:\n\n
\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nStyleguide Component.Navigation.HeaderNav.MobileHiddenDisabled\n*/\n/*\nMobile Menu Link\n\nHeader Nav in mobile view has an expanded more list that hides the secondary nav items. \n\nMarkup:\n
\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nStyleguide Component.Navigation.HeaderNav.ExpandMobileLinks\n*/\n/*\nMobile Menu Link Disabled\n\nHeader Nav in mobile view has an expanded more list that hides the secondary nav items. \n\nMarkup:\n
\n\nMarkupWrapperClasses: ul_none\n\nWeight: 0\n\nStyleguide Component.Navigation.HeaderNav.ExpandMobileLinksDisabled\n*/\n/*\nNav Active\n\nHeader 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. \n\nMarkup:\n\n
\n\nMarkupWrapperClasses: ul_none\n\nWeight: -1\n\nStyleguide Component.Navigation.HeaderNav.Active\n*/\n/*\nNav Disabled\n\nDisabled 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.\n\nMarkup:\n
\n\nMarkupWrapperClasses: ul_none\n\nWeight: 10\n\nStyleguide Component.Navigation.HeaderNav.Disabled\n*/\n/*\n\nHeader Branding Area\n\nConferences 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.\n\n\nWeight: -999\n\nStyleguide Structures.BrandArea\n\n*/\n/*\n\nHeader Brand Area - Logged in\n\nDescription: This is the logged in header brand area.\n\nMarkup:\n
\n\nMarkupWrapperClasses: relative \n\nWeight:0\n\nStyleguide Structures.BrandArea.LoggedIn.Button\n*/\n/*\n\nUnsafe Area\n\nDescription: Because the UI is floats on top of the images there are area that are unsafe to contain text. \n\nMarkup:\n
\n\nMarkupWrapperClasses: relative \n\nWeight: -999\n\nStyleguide Structures.BrandArea.UnSAFE\n\n*/\n/*\n\nHeader Brand Area - Logged Out\n\nDescription: This is the logged Out header brand area.\n\nMarkup:\n
\n\nMarkupWrapperClasses: relative \n\nWeight: -1000\n\nStyleguide Structures.BrandArea.LoggedOut\n\n*/\n/*\nCertified Education Block\n\nDescription: 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. \n\nMarkup:\n
Certified Education Credit Claim\n
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.\n
Credit must be claimed by\n\t\t\t\t\t\tDecember 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.\n
\n\n MarkupWrapperClasses:\n max-w_40\n\nWeight:0\n\nStyleguide Structures.Evergreen.Credits\n*/\n/*\nSub Components\n\nThese sub elements are used in many of the patterns and may be useful when building more complex components. \n\nWeight: 200000\n\nStyleguide Sub\n*/\n/*\nProgram\n\nPrograms are build via sessions, presentations, and workshops.\n\nWeight: 200000\n\nStyleguide Sub.Program\n*/\n/*\nDate Time Separators\n\nSessions are divided by date time markers that have been set to east coast time with a reference to GMT. \n\nMarkup:\n
\n\nFORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.\n\nData: \nSub.Data.Agenda.LiveDate - Live Date\nSub.Data.Agenda.LiveTime - Live Time\n\nMarkupWrapperClasses: p_4 br_inherit\n\nWeight: 100\n\nStyleguide Sub.DateTimeDividers\n*/\n/*\nCredit Dot\n\nDots are used to indicate the credit that this education offers.\n\nCME - CME\nCNE - CNE\nAAPA - AAPA\nABP - ABP\nABPMOCII - ABPMOCII\nABPMOCIV - ABPMOCIV\nACHE - ACHE\n\n\nMarkup:\n
\n {{ modifier_class }} \n
\n\nNote: This pattern requires the inclusion of the credit color stylesheets.\n\nFORMAT: This element uses data that has strict data formatting requirements. See color codes => credits.\n\nWeight:0\n\nStyleguide Sub.Credits\n*/\n/*\nSimple Credit Dots\n\nWhen it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution. \n\nMarkup:\n
\n\nNote: This pattern requires the inclusion of the credit color stylesheets.\n\nSubComponents: Sub.Credits\n\nWeight:0\n\nStyleguide Sub.Credits.Dots\n\n*/\n/*\n\nNon Accredited\n\ndescription\n\nMarkup:\nIndustry Session | Nonaccredited\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Credits.NonAccredited\n*/\n/*\nCategory Flags\n\nDescription: A graphic treatment for the category flags which are tags applied like channel and type.\n\nMarkup:\n
\n
\n
{{>\"Sub.Data.Agenda.ChannelName\"}}
\n
Category Tag
\n
\n
\n\nData: Sub.Data.Agenda.ChannelName - Channel Name\n\nWeight:0\n\nStyleguide Sub.CategoryFlags\n*/\n/*\n\nTags\n\nA 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. \nMarkup:\n\nWeight:0\n\nStyleguide Sub.Tags\n*/\n/*\nCategory Tag\n\nCategory Tags are singular tags that divide content. An item can only have a single tag from a category group. \n\nMarkup:\n
\n
Channel 1
\n
{{>\"Sub.Data.Agenda.ChannelName\"}}
\n
\n\n\nWeight:0\n\nStyleguide Sub.Tags.Category\n\n*/\n/*\nFilter Tags\n\nFilter Tags are decorative tags that are used to filter content. Many tags from a single group can be applied to a single item.\n\nMarkup:\n
\n
Tag Name 1
\n
Daugherty - Larkin
\n
relationships
\n
web-readiness
\n
\n\n\nWeight:0\n\nStyleguide Sub.Tags.Filter\n\n*/\n/*\nPresentation List Item\n\nWhen 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. \n\nMarkup:\n
\n\n\nMarkupWrapperClasses: ul_none br-t_1 br_solid br_primary p_0 font_n1 bg_primary-n3\n\nFORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.\n\nData:\nSub.Data.Presentation.Title - Title\nSub.Data.Presentation.LiveTime - Live Time\n\nSubComponents:\nSub.FacultyList - Faculty List\nSub.ActionButtons.Favorite.Small - Small Action Button\n\nClassList:\nSub.ClassList.Border.BlackTop - Border Top\n\nWeight:0\n\nStyleguide Sub.Presentation.ListItem\n*/\n/*\nPresentation List Item With Details\n\nWhen 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. \n\nMarkup:\n
\n\n\nMarkupWrapperClasses: ul_none br-t_1 br_solid br_primary p_0 font_n1 bg_primary-n3\n\nFORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.\n\nNOTE: This might not function completely because of the JavaScript on the page in side the styleguide documentation.\n\nData:\nSub.Data.Presentation.Title - Title\nSub.Data.Presentation.LiveTime - Live Time\n\nSubComponents:\nSub.FacultyList - Faculty List\nSub.ActionButtons.Favorite.Small - Small Action Button\n\nClassList:\nSub.ClassList.Border.BlackTop - Border Top\n\nWeight:0\n\nStyleguide Sub.Presentation.ListItemWithDetails\n*/\n/*\nPresentation List\n\nList of Presentations is similar DOM independent of the context. \n\nMarkup:\n
\n\nSubComponents:\nSub.Presentation.ListItem - List Item\nSub.Presentation.ListItemWithDetails - List Item with Details\n\n\nWeight:0\n\nStyleguide Sub.Presentation.List\n*/\n/*\nAuxiliary Data\n\nDescription: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.\n\nMarkup:\n\n\nSubComponents:\nSub.Credits.NonAccredited - Non Accredited\nSub.FacultyList.AuxSession - Session Faculty Lists\nSub.Credits.Dots - Credit Dots\nSub.Tags.Category - Category\nSub.Tags.Filter - Tags\n\nWeight:0\n\nStyleguide Sub.Player.AuxData\n*/\n/*\nAuxiliary Data Not Accredited\n\nDescription: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.\n\nMarkup:\n\n\nSubComponents:\nSub.Credits.NonAccredited - Non Accredited\nSub.FacultyList.AuxSession - Session Faculty Lists\nSub.Credits.Dots - Credit Dots\nSub.Tags.Category - Category\nSub.Tags.Filter - Tags\n\nWeight:0\n\nStyleguide Sub.Player.AuxSub.Data.NotAccredited\n*/\n/*\nAuxiliary Data Abstracts\n\nDescription: Most players have auxiliary data zones that describe the playing element through credits, tags, and categories.\n\nMarkup:\n\n\nSubComponents:\nSub.Credits.Dots - Credit Dots\nSub.Tags.Category - Category\nSub.Tags.Filter - Tags\n\nWeight:0\n\nStyleguide Sub.Player.AuxSub.Data.Abstracts\n*/\n/*\nAttachments Modal\n\nDescription: \n\nMarkup:\n
\n
\n
\n
\n
Attachments
\n \n
\n
\n
\n
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.
\n
lorem text link\n
\n
\n
\n
\n \n
\n
\n
\n
\n\n MarkupWrapperClasses: relative\n\n Note: A `block relative` class was added to this DOM element to make it visible in this documentation. \n\n Weight: 200\n\nStyleguide Sub.Attachments\n*/\n/*\nPlaying Date Time\n\nWhen presenting the playing date and time this simple dot pattern is a good solution.\n\nMarkup:\n{{> \"Sub.Data.Agenda.LiveDate\"}} {{> \"Sub.Data.Agenda.LiveTime\" }}\n\nWeight:0\n\nStyleguide Sub.PlayingDateTime\n*/\n/*\nVideo Thumbnail\n\nDescription: 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.\n\nbg_primary - is the default background color\nbg_accent - any background color can be swapped out\n\nMarkup:\n\n
\n \n
\n\n\nWeight:0\n\nStyleguide Sub.Header.VideoThumbnail\n*/\n/*\nAbstract Thumbnail\n\nDescription: 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.\n\nbg_primary - is the default background color\nbg_accent - any background color can be swapped out\n\nMarkup:\n\n
\n \n
\n\n\nWeight:0\n\nStyleguide Sub.Header.AbstractThumbnail\n*/\n/*\nFavorite Button\n\nThe favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.\n\nactive - when the favorite is active\n\nMarkup:\n\n\nWeight:0\n\nStyleguide Sub.ActionButtons.Favorite\n*/\n/*\nFavorite Button (Disabled)\n\nThe favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.\n\nactive - when the favorite is active\n\nMarkup:\n\n\nWeight:0\n\nStyleguide Sub.ActionButtons.Favorite.Disabled\n*/\n/*\nFavorite Button Small\n\nThe favorite button is a simple icon that can be used to add or remove a favorite. This button reflects the state of the favorite.\n\nactive - when the favorite is active\n\nMarkup:\n\n\nWeight:0\n\nStyleguide Sub.ActionButtons.Favorite.Small\n*/\n/*\nAction Buttons\n\nThe 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.\n\nWatch - when the main asset of the loaded page is a video or live stream.\nJoin - when the main asset of the loaded page is an online meeting or webinar.\nListen - when the main asset of the loaded page is a podcast or audio.\nView - when the main asset of the loaded page is a graphic, pdf, or slide deck.\n\n\nMarkup:\n\n\nWeight:0\n\nStyleguide Sub.ActionButtons\n*/\n/*\nLocked Attachment Button\n\nAttachments 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.\n\n\nMarkup:\n
\n Attachments\n
\n\nWeight:0\n\nNOTE: 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.\n\nStyleguide Sub.ActionButtons.LockedAttachments\n*/\n/*\n\nEmbargoed Attachment Actions Buttons\n\n\nMarkup:\n\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.ActionButtons.EmbargoedAttachments\n*/\n/*\nAction Buttons No Details\n\nDescription: 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.\n\nwatch - watch action button\n\nMarkup:\n\n\nWeight:0\n\nStyleguide Sub.ActionButtons.NoDetails\n\n*/\n/*\nAction Buttons Only\n\nThe Actions buttons are a combination of functions and a link to the education materials player. \n\nwatch - watch action button\n\nMarkup:\n\n\nWeight:0\n\nStyleguide Sub.ActionButtons.Only\n\n*/\n/*\nAction Buttons On Demand\n\nThe On Demand Actions buttons never have the calendar reminder button. \n\n\n\nMarkup:\n\n\nWeight:200\n\nStyleguide Sub.ActionButtons.OnDemand\n*/\n/*\nAction Buttons Featured\n\nThe Featured Actions buttons never have the calendar reminder button. \n\n\n\nMarkup:\n\n\nWeight:200\n\nStyleguide Sub.ActionButtons.Featured\n*/\n/*\nAbstract Flag\n\nAbstract 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.\n\nfa-star - this denote the premium awarded abstracts (e.g. top 10)\nfa-angle-up - this denote the premium awarded abstracts (level up 1)\nfa-angle-double-up - this denote the premium awarded abstracts (level up 2)\n\nMarkup:\n
\n \n \n
\n\n\nWeight:0\n\nStyleguide Sub.Award.Flags\n*/\n/*\nAbstract Flag Legend\n\nMarkup:\n
\n
\n
\n {{> \"Sub.Award.Flags\" modifier_class=\"fa-star\"}}\n Special Category\n
\n
\n {{> \"Sub.Award.Flags\" modifier_class=\"\"}}\n Top Ten\n
\n
\n
\n\n\nWeight:0\n\nStyleguide Sub.Award.FlagLegend\n*/\n/*\nAttachments Big Button\n\nOn player pages use the big button for attachments. The text only displays when the view port is medium and up.\n\nMarkup:\n \n \n Attachments \n\n\n\nWeight:0\n\nStyleguide Sub.Attachments.BigButton\n*/\n/*\nAttachments Big Button (Disabled)\n\nOn player pages use the big button for attachments. The text only displays when the view port is medium and up.\n\nMarkup:\n \n \n Attachments \n\n\n\nWeight:0\n\nStyleguide Sub.Attachments.BigButton.Disabled\n*/\n/*\nChat Window\n\nThe chat window is used to display the chat in player pages.\n\nMarkup:\n
(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.
\n
(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.
\n
(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.
\n
(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.
\n
(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.
\n
(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.
\n
(3:48 PM) Lovely Day : test
\n
(3:50 PM) Matt Watier : hello
\n
\n
\n \n
\n
\n\n\nWeight:0\n\nStyleguide Sub.Player.Chat\n*/\n/*\nCIO Window\n\nCIO is a survey widget that allows faculty to collect questions and polls from participants.\n\nMarkup:\n
\n\n\nWeight:0\n\nStyleguide Sub.Player.CIO\n*/\n/*\n\nProgram Borders OutSide\n\nCSS Classes on the Article tag of all program elements\n\nMarkup:\nc_black font_0 m-b_4 br-t_3 br_solid br_primary-2 br_radius isolation_isolate shadow_overlap-light bg_white\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Style.OuterBorder\n*/\n/*\n\nProgram Borders Inside\n\nCSS Classes on the Article tag of all program elements\n\nMarkup:\nbr_1 br-b_0 br-tr_radius br-tl_radius br_solid br_black-3 flex flex_column font_ui m-t_n2 relative\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Style.InnerBorder\n*/\n/*\n\nSection Header\n\n\ndefault\t\t - Grid\n\nMarkup:\n
\n\nWeight:0\n\nStyleguide Sub.LayoutBlock\n*/\n/*\n\nBorder Top Primary\n\nUsed in dividing lists of items.\n\nMarkup:\nbr-t_1 br_black-3 br_solid\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.ClassList.Border.BlackTop\n*/\n/*\nFaculty List\n\nWhen it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution. \n\nblock - use block on the role type label to stack the faculty names.\ninline-block - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n
\n\nData:\nSub.Data.Faculty.FullName - Full Name\nSub.Data.Faculty.FullName - Location\n\nFORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.\n\nWeight:0\n\nStyleguide Sub.FacultyList\n\n*/\n/*\nAux Session Faculty List\n\nWhen it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution. \n\nblock - use block on the role type label to stack the faculty names.\ninline-block - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n
Role Type 1
\n
\n
\n
Marty Little ( {{> \"Sub.Data.Faculty.Location\" }})
\n\n\nSubComponents:\nSub.Data.Faculty.FullName - Full Name\nSub.Data.Faculty.Location - Location\n\n\nWeight:0\n\nStyleguide Sub.FacultyList.AuxSession\n\n*/\n/*\nCombined Faculty List\n\nWhen a presentation is in a single state the combination of session roles and presentation roles are shown.\n\nblock - use block on the role type label to stack the faculty names.\ninline-block - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n
\n\nSubComponents:\nSub.Data.Faculty.FullName - Full Name\nSub.Data.Faculty.FullName - Location\n\n\nWeight:0\n\nStyleguide Sub.FacultyList.SessionAndPresentation\n\n*/\n/*\nSession Faculty List\n\nWhen it is only important to show the credits listed and not the credit values this simple dot pattern is a good solution. \n\nblock - use block on the role type label to stack the faculty names.\ninline-block - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n
\n\nSubComponents:\nSub.Data.Faculty.FullName - Full Name\nSub.Data.Faculty.FullName - Location\n\n\nWeight:0\n\nStyleguide Sub.FacultyList.Session\n\n*/\n/*\nNo Location Faculty List\n\nWhen you list non-event areas like Posters, and Abstracts the list removes the location of the person. \n\nblock - use block on the role type label to stack the faculty names.\ninline-block - use inline-block on the role type label to keep all the faculty in wrapping single line. \n\nMarkup:\n
\n
Role Type 1:
\n
{{> \"Sub.Data.Faculty.FullName\" }}
\n
Role Type 2:
\n
Dianna Denesik III
\n
Miguel Romaguera
\n
Jeanette Franecki
\n
\n\nSubComponents:\nSub.Data.Faculty.FullName - Full Name\n\n\nWeight:0\n\nStyleguide Sub.FacultyList.NoLocation\n\n*/\n/*\nAction Buttons Clear Search\n\nThis action button is used to clear the search filters and parameters.\n\n\nMarkup:\n\n\nWeight:0\n\nStyleguide Sub.ActionButtons.ClearSearch\n\n*/\n/*\n\nFaceted Search\n\nFacet Groups\n\nMarkup:\n
\n\nMarkupWrapperClasses: max-w_30 ul_none\n\nNOTE: 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.\n\nSubComponents: \nSub.Search.FacetCheckbox - Single Facet Checkbox\nSub.CollapseIcon - Collapse Icon\n\nWeight:0\n\nStyleguide Sub.Search.Faceted\n*/\n/*\n\nFaceted Search\n\nFacet Groups\n\nMarkup:\n
\n\nMarkupWrapperClasses: max-w_30 ul_none\n\nNOTE: 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.\n\nSubComponents: \nSub.Search.FacetCheckbox - Single Facet Checkbox\nSub.CollapseIcon - Collapse Icon\n\nWeight:0\n\nStyleguide Sub.Search.FacetedPrimary\n*/\n/*\n\nFaceted Type Ahead\n\nA 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.\n\nMarkup:\n
\n\nMarkupWrapperClasses:\n\n\n\nWeight:100\n\nStyleguide Sub.Search.Faceted.TypeAhead\n*/\n/*\n\nCollapse/Expand\n\nThe collapse/expand icon is used to collapse and expand the facet group.\n\nMarkup:\n
\n
collapse
\n
\n \n \n \n \n
\n
\n\nWeight:0\n\nStyleguide Sub.CollapseIcon\n*/\n/*\n\nCollapse/Expand No Text\n\nThe collapse/expand icon is used to collapse and expand the facet group.\n\nMarkup:\n
\n \n \n \n \n \n
\n\n\nWeight:0\n\nStyleguide Sub.CollapseIcon.NoText\n*/\n/*\n\nFacet Checkbox\n\nThe single checkbox for a facet.\n\nMarkup:\n
\n
\n \n \n \n
\n
\n\nMarkupWrapperClasses: ul_none\n\nWeight:0\n\nStyleguide Sub.Search.FacetCheckbox\n*/\n/*\n\nFacet Checkbox With Trash\n\nThe single checkbox that is generated by the type ahead filter search. The trash button removes the filter. \n\nMarkup:\n
\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Sub.Search.Bar\n*/\n.jump-buttons_top {\n top: 0;\n}\n\n/*\n\n\nProgram Bar\n\nSome events don't need a search bar the program bar remains because it is need to hide the jump links.\n\n\nMarkup:\n
\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Sub.Search.NoBar\n*/\n/*\n\nResult Overview\n\nSmall strip of data that shows the number of results and the time it took to search.\n\nMarkup:\n
\n\n\n\nWeight:0\n\nStyleguide Sub.Search.ResultOverview\n*/\n/*\n\nPagination\n\nPagination is used to navigate through the results.\n\nMarkup:\n\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.Pagination\n*/\n/*\n\nMember Profile Data\n\nData for the Member Profile that is visible for the user.\n\nMarkup:\n\n
\n
Account Information
\n
\n
User Name:Regina Rutherford
\n
Member ID:0152151214
Email:test@boo.com
\n
\n
\n
\n
Click the 'Member Help' button to send along your member information to help diagnose this issue.
\n\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.System.MemberData\n\n*/\n/*\n\nNo Access Trouble Shooting\n\nThe instructions to the user when they land on the \"No Access\" to the page.\n\nMarkup:\n
\n\t
\n\t\t
No Access to [PRODUCT NAME]
\n\t\t
[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].
\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Sub.System.AccessTroubleShooting\n\n\n*/\n/*\nImage and content\n\nDescription: \n\nMarkup:\n
\n
\n
\n \n
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?
\n
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?
\n
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.
\n \n \n
\n
\n\nWeight:0\n\nStyleguide Structures.ImageContentSimple\n*/\n/*\nCall-to-Action Card\n\nDescription: Some content areas are chunked out to drive usage through a call to action card.\n\nMarkup:\n
\n
Member Section
\n
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.
\n\nWeight:100\n\nStyleguide Structures.Call To Action\n*/\n/*\nExternal Resource\n\nExternal Sections of content that are helpful to cross promote other products from the conferences. \n\nprimary - Change the color of the block to primary.\naccent - Change the color of the block to accent.\n\n\nMarkup:\n\n \n ACC’s\n COVID-19 HUB\n \n \n\n MarkupWrapperClasses:\n gap-x_4 gap-y_4 grid template-x_30\n\n\nStyleguide Structures.External Resource\n*/\n/*\n\nAlpha List\n\nLong list of alpha ordered items with quick link jumping to the letter.\n\nMarkup:\n
\n\n\n\nWeight:0\n\nStyleguide Structures.AlphaList\n*/\n/*\n\nStyle - Container Classes\n\nMarkup:\nrelative br-t_1 br_dotted br_primary-3 w_100 p-y_4 font_0 flex_row flex \n\nStyleguide Structures.AlphaList.container_classes\n*/\n/*\n\nStyle - Marker Classes\n\nMarkup:\nc_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\n\nStyleguide Structures.AlphaList.marker_classes\n*/\n/*\n\nStyle - List Item Nav Classes\n\nMarkup:\nc_black-7 text_center \n\nStyleguide Structures.AlphaList.li_classes\n*/\n/*\n\nStyle - List Item Nav Link Classes\n\nMarkup:\nbg_primary-4 br_radius h:c_white h:bg_primary-n3 p-x_3 block h:undecorated\n\nStyleguide Structures.AlphaList.link_classes \n*/\n/*\n\nSub - List Item Name\n\nMarkup:\n\n\n {{ modifier_class }}\n\n\n {{> \"Sub.Data.Faculty.Title\" }}\n\n\n {{> \"Sub.Data.Faculty.Location\" }}\n\n\n\nStyleguide Structures.AlphaList.list_item_name \n*/\n/*\n\nStyle - List Item Container Classes\n\n\n\nMarkup:\nflex_auto gap-x_5 gap-y_4 grid columns_1 columns_2:md columns_3:lg p-t_0 p_4 ul_none\n\nWeight:0\n\nStyleguide Structures.AlphaList.list_item_container_classes\n*/\n/*\n\nAwardee\n\nThe basic Data of an awardee.\n\nMarkup:\n
HeadShot
\n
Display Name
\n{{> \"Sub.Data.Faculty.FullName\" }}\n
Title
\n{{> \"Sub.Data.Faculty.Title\" }}\n
Location
\n{{> \"Sub.Data.Faculty.Location\" }}\n\nMarkupWrapperClasses: reading-typography\n\nWeight: 300\n\nStyleguide Awards.Awardee\n*/\n/*\n\nAwardee Avatar\n\nWhen a head shot is missing it should use the avatar.\n\nMarkup:\n
\n\n
\n\n\nMarkupWrapperClasses: br_round br_solid br_black-3 br_1 overflow_hidden shadow_bevel-light max-w_20 \n\nWeight: 0\n\nStyleguide Awards.Awardee.Avatar\n*/\n/*\n\nAwardee Avatar No Video\n\nWhen a head shot is missing it should use the avatar.\n\nMarkup:\n
\n\t \n\t\t\n\t\t\n\t\n
\n\n\nMarkupWrapperClasses: br_round br_solid br_black-3 br_1 overflow_hidden shadow_bevel-light max-w_20 \n\nWeight: 0\n\nStyleguide Awards.Awardee.AvatarNoVideo\n*/\n/*\n\nAwardee Premium\n\nThe base DOM and Data that represent an awardee. Head shots images are maxed at 350px wide.\n\nflex_column\t\t\t- The stacked version of the awardee.\n\nMarkup:\n
\n\nMarkupWrapperClasses: font_2\n\nWeight: -100\n\nStyleguide Awards.Awardee.Premium\n*/\n/*\n\nAwardee Premium with Video\n\nThe base DOM and Data that represent an awardee. Head shots images are maxed at 350px wide.\n\nflex_column\t\t\t- The stacked version of the awardee.\n\nMarkup:\n
\n\nMarkupWrapperClasses: font_2\n\nWeight: -100\n\nStyleguide Awards.Awardee.Premium.Video\n*/\n/*\n\nAwardee Standard\n\nThe base DOM and Data that represent an awardee. Head shots images are maxed at 240px wide.\n\nflex_column\t\t\t- The stacked version of the awardee.\n\nMarkup:\n
\n\nMarkupWrapperClasses: font_1\n\n\nWeight: -50\n\nStyleguide Awards.Awardee.Standard\n*/\n/*\n\nAwardee Standard with Avatar\n\nThe base DOM and Data that represent an awardee. Head shots images are maxed at 240px wide.\n\nflex_column\t\t\t- The stacked version of the awardee.\n\nMarkup:\n
\n\nMarkupWrapperClasses: font_1\n\n\nWeight: -50\n\nStyleguide Awards.Awardee.Standard.Avatar\n*/\n/*\n\nAwardee Condensed\n\nThe base DOM and Data that represent an awardee. Head shots images are maxed at 160px wide.\n\nflex_column\t\t\t- The stacked version of the awardee.\n\nMarkup:\n
\n\nMarkupWrapperClasses:\n\nWeight: 50\n\nStyleguide Awards.Awardee.Condensed\n\n*/\n/*\nAwardee Ultra Condensed\n\nThe base DOM and Data that represent an awardee. Head shots images are maxed at 80px wide.\n\nflex_column\t\t\t- The stacked version of the awardee.\n\nMarkup:\n
\n\nMarkupWrapperClasses:\n\nWeight: 100\n\nStyleguide Awards.Awardee.UltraCondensed\n\n*/\n/*\n\nAwards\n\nAwards 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. \nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Awards.Level\n*/\n/*\n\nAward Premiere\n\nThe 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.\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Awards.Level.Premiere\n*/\n/*\nAward Premiere Tier Stacked\n\nAwards are blocks design to display the awards for the conference.\n\nMarkup:\n
\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Awards.Level.Premiere.Column\n\n*/\n/*\nAward Premiere Tier Row\n\nAwards are blocks design to display the awards for the conference.\n\n\nMarkup:\n
\n\nMarkupWrapperClasses:\n\nWeight: 0\n\nStyleguide Awards.Level.Premiere.Row\n\n*/\n/*\nAward Premiere Video\n\nAwards are blocks design to display the awards for the conference.\n\nMarkup:\n
\n\nWeight: 0\n\nStyleguide Awards.Level.Premiere.Video\n\n*/\n/*\nAward + Status\n\nAwards are blocks design to display the awards for the conference.\n\n\nMarkup:\n
\n\nMarkupWrapperClasses:\n\nWeight: 0\n\nStyleguide Awards.Level.Standard.Status\n\n*/\n/*\nAward Condensed\n\nAwards are blocks design to display the awards for the conference.\n\n\nMarkup:\n
\n\n\nWeight: 100\n\nStyleguide Awards.Level.Condensed\n\n*/\n/*\nAward Ultra Condensed\n\nAwards are blocks design to display the awards for the conference.\n\n\nMarkup:\n
\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Note that this page design is supposed to be full screen so in the documentation it might collapse incorrectly or seem too crunched.\n\n\nStyleguide Page.Search.Filter\n*/\n/*\n\nSearch Bar with Filter\n\nSearch filter\n\n\nMarkup:\n
\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Note that this page design is supposed to be full screen so in the documentation it might collapse incorrectly or seem too crunched.\n\ncaution: This item is not finalized and might be subject to change\n\nSubComponents:\nSub.CollapseIcon.NoText - Collapse Icon\nSub.Search.Faceted - Search Facet Group\nSub.Search.Bar - Search Bar\nSub.Search.ResultOverview - Search Result Overview\nSub.Pagination - Pagination\nProgram.Session - Session\nProgram.Session.Shell - Session Shell\nProgram.Session.Collapsible - Session Collapsible\n\n\nStyleguide Page.Search.BarAndFilter\n*/\n/*\n\nNo Results\n\nWhen the search returns no results or the user has filters all results away.\n\n\nMarkup:\n
\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nNOTE: Note that this page design is supposed to be full screen so in the documentation it might collapse incorrectly or seem too crunched.\n\ncaution: This item is not finalized and might be subject to change\n\nSubComponents:\nSub.CollapseIcon.NoText - Collapse Icon\nSub.Search.Faceted - Search Facet Group\nSub.Search.Bar - Search Bar\nSub.Search.ResultOverview - Search Result Overview\nSub.Pagination - Pagination\nProgram.Session.NoResults - No Result Response\n\n\n\nStyleguide Page.Search.NoResults\n*/\n/*\nNo Access with Registration Preview\n\nDescription: \n\nMarkup:\n
\n\t
Sorry, but it appears this account doesn't have access to [PRODUCT NAME ShortCode]
Correct Registration [ PRODUCT NAME ]\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
You do have a Registration for [ PRODUCT NAME ]. Some how you have gotten here by mistake.
\n\t\t\t\t\t\t\t
Please click the \"Refresh Access\" button to get to the homepage.
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
Wrong type of Registration to give you access. [Product Code Title]\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
[ 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.
\n\t\t\t\t\t\t\t
Voluptas sint fugiat molestiae error. Culpa odit quas consequuntur. Ut non qui.
\n\t\t\t\t\t\t\t
You can purchase the upgrade to your Registration to include the virtual platform by clicking the button.
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
Event Registrations Found
\n\t\t\t\t\t\t\t
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?
\n\t\t\t\t\t\t\t
Do you have a Secondary Account?
\n\t\t\t\t\t\t\t
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].
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
Event Registrations On this Account
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t\t
[Product Code Title X]
\n\t\t\t\t\t\t\t
[Product Code Title Y]
\n\t\t\t\t\t\t\t
[Product Code Title Z]
\n\t\t\t\t\t\t\t
\n\t\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\t
You have NO Registrations Associated with this Account
\n\t\t\t\t\t\t\t
Do you have a Secondary Account?
\n\t\t\t\t\t\t\t
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].
\n\t\t\t\t\t\t\n\t\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t
\n\t\t\t
\t\n\t\t
\n\t
\n
\n\n\nNOTE: Only one of the \"Event Registrations Found Cards\" show at a time. The cards fail in the order of the above list. \n\n\n\nWeight:0\n\nStyleguide Page.Access.NoAccess\n\n*/\n/*\n\nProgram\n\nThe central UI of an event is the program which displays all educational content from the conference.\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Program\n\n*/\n/*\n\nSession\n\n The basic session is Session with a title that has a playlist of presentations\n\n\nMarkup:\n Sub.Style.OuterBorder }}\">\n
\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nData:\nSub.Data.Session.ID - Session ID\nSub.Data.Session.Title - Session title\n\n\nSubComponents:\nSub.Presentation.List - Presentation List\nSub.ActionButtons.NoDetails - Action Buttons\nSub.ActionButtons.Favorite.Small - Favorite Button\nSub.PlayingDateTime - Playing Date Time\nSub.CategoryFlags - Category Flags\n\n\nStyleguide Program.Session\n*/\n/*\n\nSession Collapse\n\n The basic session is Session with a title that has a playlist of presentations\n\n\nMarkup:\n Sub.Style.OuterBorder }}\" id=\"session_0677\">\n
\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Program.Session.Collapsible\n*/\n/*\n\nSession Shell\n\nA session shell is when there is only one presentation. \n\n\nMarkup:\n Sub.Style.OuterBorder }}\">\n
\n\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Program.Session.Shell\n*/\n/*\n\nOn Demand\n\nAfter the completion of a video the Sessions are broken down to the individual presentations and stored in the On Demand Area for viewing. \n\nMarkup:\n Sub.Style.OuterBorder }}\">\n
\n\n\n\nMarkupWrapperClasses: max-w_30:md\n\nWeight: 10000\n\nData:\nSub.Data.Session.ID - Session ID\nSub.Data.Session.Title - Session Title\nSub.Data.Agenda.LiveTime - Live Time\n\nSubComponents:\nSub.ActionButtons - Watch Button\n\n\nStyleguide Program.CondensedSession\n\n*/\n/*\n\nNo Results\n\nWhen the results are empty the user is presented with a message.\n\nMarkup:\n\n
'Sub.Style.InnerBorder'}}\">\n
\n
\n \n
\n OH NO!\n We couldn't find any results for your search.\n
\n
Search Help
\n
\n It is easy to search for a session, but its also easy to have a typo. Check your spelling and try again.\n
\n Click the `Clear Search` button to return to all sessions.\n \n \n
\n\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Program.Session.NoResults \n*/\n/*\n\nNon Accredited Session\n\nThere are sessions that are tagged as non accredited which means they are not eligible for credit and are industry specific.\n\nMarkup:\n Sub.Style.OuterBorder }} br_secondary-n2\">\n
\n\n\nMarkupWrapperClasses: \n\nComponents:\nSub.FacultyList.SessionAndPresentation - Session Faculty & Faculty List\nSub.Credits.NonAccredited - Non Accredited Message\nSub.ActionButtons.NoDetails - Action Button w/o Details\n\nWeight:0\n\nStyleguide Program.Session.NonAccredited\n*/\n/*\n\nAbstracts\n\nAbstracts are a presentation of a static slide deck, or pdf with a possible attached video. These cards link to an abstract player page. \n\nMarkup:\n\n \n
\n\n\nMarkupWrapperClasses: \n\nNOTE: A grid-item at its smallest is 300px wide the grid column size needs to be set depending on the width the parent container.\n\nWeight:0\n\nStyleguide Program.GridFormat.FeaturedPresentation.Grid\n*/\n/*\n\nWhats Happening Now\n\nCondensed Sessions are used for listing designs that are not full featured.\n\n\nMarkup:\n\n
\n\n\nMarkupWrapperClasses: max-w_30:md\n\nData:\nSub.Data.Session.ID - Session ID\nSub.Data.Session.Title - Session Title\nSub.Data.Agenda.EndTime - Session End Time\n\nSubComponents:\nSub.Header.VideoThumbnail - Thumbnail of Video\nSub.Tags.Category - Category Tag\nSub.ActionButtons - Watch Button\n\nWeight: 10000\n\nStyleguide Program.GridFormat.WhatsNow\n\n*/\n/*\n\nWhats Happening Now NON-Accredited\n\nCondensed Sessions are used for listing designs that are not full featured.\n\n\nMarkup:\n\n
\n\n\nMarkupWrapperClasses: max-w_30:md\n\nData:\nSub.Data.Session.ID - Session ID\nSub.Data.Session.Title - Session Title\nSub.Data.Agenda.EndTime - Session End Time\n\nSubComponents:\nSub.Header.VideoThumbnail - Thumbnail of Video\nSub.Tags.Category - Category Tag\nSub.ActionButtons - Watch Button\n\nWeight: 10000\n\nStyleguide Program.GridFormat.WhatsNow.NonAccredited\n\n*/\n/*\n\nWhats Now Item - Horizontal\n\nWhats 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.\n\n\nMarkup:\n Sub.Style.OuterBorder }}\">\n
\n\n\nMarkupWrapperClasses: \n\nData:\nSub.Data.Session.ID - Session ID\nSub.Data.Session.Title - Session Title\nSub.Data.Agenda.EndTime - Session End Time\n\nSubComponents:\nSub.Header.VideoThumbnail - Thumbnail of Video\nSub.Tags.Category - Category Tag\nSub.ActionButtons - Watch Button\n\nWeight: 10000\n\nStyleguide Program.GridFormat.WhatsNow.Horizontal\n\n*/\n/*\n\nWhats Happening Now Grid\n\nA zone on the page that displays the current live session.\n\nMarkup:\n\n
\n\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Program.GridFormat.WhatsNow.Grid\n*/\n/*\n\nWhats Happening Next\n\nDuring 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. \n\n\nMarkup:\n\n
\n\n\nMarkupWrapperClasses: max-w_30:md\n\nData:\nSub.Data.Session.ID - Session ID\nSub.Data.Session.Title - Session Title\nSub.Data.Agenda.EndTime - Session End Time\n\nSubComponents:\nSub.Header.VideoThumbnail - Thumbnail of Video\nSub.Tags.Category - Category Tag\nSub.ActionButtons - Watch Button\n\n\nNOTE: 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. \n\nWeight: 10000\n\nStyleguide Program.GridFormat.WhatsNext\n\n*/\n/*\n\nWhats Happening Next - Non Accredited\n\nDuring 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. \n\n\nMarkup:\n\n
\n\n\nMarkupWrapperClasses: max-w_30:md\n\nData:\nSub.Data.Session.ID - Session ID\nSub.Data.Session.Title - Session Title\nSub.Data.Agenda.EndTime - Session End Time\n\nSubComponents:\nSub.Header.VideoThumbnail - Thumbnail of Video\nSub.Tags.Category - Category Tag\nSub.ActionButtons - Watch Button\nSub.Credits.NonAccredited - Non Accredited Tag\n\n\nNOTE: 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. \n\nWeight: 10000\n\nStyleguide Program.GridFormat.WhatsNext.NonAccredited\n*/\n/*\n\nWhats Happening Next - Grid\n\nAt 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.\n\nMarkup:\n\n
\n\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Program.GridFormat.WhatsNext.Grid\n*/\n/*\n\nWhats Happening Next - Grid\n\nAt times before the end of the conference but if there is no scheduled session.\n\nMarkup:\n\n
{{> \"Sub.SectionHeader\" modifier_class=\"End of Current Scheduled Program\" }}
\n
\n \n
\n \n
\n The Current Program has ended\n
\n
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.
\n \n
\n \n
\n \n\n\n\nWeight:0\n\n\nStyleguide Program.GridFormat.WhatsNext.EndOfProgram\n*/\n/*\n\nAgenda Grid\n\nThe agenda grid is a day layout for the agenda view.\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Program.AgendaGrid\n*/\n/*\n\nNon-Accredited Session\n\nBased on the Session the Non-accredited session is styled to represent that it does not have an accreditation.\n\n\n\nMarkup:\n\n \n
\n\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Program.AgendaGrid.Session.NonAccredited\n*/\n/*\n\nGrid Session\n\nThe day grid sessions are light on information because the limitations of the layout. \n\n\nMarkup:\n\n \n
\n\n\nMarkupWrapperClasses: \n\nWeight:0\n\nStyleguide Program.AgendaGrid.Session\n\n*/\n/*\n\nDay Grid with Channels. \n\nThere 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. \n\nMarkup:\n
Full Program
\n\n\n\nChannel Name 1\nChannel Name 2\nChannel Name 3\nChannel Name 4\n\n \n \n \n \n {{> \"Program.AgendaGrid.Hour\" modifier_class=\"9\" }}\n {{> \"Program.AgendaGrid.Session\" modifier_class=\"time-start_9-00 time-end_10-00 channel-start_3 channel-end_4\" }}\n {{> \"Program.AgendaGrid.Hour\" modifier_class=\"10\" }}\n {{> \"Program.AgendaGrid.Session\" modifier_class=\"time-start_10-00 time-end_11-40 channel-start_1 channel-end_1\" }}\n {{> \"Program.AgendaGrid.Session.NonAccredited\" modifier_class=\"time-start_10-00 time-end_11-40 channel-start_2 channel-end_3\" }}\n {{> \"Program.AgendaGrid.Hour\" modifier_class=\"11\" }}\n {{> \"Program.AgendaGrid.Hour\" modifier_class=\"12\" }}\n {{> \"Program.AgendaGrid.Session\" modifier_class=\"time-start_12-00 time-end_13-00 channel-start_1 channel-end_3\" }}\n {{> \"Program.AgendaGrid.Hour\" modifier_class=\"13\" }}\n {{> \"Program.AgendaGrid.Session\" modifier_class=\"time-start_13-30 time-end_15-10 channel-start_3 channel-end_4\" }}\n {{> \"Program.AgendaGrid.Hour\" modifier_class=\"14\" }}\n {{> \"Program.AgendaGrid.Hour\" modifier_class=\"15\" }}\n {{> \"Program.AgendaGrid.Hour\" modifier_class=\"16\" }}\n {{> \"Program.AgendaGrid.Hour\" modifier_class=\"17\" }}\n\n\nMarkupWrapperClasses: \n\nWeight:0\n\nFORMAT: In the real design the hours should be in the format of \"3 p.m\" and not military time of \"15:00\"\n\nNOTE: 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.\n\nStyleguide Program.AgendaGrid.Day\n*/\n/*\n\nHour Line\n\ndescription\n\nMarkup:\n
\n {{ modifier_class }}:00\n
\n \n
\n
\n\nMarkupWrapperClasses: day_grid\n\nWeight:0\n\nStyleguide Program.AgendaGrid.Hour\n*/\n/*\n\nContent Filler\n\nThis is a styleguide only element to show structure edges.\n\nMarkup:\n
Layout Zone: {{ modifier_class }}
\n\nMarkupWrapperClasses: \n\nWeight: 100\n\nStyleguide Page.Layouts.Filler\n*/\n/*\n\nGrid Filler\n\nThis is a styleguide only element to show structure edges.\n\nMarkup:\n
Grid Area: {{ modifier_class }}
\n\nMarkupWrapperClasses: \n\nWeight: 100\n\nStyleguide Page.Layouts.GridFiller\n*/\n/*\n\nSub Grid Filler\n\nThis is a styleguide only element to show structure edges.\n\nMarkup:\n
Grid Area: {{ modifier_class }}
\n\nMarkupWrapperClasses: \n\nWeight: 100\n\nStyleguide Page.Layouts.SubGridFiller\n*/\n/*\n\nSide Bar Area\n\nThis pattern is often used to push the sidebar bellow the main content area. \n\n\nMarkup:\n
\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Page.Layouts.Sidebar\n*/\n/*\n\nSide Bar Area With Ad\n\nThis pattern is often used to push the sidebar bellow the main content area. \n\n\nMarkup:\n
\n\nMarkupWrapperClasses: \n\nWeight: 0\n\nStyleguide Page.Layouts.SidebarAndAd\n*/\n/*\nSponsor Tiles\n\nDescription: A tile version of sponsor information\n\nWeight:0\n\nStyleguide Sponsor.Tile\n*/\n/*\nSponsor Grid\n\nDescription: \n\nMarkup:\n\n {{> Sponsor.Tile.WebLink }}\n
\n \n \n \n
\n
\n {{> \"Sub.Data.Sponsor.Name\"}}\n
\n
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?
\n
\n
{{> \"Sub.Data.Sponsor.Address\"}}
\n \n
\n
\n \n \n \n
\n
\n {{> \"Sub.Data.Sponsor.Name\"}}\n
\n
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?
\n
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.
\n\nData:\nSub.Data.Sponsor.Name - Name\nSub.Data.Sponsor.Description - Description in HTML\nSub.Data.Sponsor.Address - Address\n\n\nMarkupWrapperClasses: grid columns_3:lg columns_2:md columns_1 gap_4\n\nWeight:0\n\nStyleguide Sponsor.Tile.WebLink\n*/\n/*\nFaculty\n\nDescription: 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.\n\nWeight:0\n\nStyleguide Faculty\n*/\n/*\nFull Data with Photo\n\nDescription: The most basic way we represent a faculty.\n\nbr_radius - The border radius of the image.\nbr_round - The border radius of the image.\nbr_circle - The border radius of the image.\n\nMarkup:\n\n\t\n {{> \"Sub.Data.Faculty.Photo\" }}\n\t\n\t
\n\t\t
{{> \"Sub.Data.Faculty.FullName\" }}
\n\t\t
\n \n
{{> \"Sub.Data.Faculty.Title\" }}
\n
\n {{> Sub.Data.Faculty.Location }}\n
\n \n {{> Sub.Data.Faculty.Bio }}\n
\n
\n {{> \"Sub.Faculty.TwitterButton\"}}\n
\n\t
\n\n\nMarkupWrapperClasses: grid-col_4 grid \n\nFORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.\n\nSupComponents: \nSub.Faculty.TwitterButton - Twitter Button\n\nData:\nSub.Data.Faculty.Photo - Profile Photo\nSub.Data.Faculty.FullName - Full Name\nSub.Data.Faculty.Title - Title\nSub.Data.Faculty.Bio - Bio\n\n\nWeight:0\n\nStyleguide Faculty.PhotosHorizontal\n*/\n/*\nTwitter Button\n\nDescription: When a faculty member has a twitter handle, we can display a twitter button.\n\nMarkup:\n Sub.Data.Faculty.TwitterHandle }}\" target=\"_blank\">\n \n \n {{> Sub.Data.Faculty.TwitterHandle }}\n\n\n\nData:\nSub.Data.Faculty.TwitterHandle - Twitter Handle\n\nWeight:0\n\nStyleguide Sub.Faculty.TwitterButton\n*/\n/*\nFull Data with Photo\n\nDescription: \n
This component is used to display full information about faculty members, including a headshot, name, title, location, biography, and social media links.
\n\nMarkup:\n\n
\n {{> \"Sub.Data.Faculty.Photo\"}}\n
\n
\n
{{> \"Sub.Data.Faculty.FullName\" }}
\n
\n
{{> \"Sub.Data.Faculty.Title\" }}
\n
\n {{> \"Sub.Data.Faculty.Location\" }}\n
\n {{> \"Sub.Data.Faculty.Bio\"}}\n
\n
\n {{> \"Sub.Faculty.TwitterButton\"}}\n
\n
\n\n\nMarkupWrapperClasses: p_4\n\nSubComponents:\nSub.Faculty.TwitterButton - Twitter Button\n\nData:\nSub.Data.Faculty.Photo - Faculty Photo\nSub.Data.Faculty.FullName - Faculty Full Name\nSub.Data.Faculty.Title - Faculty Title\nSub.Data.Faculty.Location - Faculty Location\nSub.Data.Faculty.Bio - Faculty Bio\n\nFORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.\n\nNOTE: Please ensure that the faculty data, especially the biography, is properly formatted HTML. \n\nWeight:0\n\nStyleguide Faculty.Photos\n*/\n/*\nFull Data Without Photo\n\nDescription: The most basic way we represent a faculty.\n\nMarkup:\n\n\t
\n\t\t
{{> \"Sub.Data.Faculty.FullName\" }}
\n\t\t
\n \n
{{> \"Sub.Data.Faculty.Title\" }}
\n
\n {{> Sub.Data.Faculty.Location }}\n
\n \n {{> Sub.Data.Faculty.Bio }}\n
\n
\n {{> \"Sub.Faculty.TwitterButton\"}}\n
\n\t
\n\n\nFORMAT: This element uses data that has strict data formatting requirements. See the data tab for more information.\n\nWeight:0\n\nStyleguide Faculty.NoPhotos\n*/\n/*\nBootstrap Toggle Rotation\n\nThe 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.
\n\nexpanded - when the associated content is expanded the toggle will look like this\ncollapsed - when the associated content is collapsed the class is added to the toggle and it will look like this. \n\nMarkup:\n
\n \n
\n
\n \n
\n
\n \n \n \n \n
\n
\n \n \n \n \n \n
\n\n\nWeight: 100\n\nStyleguide Component.Navigation.Toggle.Rotation\n\n*/\n/*\nToggle \n\nToggle elements of a collapse with user feed back of the icon rotating.\n\n#targetName - the name of the target of the collapse\n\nMarkup:\n
\n \n
\n\nWeight: -10\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle\n*/\n/*\nToggle Chevron\n\nToggle elements of a collapse with user feed back of the icon rotating.\n\n#targetName - the name of the target of the collapse\n\nMarkup:\n
\n \n
\n\nWeight: -80\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle.Chevron\n*/\n/*\nCollapse Toggle Advanced\n\nToggle elements of a collapse with user feed back of the icon morphing.\n\n#targetName - the name of the target of the collapse\n\nMarkup:\n
\n \n \n \n \n
\n\nWeight: -100\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle.Advanced\n*/\n/*\nCollapse Toggle Advanced with Square\n\nToggle elements of a collapse with user feed back of the icon morphing.\n\n#targetName - the name of the target of the collapse\n\nMarkup:\n
\n \n \n \n \n \n
\n\nWeight: -90\n\nMarkupWrapperClasses: bg_white font_ui flex c_primary\n\nStyleguide Component.Navigation.Toggle.AdvancedSquare\n*/\n/*\nSidebar Nav\n\nDescription: Side bar for any 3 layer nav on the site. the parent node is from the main nav.\n\nMarkup:\n\n\nWeight:-1000\n\nMarkupWrapperClasses: max-w_25 m_auto \n\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nStyleguide Component.Navigation.Sidebar\n*/\n/*\nParent NavItem\n\nDescription: 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.\n\nMarkup:\n
\n\nWeight: -100\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.Parent\n*/\n/*\nChild NavItem\n\nDescription: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.\n\ndefault - No added class \nactive - Nav Item changes its decoration if this the page the user is on.\n\nMarkup:\n
\n\nWeight: 10\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.Child\n*/\n/*\nToggle Child\n\nDescription: 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.\n\ndefault - the toggle when it doesn't have an active class still shades on hover\nactive - shade the toggle\n\nMarkup:\n
\n\nWeight: -10\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.ChildToggle\n*/\n/*\nChild NavItem With Children\n\nDescription: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.\n\n\nMarkup:\n
\n\nWeight: 15\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.ChildWithChildren\n*/\n/*\nChild NavItem With Grand Children\n\nDescription: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.\n\nMarkup:\n
\n\nWeight: 15\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nStyleguide Component.Navigation.Sidebar.ChildWithGrandChildren\n*/\n/*\nGreat Grandchild NavItem\n\nDescription: 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.\n\ndefault - No added class \nactive - Nav Item changes its decoration if this the page the user is on.\n\nMarkup:\n
\n\nWeight: 100\n\nMarkupWrapperClasses: bg_primary c_white font_ui ul_none\n\nStyleguide Component.Navigation.Sidebar.GreatGrandchild\n*/\n/*\nUI Tabs\n\nThe application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.\n\nMarkup:\n
\n \n
\n
\n {{> Sub.Placeholder.Typography }}\n
\n
\n {{> Sub.Placeholder.Typography }}\n
\n
\n
\n\nMarkupWrapperClasses: p_4\n\ncaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight:0\n\nStyleguide Component.Structures.UITabs\n*/\n/*\nUI Tabs Overflow\n\nThe application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.\n\nMarkup:\n
\n \n
\n
\n {{> Sub.Placeholder.Typography }}\n
\n
\n {{> Sub.Placeholder.Typography }}\n
\n
\n
\n\nMarkupWrapperClasses: p_4\n\ncaution: This item is not finalized and might be subject to change\n\nNote: 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. \n\nWeight:0\n\nStyleguide Component.Structures.UITabs.Overflow\n*/\n/*\nTab: Default\n\nDescription: Active State of Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n Link\n
\n\n\n\ncaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nMarkupWrapperClasses: flex ul_none\n\nWeight:0\n\nStyleguide Sub.Component.Structures.UITabs.Tab\n*/\n/*\nTab: Active\n\nDescription: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n\nMarkupWrapperClasses: flex ul_none\n\ncaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight:0\n\nStyleguide Sub.Component.Structures.UITabs.Tab.LinkActive\n*/\n/*\nTab: Disabled\n\nDescription: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.\n\nMarkup:\n
\n\n\ncaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nMarkupWrapperClasses: flex ul_none\n\nWeight:0\n\nStyleguide Sub.Component.Structures.UITabs.Tab.LinkDisabled\n*/\n/*\nScroll Overflow Script\n\nDescription: Javascript is needed to make the scrolls work on the page\n\nMarkup:\n\nMarkupWrapperClasses: p_4\n\ncaution: This item is not finalized and might be subject to change\n\nWeight:0\n\nStyleguide Component.Structures.UITabs.Script\n*/\n/*\nTabs\n\nA simple way to show small groups of content that should have the same level of reading hierarchy. \n\nMarkup:\n\n
\n
\n
consectetur adipisicing elit
\n 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.
\n
\n
Lorem ipsum dolor sit
\n 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.
\n
\n\nMarkupWrapperClasses:\n\nSubComponents:\nSub.Component.Structures.Tabs.Tab.LinkActives - Active Tab\nSub.Component.Structures.Tabs.Tab.Link - Tab\nSub.Component.Structures.Tabs.Tab.LinkDisabled - Disabled Tab\n\nCaution: This item is not finalized and might be subject to change\n\nNote: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly. \n\nWeight:0\n\nStyleguide Component.Structures.Tabs.\n*/\n/*\nSimple Tabs: Dark Mode\n\nReverse Colored Tabs for when on dark background\n\nMarkup:\n
\n \n
\n\nWeight: 0\n\nStyleguide Sub.Component.Structures.Tabs.TabDark\n*/\n/*\nTab Dark: Active\n\nDescription: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4\n\nWeight:0\n\n\nStyleguide Sub.Component.Structures.Tabs.TabDark.Link\n*/\n/*\nTab Dark: Disabled\n\nDescription: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.\n\nMarkup:\n
\n\nMarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4 \n\nWeight:0\n\n\nStyleguide Sub.Component.Structures.Tabs.TabDark.LinkDisabled\n*/\n/*\nTab: Active\n\nDescription: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n\nMarkupWrapperClasses: 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\n\nWeight:0\n\nStyleguide Sub.Component.Structures.Tabs.Tab.LinkActive\n*/\n/*\nTab: Basic\n\nDescription: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect\n\nMarkup:\n
\n\n\nMarkupWrapperClasses: 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\n\nWeight:0\n\nStyleguide Sub.Component.Structures.Tabs.Tab.Link\n*/\n/*\nTab: Disabled\n\nDescription: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.\n\nMarkup:\n
\n\nMarkupWrapperClasses: 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\n\nWeight:0\n\nStyleguide Sub.Component.Structures.Tabs.Tab.LinkDisabled\n*/\n/*\n\n\nPages\n\nCombination of UI brought together for pages on the site. \n\nWeight: 0\n\nStyleguide Page\n*/\nbody {\n font-family: var(--font-family_copy);\n font-size: 1rem;\n}\n\nh1, .h1,\nh2,\n.h2,\nh3,\n.h3,\nh4,\n.h4,\nh5,\n.h5,\nh6,\n.h6 {\n font-family: var(--font-family_display);\n font-weight: var(--font_regular);\n}\n\nh6, .h6 {\n font-weight: var(--font_bold);\n}\n\np {\n line-height: 1.35;\n}\n\nul,\nol {\n line-height: 1.6;\n}\n\nkbd,\ncode,\nsamp,\nvar {\n font-family: var(--font-family_mono);\n}\n\nform {\n border-color: rgba(19, 18, 18, 0.38);\n}\n\nlabel {\n font-size: 1rem;\n font-weight: var(--font_bold);\n font-family: var(--font-family_ui);\n color: currentColor;\n}\n\ninput,\nselect,\ntextarea,\nlegend,\nfieldset,\nbutton {\n box-sizing: border-box;\n font-size: 1rem;\n font-family: var(--font-family_ui);\n color: currentColor;\n}\n\nbutton,\n[type=button],\n[type=submit],\n[type=reset], [type=date],\n[type=datetime],\n[type=datetime-local],\n[type=email],\n[type=month],\n[type=number],\n[type=password],\n[type=search],\n[type=tel],\n[type=text],\n[type=url],\n[type=week],\n[type=time], select,\ntextarea {\n padding: 0.25rem 0.5rem;\n line-height: 1.6;\n min-height: 1.5em;\n border-color: rgba(19, 18, 18, 0.25);\n border-width: thin;\n border-radius: 6px;\n}\n\ninput:focus,\nselect:focus,\ntextarea:focus {\n 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);\n outline-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);\n}\n\n[type=date],\n[type=datetime],\n[type=datetime-local],\n[type=email],\n[type=month],\n[type=number],\n[type=password],\n[type=search],\n[type=tel],\n[type=text],\n[type=url],\n[type=week],\n[type=time], select,\ntextarea {\n width: 100%;\n}\n\ninput,\nselect,\ntextarea,\nlegend,\nfieldset,\nbutton {\n box-sizing: border-box;\n}\n\n[type=color] {\n width: 1.5rem;\n height: 1.5rem;\n padding: 0;\n border-color: rgba(19, 18, 18, 0.25);\n}\n\n[type=radio],\n[type=checkbox] {\n padding-left: 0.5rem;\n}\n\nbutton,\n[type=button],\n[type=submit],\n[type=reset] {\n width: auto;\n border-radius: 6px;\n}\n\nfieldset {\n padding: 0.5rem 1rem;\n margin: 0.5rem 0;\n border-color: rgba(19, 18, 18, 0.1);\n}\n\n/*\n\n Basic Inputs\n\n 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. \n\n Styleguide HTML.Inputs\n\n*/\n/*\n\n Text Inputs \n\n Bellow is the comparison of using the basic Html input types with the utility classes only vs using the bootstrap pattern for the input.\n\nMarkup:\n
\n\t
\n\t\t
Utility Class
\n\t\t \n\t\t\n\t
\n\t
\n\t\t
Bootstrap
\n\t\t\n\t\t\n\t
\n
\n\n Styleguide HTML.Inputs.Text\n\n*/\n/*\n\nInputs UC\n\nUtility Class only build inputs\n\nMarkup:\n\n\nWeight:100\n\nStyleguide HTML.Inputs.All\n\n*/\n/*\n\nTable\n\nBasic 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. \n\n
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.
\n\n\nStyleguide HTML.BasicTable\n\n*/\ntable {\n font-family: var(--font-family_ui);\n font-size: 1rem;\n}\ntable caption {\n padding: 0.5rem;\n}\n\nth,\ntd {\n padding: 0.25rem 0.5rem;\n text-align: start;\n}\n\nthead {\n font-weight: var(--font_bold);\n padding: 0.25rem 0.5rem 0;\n}\n\ntbody {\n padding: 0 0.5rem;\n}\n\ntfoot,\ncaption {\n font-size: 0.8888888889rem;\n padding: 0 0.5rem 0.25rem;\n}\n\n/*\n Design Base\n\n Arches is design inspired by a pad of paper in the hand. Subtle Textures and Layer shadows keep the readability very high. \n\n Weight: -1000\n\n Styleguide DesignBase\n*/\n/*\n\nFonts \n\nThe ACC is focused on stable, conservative, clean fonts. Roboto Slab is the standard serif fonts across all products at the ACC.\n\n Styleguide DesignBase.Fonts\n*/\n/*\n\nAccent Roboto Slab\n\nA beautiful Accent font that shows a complexity and texture to the fonts used in the design. \n\n
\n\t
\n\t\tRoboto Slab\n\t\tfont-family: \"Roboto Slab\",\"Times New Roman\",\"Lucida Bright\",Georgia,serif, \"slab\"\n\t
\n\t
\n\t
RS
\n\t\t
\n\t\t\t
Accent Font
\n\t\t\t
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
\n\t\t\t
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
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t\t
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
\n\t\t\t
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
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t
\n\t
\n
\n\n Weight: -10\n\n Styleguide DesignBase.Fonts.Accent\n*/\n/*\n\nDisplay: Maven Pro\n\n A Slick font that has a slight interest used for headers and UI. \n\n
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
\n\t\t\t
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
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t\t
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
\n\t\t\t
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
\n\t\t\t
0 1 2 3 4 5 6 7 8 9
\n\t\t
\n\t
\n
\n\n Weight: 1\n\n Styleguide DesignBase.Fonts.UI\n*/\n/*\n\nIcons: Font Awesome\n\n
\n
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.
\n\n\n\n\nStyleguide DesignBase.IconsTrue\n*/\n/*\n\nACC's Blue\n\n$acc-blue - #004176; acc\n\nStyleguide DesignBase.Colors.ACC\n*/\n/*\n\nTheme Colors \n\nColors are based off of the ACC Scrub Colors.\n\nmap-get($theme-palette, primary) - #198dae; primary\nmap-get($theme-palette, secondary) - #676a72; secondary\nmap-get($theme-palette, shade) \t - #878585; shade\nmap-get($theme-palette, accent) - #16a385; accent\nmap-get($theme-palette, info) - #a3988c; info\nmap-get($theme-palette, highlight) - #7742bd; highlight\n\nWeight:-1000\n\nStyleguide DesignBase.Colors\n */\n/*\n\nAction Colors \n\nActionable colors used to respond to user inputs and messaging.\n\nmap-get($theme-palette, alert) - #dd1a1a; alert\nmap-get($theme-palette, warning) - #da8210; warning\nmap-get($theme-palette, success) - #078a2e; success\nmap-get($theme-palette, navigation) - #2b58c0; navigation\n\nStyleguide DesignBase.Colors.Actions\n*/\n/*\n\nColor Coding \n\nColor 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. \n\nStyleguide DesignBase.Colors.ColorCoding\n\n */\n/*\n\nCOR Colors \n\n(COR) Class of Recommendation is a color collect used in Guideline recommendations.\n\n$cor-green \t- #6fc284; I\n$cor-yellow \t- #ffd44f; IIA\n$cor-yellow-orange - #faa74b; IIA\n$cor-orange \t- #f15d4c;III and III-NoHarm\n$cor-red \t\t- #ed1c00; III-harm\n\nWeight: 10\n\nStyleguide DesignBase.Colors.ColorCoding.COR\n\n */\n/*\n\nLOE Colors \n\n(LOE) level of Evidence is a color collect used in Guideline recommendations.\n\n$loe-dark-blue \t- rgb(62, 111, 183);LOE A\n$loe-mid-blue \t\t- rgb(101, 156, 211);LOE B-R\n$loe-light-blue \t- rgb(161, 193, 230);LOE B-NR\n$loe-pale-blue \t- rgb(181, 213, 229); LOE C\n\nWeight: 10\n\nStyleguide DesignBase.Colors.ColorCoding.LOE\n\n */\n/*\n\nCredit Type Color Coding \n\nCredit Types in the ACC have a specific color coding.\n\n$credit-AAPA - #e8c536; AAPA: American Academy of Physician Assistants (AAPA) Category 1 CME Credit \n$credit-ABP - #007a5b; ABP-MOC: American Board of Pediatrics \n$credit-ABPMOCII - #0b6d4c; ABP-MOC 2: American Board of Pediatrics MOC 2 \n$credit-ABPMOCIV - #105a3b; ABP-MOC 4: American Board of Pediatrics MOC 4 \n$credit-ATCEU - #775744; ATCEU: Athletic Trainer Continuing Education Unit \n$credit-CE - #a8a8a8; CE: Continuing CCA\\Tech Education \n$credit-CME - #00a15b; CME: AMA PRA Category 1TM Credit(s) \n$credit-CNE - #198dae; CNE: Continuing Nurse Education \n$credit-CNErx - #52549e; CNErx: Continuing Nursing Education Pharmaceutical \n$credit-COP - #775891; COP: Certificate of Participation \n$credit-CPE - #992e2e; CPE: Continuing Pharmacy Education \n$credit-ECME - #d16528; ECME: European Board for Accreditation in Cardiology (EBAC) External CME Credit\n$credit-IPCE - #6c36b3; IPCE: Interprofessional Continuing Education Credit\n$credit-MOCII - #9a1267; MOC II: ABIM MOC Part II \n$credit-MOCIV - #d3248d; MOC IV: ABIM MOC Part IV \n\nWeight: 0\n\nStyleguide DesignBase.Colors.ColorCoding.Credits\n\n*/\n/*\n\nClinical Pathway Colors \n\nEach 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.\n\n$pathway-acute-coronary-syndromes \t\t\t\t\t\t- #009974; Acute Coronary Syndromes\n$pathway-arrhythmias-EP \t\t\t\t\t\t\t\t- #005b37; arrhythmias and Clinical EP\n$pathway-congenital-heart-disease \t\t\t\t\t\t- #fdb918; Congenital Heart Disease\n$pathway-ecg-stress-test \t\t\t\t\t\t\t\t- #d9691f; Standard ECG, Stress Test\n$pathway-heart-failure \t\t\t\t\t\t\t\t\t- #410d49; Heart Failure and Cardiomyopathies\n$pathway-invasive-cardiology \t\t\t\t\t\t\t- #c8b02f; Invasive Cardiology Angiography and Intervention\n$pathway-noninvasive-cardiology \t\t\t\t\t\t- #947b33; Noninvasive Cardiology\n$pathway-pandemic \t\t\t\t\t\t\t\t\t\t- #8e2582; Pandemic \"Covid\"\n$pathway-pericardial \t\t\t\t\t\t\t\t\t- #0079ad; pericardial Disease\n$pathway-prevention \t\t\t\t\t\t\t\t\t- #a01d51; Prevention\n$pathway-pulmonary-hypertension \t\t\t\t\t\t- #d60e7e; Pulmonary Hypertension and Venous Thromboembolic Disease\n$pathway-special \t\t\t\t\t\t\t\t\t\t- #00b6f1; Special\n$pathway-stable-ischemic-heart-disease \t\t\t\t- #0f3e65; Stable ischemic Heart Disease\n$pathway-valvular-heart-disease \t\t\t\t\t\t- #4f4190; Valvular Heart Disease\n$pathway-vascular-medicine \t\t\t\t\t\t\t\t- #ae171c; Vascular Medicine\n\nWeight: -1\n\nStyleguide DesignBase.Colors.ColorCoding.Pathways\n\n*/\n/*\n\nRegistry CC\n\nCredit Type Color codes in the ACC have a specific color coding.\n\n$registry-cpmi - #f22418; Chest Pain MI Registry\n$registry-afib - #ffb300; AFib Ablation Registry\n$registry-cathpci - #0086d5; CathPCI Registry\n$registry-icd - #80b800; ICD Registry\n$registry-impact - #4e1f73; IMPACT Registry\n$registry-pinnacle-primary - #0e4f1b; PINNACLE Registry (Primary)\n$registry-pinnacle-accent - #b3c4c4; PINNACLE Registry (Accent)\n$registry-focus - #d6560d; Patient Navigator Focus MI\n$registry-pcibleeding - #c0268e; Reducing Risk PCI Bleeding\n$registry-laao - #00667a; LAAO Registry\n$registry-pvi - #00947f; PVI Registry\n$registry-auxdata - #04adad; Auxiliar Data Collection\n$registry-ststvt - #a20062; STS ACC TVT Registry\n$registry-diabetes - #7893b8; Diabetes Collaborative \n\nWeight: 2000\n\nStyleguide DesignBase.Colors.ColorCoding.Registry\n\n*/\n/*\n\nJournal\n\nJournals of JACC have specific branding colors.\n\n$journal-jc - #002e5a; Journal of the American College of Cardiology: (JC)\n$journal-adv - #0000FF; JACC: Advances: (JC-ADV)\n$journal-asia - #ec2939; JACC: Asia: (JC-ASIA)\n$journal-tran - #1788c2; JACC: Basic to Translational Science: (JC-TRAN)\n$journal-cvonc - #00ae81; JACC: CardioOncology: (JC-CVONC)\n$journal-case - #f37321; JACC: Case Reports: (JC-CASE)\n$journal-ep - #8a5e96; JACC: Clinical Electrophysiology: (JC-EP)\n$journal-hf - #991326; JACC: Heart Failure: (JC-HF)\n$journal-invt - #038e92; JACC: Cardiovascular Interventions: (JC-INVT)\n$journal-imag - #c18a0e; JACC: Cardiovascular Imaging: (JC-IMAG)\n\n\nWeight: 2000\n\nStyleguide DesignBase.Colors.ColorCoding.Journals\n\n*/\n/*\n\nSocial Network Colors \n\nEach 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.\n\n$twitter - #000; \t\ttwitter \n$facebook - #3b5998; \tfacebook \n$linkedin - #007bb6; \tlinkedin \n$apple-store - #ea4cc0; \tapple-store \n$google-play - #689f38; \tgoogle-play \n$youtube - #bb0000; \tyoutube \n\n\n\nWeight: 100\n\nStyleguide DesignBase.Colors.ColorCoding.Social Networks\n\n*/\n/*\n\tTextures\n\n\tAll 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. \n\n\t.texture_light \t\t- 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. \n\t.texture_medium \t\t\t\t\t- medium texture are used for area that are hidden away. Collapsable navs, areas, or sidebars ususaly use the medium texture.\n\t.texture_dust \t\t\t\t\t- 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.\n\t.texture_dark \t\t\t\t\t- This texture predominatly used on the footer. Its rich black will alway requrie reversed text and buttons to be readable. \n\t.texture_cross \t\t\t\t\t- A mostly transparent cross texture used for alternating rows of content when a little extra texture is needed.\n\t.texture_disabled \t\t\t\t- This texture is used to paint disabled buttons and ui items giving it a greyed and X'ed out appearand. \n\n\tMarkup:\n\t
{{modifier_class}} with a light primary color background
\n\n\tStyleguide DesignBase.Textures\n\n */\n/*\n\nprimary: Color Variations \n\nThe Modified versions of the primary color from this theme\n\nMarkup:\n\n\n\t\t
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.primary\n\n*/\n/*\n\nsecondary: Color Variations \n\nThe Modified versions of the secondary color from this theme\n\nMarkup:\n\n\n\t\t
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.secondary\n\n*/\n/*\n\nsuccess: Color Variations \n\nThe Modified versions of the success color from this theme\n\nMarkup:\n\n\n\t\t
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.success\n\n*/\n/*\n\nshade: Color Variations \n\nThe Modified versions of the shade color from this theme\n\nMarkup:\n\n\n\t\t
shade-n5
HEX:#141414
RGB:20, 20, 20
HSL:0deg ,9.2561983471%, 7.8823529412%
\n\t\t
shade-n4
HEX:#292828
RGB:41, 40, 40
HSL:0deg ,7.7685950413%, 15.7647058824%
\n\t\t
shade-n3
HEX:#444242
RGB:68, 66, 66
HSL:0deg ,5.7851239669%, 26.2745098039%
\n\t\t
shade-n2
HEX:#5f5d5d
RGB:95, 93, 93
HSL:0deg ,3.8016528926%, 36.7843137255%
\n\t\t
shade-n1
HEX:#737171
RGB:115, 113, 113
HSL:0deg ,2.3140495868%, 44.6666666667%
\n\t\t
shade-0
HEX:#878585
RGB:135, 133, 133
HSL:0deg, 0.826446281%, 52.5490196078%
\n\t\t
shade-1
HEX:#939191
RGB:147, 145, 145
HSL:0deg ,0.7851239669%, 57.2941176471%
\n\t\t
shade-2
HEX:#a5a4a4
RGB:165, 164, 164
HSL:0deg ,0.7231404959%, 64.4117647059%
\n\t\t
shade-3
HEX:#c3c2c2
RGB:195, 194, 194
HSL:0deg ,0.6198347107%, 76.2745098039%
\n\t\t
shade-4
HEX:#e1e1e1
RGB:225, 225, 225
HSL:0deg ,0.5165289256%, 88.137254902%
\n\t\t
shade-5
HEX:#f3f3f3
RGB:243, 243, 243
HSL:0deg ,0.4545454545%, 95.2549019608%
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.shade\n\n*/\n/*\n\nwarning: Color Variations \n\nThe Modified versions of the warning color from this theme\n\nMarkup:\n\n\n\t\t
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.warning\n\n*/\n/*\n\nalert: Color Variations \n\nThe Modified versions of the alert color from this theme\n\nMarkup:\n\n\n\t\t
alert-n5
HEX:#210404
RGB:33, 4, 4
HSL:0deg ,80.7368421053%, 7.2647058824%
\n\t\t
alert-n4
HEX:#420808
RGB:66, 8, 8
HSL:0deg ,80.4210526316%, 14.5294117647%
\n\t\t
alert-n3
HEX:#6f0d0d
RGB:111, 13, 13
HSL:0deg ,80%, 24.2156862745%
\n\t\t
alert-n2
HEX:#9b1212
RGB:155, 18, 18
HSL:0deg ,79.5789473684%, 33.9019607843%
\n\t\t
alert-n1
HEX:#bc1616
RGB:188, 22, 22
HSL:0deg ,79.2631578947%, 41.1666666667%
\n\t\t
alert-0
HEX:#dd1a1a
RGB:221, 26, 26
HSL:0deg, 78.9473684211%, 48.431372549%
\n\t\t
alert-1
HEX:#e62b2b
RGB:230, 43, 43
HSL:0deg ,75%, 53.5882352941%
\n\t\t
alert-2
HEX:#ea4f4f
RGB:234, 79, 79
HSL:0deg ,69.0789473684%, 61.3235294118%
\n\t\t
alert-3
HEX:#f18989
RGB:241, 137, 137
HSL:0deg ,59.2105263158%, 74.2156862745%
\n\t\t
alert-4
HEX:#f8c4c4
RGB:248, 196, 196
HSL:0deg ,49.3421052632%, 87.1078431373%
\n\t\t
alert-5
HEX:#fce7e7
RGB:252, 231, 231
HSL:0deg ,43.4210526316%, 94.8431372549%
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.alert\n\n*/\n/*\n\nnavigation: Color Variations \n\nThe Modified versions of the navigation color from this theme\n\nMarkup:\n\n\n\t\t
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.navigation\n\n*/\n/*\n\naccent: Color Variations \n\nThe Modified versions of the accent color from this theme\n\nMarkup:\n\n\n\t\t
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.accent\n\n*/\n/*\n\ninfo: Color Variations \n\nThe Modified versions of the info color from this theme\n\nMarkup:\n\n\n\t\t
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.info\n\n*/\n/*\n\nhighlight: Color Variations \n\nThe Modified versions of the highlight color from this theme\n\nMarkup:\n\n\n\t\t
highlight-n5
HEX:#120a1c
RGB:18, 10, 28
HSL:265.8536585366deg ,52.6352941176%, 7.5%
\n\t\t
highlight-n4
HEX:#241439
RGB:36, 20, 57
HSL:265.8536585366deg ,51.8588235294%, 15%
\n\t\t
highlight-n3
HEX:#3c215f
RGB:60, 33, 95
HSL:265.8536585366deg ,50.8235294118%, 25%
\n\t\t
highlight-n2
HEX:#532e84
RGB:83, 46, 132
HSL:265.8536585366deg ,49.7882352941%, 35%
\n\t\t
highlight-n1
HEX:#6538a1
RGB:101, 56, 161
HSL:265.8536585366deg ,49.0117647059%, 42.5%
\n\t\t
highlight-0
HEX:#7742bd
RGB:119, 66, 189
HSL:265.8536585366deg, 48.2352941176%, 50%
\n\t\t
highlight-1
HEX:#8555c4
RGB:133, 85, 196
HSL:265.8536585366deg ,45.8235294118%, 55%
\n\t\t
highlight-2
HEX:#9971ce
RGB:153, 113, 206
HSL:265.8536585366deg ,42.2058823529%, 62.5%
\n\t\t
highlight-3
HEX:#bba1de
RGB:187, 161, 222
HSL:265.8536585366deg ,36.1764705882%, 75%
\n\t\t
highlight-4
HEX:#ddd0ef
RGB:221, 208, 239
HSL:265.8536585366deg ,30.1470588235%, 87.5%
\n\t\t
highlight-5
HEX:#f1ecf8
RGB:241, 236, 248
HSL:265.8536585366deg ,26.5294117647%, 95%
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.highlight\n\n*/\n/*\n\nacc: Color Variations \n\nThe Modified versions of the acc color from this theme\n\nMarkup:\n\n\n\t\t
acc-n5
HEX:#000a12
RGB:0, 10, 18
HSL:206.9491525424deg ,100%, 3.4705882353%
\n\t\t
acc-n4
HEX:#001423
RGB:0, 20, 35
HSL:206.9491525424deg ,100%, 6.9411764706%
\n\t\t
acc-n3
HEX:#00213b
RGB:0, 33, 59
HSL:206.9491525424deg ,100%, 11.568627451%
\n\t\t
acc-n2
HEX:#002e53
RGB:0, 46, 83
HSL:206.9491525424deg ,100%, 16.1960784314%
\n\t\t
acc-n1
HEX:#003764
RGB:0, 55, 100
HSL:206.9491525424deg ,100%, 19.6666666667%
\n\t\t
acc-0
HEX:#004176
RGB:0, 65, 118
HSL:206.9491525424deg, 100%, 23.137254902%
\n\t\t
acc-1
HEX:#00579d
RGB:0, 87, 157
HSL:206.9491525424deg ,95%, 30.8235294118%
\n\t\t
acc-2
HEX:#0077d8
RGB:0, 119, 216
HSL:206.9491525424deg ,87.5%, 42.3529411765%
\n\t\t
acc-3
HEX:#3ba7ff
RGB:59, 167, 255
HSL:206.9491525424deg ,75%, 61.568627451%
\n\t\t
acc-4
HEX:#9dd3ff
RGB:157, 211, 255
HSL:206.9491525424deg ,62.5%, 80.7843137255%
\n\t\t
acc-5
HEX:#d8edff
RGB:216, 237, 255
HSL:206.9491525424deg ,55%, 92.3137254902%
\n\n\n\n\n\n HideCodeBlock: display_none \n\nWeight:0\n\nStyleguide DesignBase.CrayonBox.acc\n\n*/\n/*\nCrayon Box\n\nThis is all of the colors of the theme broken out with its modifications written in hex code.\n\n\nWeight:0\n\nHideCodeBlock: display_none \n\nStyleguide DesignBase.CrayonBox\n*/\n/*Adobe XD Color Map*/\n/* $xd-color_primary-0: #198dae*/\n/* $xd-color_primary-n5: #04151a*/\n/* $xd-color_primary-n4: #082a34*/\n/* $xd-color_primary-n3: #0d4757*/\n/* $xd-color_primary-n2: #12637a*/\n/* $xd-color_primary-n1: #157894*/\n/* $xd-color_primary-1: #1da3c9*/\n/* $xd-color_primary-2: #33bbe2*/\n/* $xd-color_primary-3: #77d2eb*/\n/* $xd-color_primary-4: #bbe8f5*/\n/* $xd-color_primary-5: #e4f6fb*/\n/* $xd-color_secondary-0: #676a72*/\n/* $xd-color_secondary-n5: #0f1011*/\n/* $xd-color_secondary-n4: #1f2022*/\n/* $xd-color_secondary-n3: #343539*/\n/* $xd-color_secondary-n2: #484a50*/\n/* $xd-color_secondary-n1: #585a61*/\n/* $xd-color_secondary-1: #757881*/\n/* $xd-color_secondary-2: #8c8f97*/\n/* $xd-color_secondary-3: #b2b4b9*/\n/* $xd-color_secondary-4: #d9dadc*/\n/* $xd-color_secondary-5: #f0f0f1*/\n/* $xd-color_success-0: #078a2e*/\n/* $xd-color_success-n5: #011507*/\n/* $xd-color_success-n4: #02290e*/\n/* $xd-color_success-n3: #044517*/\n/* $xd-color_success-n2: #056120*/\n/* $xd-color_success-n1: #067527*/\n/* $xd-color_success-1: #09ad3a*/\n/* $xd-color_success-2: #0be14b*/\n/* $xd-color_success-3: #51f682*/\n/* $xd-color_success-4: #a8fbc1*/\n/* $xd-color_success-5: #dcfde6*/\n/* $xd-color_shade-0: #878585*/\n/* $xd-color_shade-n5: #141414*/\n/* $xd-color_shade-n4: #292828*/\n/* $xd-color_shade-n3: #444242*/\n/* $xd-color_shade-n2: #5f5d5d*/\n/* $xd-color_shade-n1: #737171*/\n/* $xd-color_shade-1: #939191*/\n/* $xd-color_shade-2: #a5a4a4*/\n/* $xd-color_shade-3: #c3c2c2*/\n/* $xd-color_shade-4: #e1e1e1*/\n/* $xd-color_shade-5: #f3f3f3*/\n/* $xd-color_warning-0: #da8210*/\n/* $xd-color_warning-n5: #211402*/\n/* $xd-color_warning-n4: #412705*/\n/* $xd-color_warning-n3: #6d4108*/\n/* $xd-color_warning-n2: #995b0b*/\n/* $xd-color_warning-n1: #b96f0e*/\n/* $xd-color_warning-1: #ee9118*/\n/* $xd-color_warning-2: #f1a33e*/\n/* $xd-color_warning-3: #f6c27e*/\n/* $xd-color_warning-4: #fae0bf*/\n/* $xd-color_warning-5: #fdf3e5*/\n/* $xd-color_alert-0: #dd1a1a*/\n/* $xd-color_alert-n5: #210404*/\n/* $xd-color_alert-n4: #420808*/\n/* $xd-color_alert-n3: #6f0d0d*/\n/* $xd-color_alert-n2: #9b1212*/\n/* $xd-color_alert-n1: #bc1616*/\n/* $xd-color_alert-1: #e62b2b*/\n/* $xd-color_alert-2: #ea4f4f*/\n/* $xd-color_alert-3: #f18989*/\n/* $xd-color_alert-4: #f8c4c4*/\n/* $xd-color_alert-5: #fce7e7*/\n/* $xd-color_navigation-0: #2b58c0*/\n/* $xd-color_navigation-n5: #060d1d*/\n/* $xd-color_navigation-n4: #0d1a3a*/\n/* $xd-color_navigation-n3: #162c60*/\n/* $xd-color_navigation-n2: #1e3e86*/\n/* $xd-color_navigation-n1: #254ba3*/\n/* $xd-color_navigation-1: #3564d2*/\n/* $xd-color_navigation-2: #567ed9*/\n/* $xd-color_navigation-3: #8fa9e6*/\n/* $xd-color_navigation-4: #c7d4f2*/\n/* $xd-color_navigation-5: #e9eefa*/\n/* $xd-color_accent-0: #16a385*/\n/* $xd-color_accent-n5: #031814*/\n/* $xd-color_accent-n4: #073128*/\n/* $xd-color_accent-n3: #0b5243*/\n/* $xd-color_accent-n2: #0f725d*/\n/* $xd-color_accent-n1: #138b71*/\n/* $xd-color_accent-1: #1ac09c*/\n/* $xd-color_accent-2: #28e2ba*/\n/* $xd-color_accent-3: #70ecd1*/\n/* $xd-color_accent-4: #b7f5e8*/\n/* $xd-color_accent-5: #e2fbf6*/\n/* $xd-color_info-0: #a3988c*/\n/* $xd-color_info-n5: #191714*/\n/* $xd-color_info-n4: #332e28*/\n/* $xd-color_info-n3: #544c43*/\n/* $xd-color_info-n2: #766b5e*/\n/* $xd-color_info-n1: #8f8173*/\n/* $xd-color_info-1: #aca298*/\n/* $xd-color_info-2: #bab2a9*/\n/* $xd-color_info-3: #d1ccc6*/\n/* $xd-color_info-4: #e8e5e2*/\n/* $xd-color_info-5: #f6f5f4*/\n/* $xd-color_highlight-0: #7742bd*/\n/* $xd-color_highlight-n5: #120a1c*/\n/* $xd-color_highlight-n4: #241439*/\n/* $xd-color_highlight-n3: #3c215f*/\n/* $xd-color_highlight-n2: #532e84*/\n/* $xd-color_highlight-n1: #6538a1*/\n/* $xd-color_highlight-1: #8555c4*/\n/* $xd-color_highlight-2: #9971ce*/\n/* $xd-color_highlight-3: #bba1de*/\n/* $xd-color_highlight-4: #ddd0ef*/\n/* $xd-color_highlight-5: #f1ecf8*/\n/* $xd-color_acc-0: #004176*/\n/* $xd-color_acc-n5: #000a12*/\n/* $xd-color_acc-n4: #001423*/\n/* $xd-color_acc-n3: #00213b*/\n/* $xd-color_acc-n2: #002e53*/\n/* $xd-color_acc-n1: #003764*/\n/* $xd-color_acc-1: #00579d*/\n/* $xd-color_acc-2: #0077d8*/\n/* $xd-color_acc-3: #3ba7ff*/\n/* $xd-color_acc-4: #9dd3ff*/\n/* $xd-color_acc-5: #d8edff*/\n.font .font--example {\n background-image: url(http://basehold.it/i/24);\n}\n.font .font--name {\n color: #000;\n}\n.font .font--dropcase_2x {\n color: #198dae;\n}\n\n/*\n\nBasic HTML\n\nThe 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. \n\nWeight: -100\n\nStyleguide HTML\n*/\n/*\n\nReading Typography\n\nReading 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. \n\nMarkup:\n\n
This is the primary heading and there should only be one of these per page
\n
sub heading
\n
A small paragraph to emphasis and show important bits.
\n
\n
This is a list item
\n
So is this - there could be more
\n
Make sure to style list items to:\n
\n
Not forgetting child list items
\n
Not forgetting child list items
\n
Not forgetting child list items
\n
Not forgetting child list items
\n
\n
\n
A couple more
\n
top level list items
\n
\n
Don't forget Ordered lists:
\n \n
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
\n
Aliquam tincidunt mauris eu risus.\n \n
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
\n
Aliquam tincidunt mauris eu risus.
\n \n
\n
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
\n
Aliquam tincidunt mauris eu risus.\n
\n
A sub heading which is not as important as the first, but is quite imporant overall
\n
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.
\n
\n
\n
Table Heading
\n
Table Heading
\n
\n \n
\n
table data
\n
table data
\n
\n
\n
table data
\n
table data
\n
\n
\n
table data
\n
table data
\n
\n
\n
table data
\n
table data
\n
\n
\t\n
A sub heading which is not as important as the second, but should be used with consideration
\n
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.
\n
“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.”
\n
A sub heading which is not as important as the second, but should be used with consideration
\n
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
\n
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.
\n
\n
Definition list
\n
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna \n\taliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea \n\tcommodo consequat.
\n\t
Lorem ipsum dolor sit amet
\n\t
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna \n\taliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea \n\tcommodo consequat.
\n\t
\n\t
This heading plays a relatively small bit part role, if you use it at all
\n
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.
\n\n\n Table of Contents\n
\n \n
How to Prepare for the Boards
\n
General Principles of Cardiovascular Medicine\n
\n
Arrhythmias
\n
Coronary Artery Disease
\n
Heart Failure & Cardiomyopathy
\n
Valvular Disease
\n
Pericardial Disease
\n
Congenital Heart Disease
\n
Vascular Diseases
\n
Systemic Hypertension and Hypotension
\n
Pulmonary Circulation Disorders
\n
Systemic Disorders Affecting the Circulatory\n System
\n
\n Miscellaneous\n
\n
Cardiovascular Genetics
\n
CPR, Post-Resuscitation Care
\n
Cardiac Critical Care
\n
Sleep Disordered Breathing
\n
Sports Cardiology
\n
Pregnancy and Cardiac Disease
\n
Cardiovascular Operative Management\n
\n
Pharmacology
\n
General Principles of Cardiovascular\n Medicine
\n
\n
\n \n
\n \n\nWeight: -9\n\nHideCodeBlock: display_none \n\nStyleguide HTML.Typography\n\n*/\n/*\n\nReading Typography Modified\n\nThis text is used as a lorem content in many of our containers. \n\n.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.\n\nMarkup:\n{{> Sub.Placeholder.Typography modifier_class=\" color_inherit bg_acc c_white p_4 links_light\"}}\n\nWeight: -9\n\nHideCodeBlock: display_none \n\nMarkupWrapperClasses: br_solid br_radius br_black-1 br_1 m_3 max-w_50\n\nStyleguide HTML.Typography.Sample\n\n*/\n/*\n\nLinks States\n\nThis shows the look and feel of all the states of a text link, color, underline and decoration.\n\nMarkup:\n
\n\nWeight: -50\n\nStyleguide Bootstrap\n*/\n/*\n\nTables\n\nThe collection of modifications you can do with tables out of the box from Bootstrap Arches.\n\nMarkup:\n
` all receive top and bottom margins. We nuke the top\n// margin for easier control within type scales as it avoids margin collapsing.\n\n%heading {\n margin-top: 0; // 1\n margin-bottom: $headings-margin-bottom;\n font-family: $headings-font-family;\n font-style: $headings-font-style;\n font-weight: $headings-font-weight;\n line-height: $headings-line-height;\n color: $headings-color;\n}\n\nh1 {\n @extend %heading;\n @include font-size($h1-font-size);\n}\n\nh2 {\n @extend %heading;\n @include font-size($h2-font-size);\n}\n\nh3 {\n @extend %heading;\n @include font-size($h3-font-size);\n}\n\nh4 {\n @extend %heading;\n @include font-size($h4-font-size);\n}\n\nh5 {\n @extend %heading;\n @include font-size($h5-font-size);\n}\n\nh6 {\n @extend %heading;\n @include font-size($h6-font-size);\n}\n\n\n// Reset margins on paragraphs\n//\n// Similarly, the top margin on `
`s get reset. However, we also reset the\n// bottom margin to use `rem` units instead of `em`.\n\np {\n margin-top: 0;\n margin-bottom: $paragraph-margin-bottom;\n}\n\n\n// Abbreviations\n//\n// 1. Duplicate behavior to the data-bs-* attribute for our tooltip plugin\n// 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.\n// 3. Add explicit cursor to indicate changed behavior.\n// 4. Prevent the text-decoration to be skipped.\n\nabbr[title],\nabbr[data-bs-original-title] { // 1\n text-decoration: underline dotted; // 2\n cursor: help; // 3\n text-decoration-skip-ink: none; // 4\n}\n\n\n// Address\n\naddress {\n margin-bottom: 1rem;\n font-style: normal;\n line-height: inherit;\n}\n\n\n// Lists\n\nol,\nul {\n padding-left: 2rem;\n}\n\nol,\nul,\ndl {\n margin-top: 0;\n margin-bottom: 1rem;\n}\n\nol ol,\nul ul,\nol ul,\nul ol {\n margin-bottom: 0;\n}\n\ndt {\n font-weight: $dt-font-weight;\n}\n\n// 1. Undo browser default\n\ndd {\n margin-bottom: .5rem;\n margin-left: 0; // 1\n}\n\n\n// Blockquote\n\nblockquote {\n margin: 0 0 1rem;\n}\n\n\n// Strong\n//\n// Add the correct font weight in Chrome, Edge, and Safari\n\nb,\nstrong {\n font-weight: $font-weight-bolder;\n}\n\n\n// Small\n//\n// Add the correct font size in all browsers\n\nsmall {\n @include font-size($small-font-size);\n}\n\n\n// Mark\n\nmark {\n padding: $mark-padding;\n background-color: $mark-bg;\n}\n\n\n// Sub and Sup\n//\n// Prevent `sub` and `sup` elements from affecting the line height in\n// all browsers.\n\nsub,\nsup {\n position: relative;\n @include font-size($sub-sup-font-size);\n line-height: 0;\n vertical-align: baseline;\n}\n\nsub { bottom: -.25em; }\nsup { top: -.5em; }\n\n\n// Links\n\na {\n color: $link-color;\n text-decoration: $link-decoration;\n\n &:hover {\n color: $link-hover-color;\n text-decoration: $link-hover-decoration;\n }\n}\n\n// And undo these styles for placeholder links/named anchors (without href).\n// It would be more straightforward to just use a[href] in previous block, but that\n// causes specificity issues in many other styles that are too complex to fix.\n// See https://github.com/twbs/bootstrap/issues/19402\n\na:not([href]):not([class]) {\n &,\n &:hover {\n color: inherit;\n text-decoration: none;\n }\n}\n\n\n// Code\n\npre,\ncode,\nkbd,\nsamp {\n font-family: $font-family-code;\n @include font-size(1em); // Correct the odd `em` font sizing in all browsers.\n direction: ltr #{\"/* rtl:ignore */\"};\n unicode-bidi: bidi-override;\n}\n\n// 1. Remove browser default top margin\n// 2. Reset browser default of `1em` to use `rem`s\n// 3. Don't allow content to break outside\n\npre {\n display: block;\n margin-top: 0; // 1\n margin-bottom: 1rem; // 2\n overflow: auto; // 3\n @include font-size($code-font-size);\n color: $pre-color;\n\n // Account for some code outputs that place code tags in pre tags\n code {\n @include font-size(inherit);\n color: inherit;\n word-break: normal;\n }\n}\n\ncode {\n @include font-size($code-font-size);\n color: $code-color;\n word-wrap: break-word;\n\n // Streamline the style when inside anchors to avoid broken underline and more\n a > & {\n color: inherit;\n }\n}\n\nkbd {\n padding: $kbd-padding-y $kbd-padding-x;\n @include font-size($kbd-font-size);\n color: $kbd-color;\n background-color: $kbd-bg;\n @include border-radius($border-radius-sm);\n\n kbd {\n padding: 0;\n @include font-size(1em);\n font-weight: $nested-kbd-font-weight;\n }\n}\n\n\n// Figures\n//\n// Apply a consistent margin strategy (matches our type styles).\n\nfigure {\n margin: 0 0 1rem;\n}\n\n\n// Images and content\n\nimg,\nsvg {\n vertical-align: middle;\n}\n\n\n// Tables\n//\n// Prevent double borders\n\ntable {\n caption-side: bottom;\n border-collapse: collapse;\n}\n\ncaption {\n padding-top: $table-cell-padding-y;\n padding-bottom: $table-cell-padding-y;\n color: $table-caption-color;\n text-align: left;\n}\n\n// 1. Removes font-weight bold by inheriting\n// 2. Matches default `
` alignment by inheriting `text-align`.\n// 3. Fix alignment for Safari\n\nth {\n font-weight: $table-th-font-weight; // 1\n text-align: inherit; // 2\n text-align: -webkit-match-parent; // 3\n}\n\nthead,\ntbody,\ntfoot,\ntr,\ntd,\nth {\n border-color: inherit;\n border-style: solid;\n border-width: 0;\n}\n\n\n// Forms\n//\n// 1. Allow labels to use `margin` for spacing.\n\nlabel {\n display: inline-block; // 1\n}\n\n// Remove the default `border-radius` that macOS Chrome adds.\n// See https://github.com/twbs/bootstrap/issues/24093\n\nbutton {\n // stylelint-disable-next-line property-disallowed-list\n border-radius: 0;\n}\n\n// Explicitly remove focus outline in Chromium when it shouldn't be\n// visible (e.g. as result of mouse click or touch tap). It already\n// should be doing this automatically, but seems to currently be\n// confused and applies its very visible two-tone outline anyway.\n\nbutton:focus:not(:focus-visible) {\n outline: 0;\n}\n\n// 1. Remove the margin in Firefox and Safari\n\ninput,\nbutton,\nselect,\noptgroup,\ntextarea {\n margin: 0; // 1\n font-family: inherit;\n @include font-size(inherit);\n line-height: inherit;\n}\n\n// Remove the inheritance of text transform in Firefox\nbutton,\nselect {\n text-transform: none;\n}\n// Set the cursor for non-`
![](\"https://raw.githubusercontent.com/ACC-Style/Arches/refs/heads/master/src/img/temp/logo-1.svg\"/){kind=logo}
\n\nMarkupWrapperClasses: max-w_40 relative h_20 w_100\n\n\nWeight:10\n\nStyleguide Sub.Data.Sponsor.Logo\n*/\n/*\nWeb Address\n\nMarkup:\nhttp://wwww.LogoIpsum.com\n\nWeight:25\n\nStyleguide Sub.Data.Sponsor.WebAddress\n*/\n/*\nWebsite Link\n\nMarkup:\n 'Sub.Data.Sponsor.WebAddress'}}\">Website\n\nWeight:26\n\nStyleguide Sub.Data.Sponsor.WebLink\n*/\n/* Nav Recipes.00x */\n/*\nCall to Action Buttons\n\nDescription: The Call to Action Button component is used to create a prominent button that encourages users to take a specific action.\n\nSign Up - Used to encourage users to register or create an account. It prompts them to take action and join a platform, service, or community.\nPurchase - 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.\nLearn More - Used explore further information about a product, service, or topic. It encourages them to click and discover additional details or resources.\nSubscribe - 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.\nGet 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.\n\nMarkup:\n\n\n\nNOTE: 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.\n\n\nWeight:1000\n\nStyleguide HTML.Inputs.Button.CTA\n*/\n/*\nButtons\n\nDescription: Basic Buttons and modifiers. \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button\n*/\n/*\nButtons Small\n\nDescription: Basic Buttons and modifiers. \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button.SM\n*/\n/*\nButtons Large\n\nDescription: Basic Buttons and modifiers. \n\n.btn-primary - primary button\n.btn-secondary - secondary button\n.btn-shade - shade button\n.btn-accent - accent button\n.btn-success - success button\n.btn-warning - warning button\n.btn-alert - alert button\n.btn-hollow - hollow button\n.disabled - disabled button\n\nMarkup:\n\n\nMarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4\n\nWeight:0\n\nStyleguide HTML.Inputs.Button.LG\n*/\n/* Recipes.40 */\n.address {\n font-style: unset;\n}\n\n@media only screen and (min-width: 640px) {\n .reverse-indent {\n display: inline-block;\n margin-left: 1em;\n padding-right: 1em;\n text-indent: -1em;\n width: 100%;\n }\n .reverse-indent:after {\n content: \"\";\n display: table;\n clear: both;\n }\n}\n/*\nGeneric Footer\n\nThis defines the web footer. \n\nMarkup:\n\n\nSubComponents: \nSub.Component.Navigation.Footer.Address - Addresses\nSub.Component.Navigation.Footer.Social - Social Links\nSub.Component.Navigation.Footer.ACCProductLinks - Sister Sites\nSub.Component.Navigation.Footer.Subfooter - Sub Footer\nSub.Component.Navigation.Footer.Cite - Citation for the Site\n\nWeight: 40\n\nStyleguide Component.Navigation.Footer\n*/\n/*\nSub Footer\n\nDescription: ACC has some basic legal information that should be on every property. \n\nMarkup:\n\n\n\n\n\nWeight: 0\n\nStyleguide Sub.Component.Navigation.Footer.Subfooter\n*/\n/*\n\tCite and Copyright\n\n\tContains copy right \n\n\tMarkup:\n ![](\"https://picsum.photos/300/250\"/)
\n ![](\"https://cdn.jsdelivr.net/gh/ACC-Style/Arches/dist/img/LoremIpsum.png\"/)
\n\nMarkupWrapperClasses: max-w_40 relative h_20 w_100\n\n\nWeight:10\n\nStyleguide Sub.Data.Sponsor.Logo\n*/\n/*\nWeb Address\n\nMarkup:\nhttp://wwww.LogoIpsum.com\n\nWeight:25\n\nStyleguide Sub.Data.Sponsor.WebAddress\n*/\n/*\nWebsite Link\n\nMarkup:\n 'Sub.Data.Sponsor.WebAddress'}}\">Website\n\nWeight:26\n\nStyleguide Sub.Data.Sponsor.WebLink\n*/\n/*\nWebsite Link\n\nMarkup:\n 'Sub.Data.Sponsor.WebAddress'}}\">More\n\nWeight:26\n\nStyleguide Sub.Data.Sponsor.MoreLink\n*/\n/*\nPDF Link\n\nMarkup:\n 'Sub.Data.Sponsor.WebAddress'}}.pdf\">PDF\n\nWeight:26\n\nStyleguide Sub.Data.Sponsor.PDFLink\n*/\n/*\nDescription\n\nDescription: Short html description of the sponsor or the product.\n\nMarkup:\n![\"\"](\"https://via.placeholder.com/400x300.png?text=Mobile\")
\n ![\"\"](\"https://picsum.photos/260/240\")
\n ![](\"https://cdn.jsdelivr.net/gh/ACC-Style/Arches/dist/img/LoremIpsum3.png\")
\n ![](\"https://cdn.jsdelivr.net/gh/ACC-Style/Arches/dist/img/LoremIpsum2.png\")
\n ![](\"{{)
Sub.Placeholder.Image.300x400 }}\" class=\"w_100\" alt=\"\">\n\t![\"...\"/](\"http://lorempixel.com/630/420/animals\")
\n\t\t\t![\"...\"/](\"http://lorempixel.com/630/420/nature\")
\n\t\t\t![\"...\"/](\"http://lorempixel.com/630/420/food\")
\n\t\t\t