Weight:20
Styleguide Sub.Data.Sponsor.Address
*/
/*
Logo
Description:
Logo of the Company
Markup:
MarkupWrapperClasses: max-w_40 relative h_20 w_100
Weight:10
Styleguide Sub.Data.Sponsor.Logo
*/
/*
Web Address
Markup:
http://wwww.LogoIpsum.com
Weight:25
Styleguide Sub.Data.Sponsor.WebAddress
*/
/*
Website Link
Markup:
Website
Weight:26
Styleguide Sub.Data.Sponsor.WebLink
*/
/* Nav Recipes.00x */
/*
Call to Action Buttons
Description: The Call to Action Button component is used to create a prominent button that encourages users to take a specific action.
Sign Up - Used to encourage users to register or create an account. It prompts them to take action and join a platform, service, or community.
Purchase - Used to prompt users to make a purchase. It creates a sense of urgency and directs users to complete a transaction for a product or service.
Learn More - Used explore further information about a product, service, or topic. It encourages them to click and discover additional details or resources.
Subscribe - Used to encourage users to subscribe to a newsletter, mailing list, or updates from a website or company. It aims to build a relationship with users and keep them engaged.
Get Started - Used to initiate user onboarding or guide users through the first steps of using a product or service. It prompts users to begin their journey and experience the offering.
Markup:
NOTE: The Call to Action Button component is ideal for creating prominent buttons that attract user attention and encourage them to take a specific action, such as signing up, making a purchase, or exploring more content.
Weight:1000
Styleguide HTML.Inputs.Button.CTA
*/
/*
Buttons
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button
*/
/*
Buttons Small
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button.SM
*/
/*
Buttons Large
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button.LG
*/
/* Recipes.40 */
.address {
font-style: unset;
}
@media only screen and (min-width: 640px) {
.reverse-indent {
display: inline-block;
width: 100%;
margin-left: 1em;
padding-right: 1em;
text-indent: -1em;
}
.reverse-indent:after {
display: table;
clear: both;
content: "";
}
}
/*
Generic Footer
This defines the web footer.
Markup:
SubComponents:
Sub.Component.Navigation.Footer.Address - Addresses
Sub.Component.Navigation.Footer.Social - Social Links
Sub.Component.Navigation.Footer.ACCProductLinks - Sister Sites
Sub.Component.Navigation.Footer.Subfooter - Sub Footer
Sub.Component.Navigation.Footer.Cite - Citation for the Site
Weight: 40
Styleguide Component.Navigation.Footer
*/
/*
Sub Footer
Description: ACC has some basic legal information that should be on every property.
Markup:
Weight: 0
Styleguide Sub.Component.Navigation.Footer.Subfooter
*/
/*
Cite and Copyright
Contains copy right
Markup:
MarkupWrapperClasses:
texture_dark p_4 max-w_30
Styleguide Sub.Component.Navigation.Footer.Address
*/
/*
Fat Footers Links
Footers in the ACC sometimes have fat footers with a list of categories and links.
Markup:
MarkupWrapperClasses:
texture_dark p_4
Styleguide Component.Navigation.Footer.Fat-Footer-Links
*/
/*
ACC Product Links
Links to the other major products in the ACC portfolio
Markup:
MarkupWrapperClasses:
texture_dark p_4
Styleguide Sub.Component.Navigation.Footer.ACCProductLinks
*/
/*
Social Links
The college has a collection of social or secondary platforms we interact with.
Markup:
Stay Connected
MarkupWrapperClasses:
texture_dark p_4 max-w_40
Styleguide Sub.Component.Navigation.Footer.Social
*/
/* Nav Recipes.50 */
/*
Quick Utility Links
Quick Links are only text links that are used for special cross marketing to sister sites and utility pages like about, home, extra.
Markup:
Weight:50
Styleguide Component.Navigation.QuickLinks
*/
/* Nav Recipes.04x */
/*
Advertisment Spaces
Advertising comes in static size so wrapper areas ease the alignment issues when in shared column spaces.
Markup:
advertisment
MarkupWrapperClasses:
max-w_30
Styleguide Component.Advertisement
*/
/* content Recipes.100 */
/*
Social Links
The social links From the Footer.
Markup:
Styleguide Component.Navigation.SocialLinks
*/
/*
Social Links Monochrome
The social links can be restyled to be smaller.
Markup:
Styleguide Component.Navigation.SocialLinks.Mono Chrome
*/
/*
Social Links Smaller
The social links can be restyled to be smaller.
Markup:
Styleguide Component.Navigation.SocialLinks.Smaller
*/
/*
Cookie Banner
Description: This page is the root of the page. The cookie banner was used to display a message to the user that the site uses cookies. The user can click on the banner to dismiss the message.
The system will present user a pop-up banner that appears when first accessing the site, which will include text, links and an Accept/OK button.
The system will allow the user to dismiss the pop up by clicking the Accept/OK button
The system will allow the ACC Admin to "reset" the pop up banner, which will show it to all users and require them to click accept again to dismiss it.
The system will track and record the users date/time when they accepted the pop up.
Markup:
This site uses cookies to improve your experience.
MarkupWrapperClasses: relative
NOTE: This design needs to have the 'fixed' class changed to fixed in the parent container of the attached code when in real implementations. 'fixed' is used in the documentation page so it would not break free of the documentation area into the bottom of the browser page.
Weight:100
Styleguide Component.CookieBanner
*/
/* content Recipes.150 */
/*
Ordered Cards
Having cards order on page to help users find there way through steps can some times be very helpful.
Markup:
First it is bad
This is a card.
It has an easy to override visual style, and is appropriately subdued.
Then it is not right
This is a card.
It has an easy to override visual style, and is appropriately subdued.
At last it is good
This is a card.
It has an easy to override visual style, and is appropriately subdued.
Weight: 150
Styleguide Recipes.Ordered Cards
*/
/* content Recipes.250 */
/*
Read More Arrow
This stacked incon is used in multiple locations when a user should know their is more to learn or read on another section of the site.
Markup:
StyleGuide Sub.Component.Common.ReadMoreArrow
*/
/*
600w x 300h
Markup:
https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.600x300
*/
/*
600w x 400h
Markup:
https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.600x400
*/
/*
1200w x 300h
Markup:
https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.1200x300
*/
/*
375w x 250h
Markup:
https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.375x250
*/
/*
320w x 300h
Markup:
https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.320x300
*/
/*
1024w x 256h
Markup:
https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.1024x256
*/
/*
Aspect 21x9
Markup:
https://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.21x9
*/
/*
Aspect 16x9
Markup:
https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.16x9
*/
/*
300w x 400h
Markup:
https://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.300x400
*/
/*
square
Markup:
https://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.Square
*/
/*
Max 20 Character
Markup:
Di dolores (20 Chars)
Styleguide Sub.Placeholder.Text.20ch
*/
/*
Max 30 Character
Markup:
Commodi dolores (30 Characters)
Styleguide Sub.Placeholder.Text.30ch
*/
/*
Max 40 Character
Markup:
Rerum libg dero pariatur (40 Characters)
Styleguide Sub.Placeholder.Text.40ch
*/
/*
Max 60 Character
Markup:
Sed ut perspiciatis unde omnis iste natus er (60 Characters)
Styleguide Sub.Placeholder.Text.60ch
*/
/*
Max 80 Character
Markup:
Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters)
Styleguide Sub.Placeholder.Text.80ch
*/
/*
Max 100 Character
Markup:
Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)
Styleguide Sub.Placeholder.Text.100ch
*/
/*
Max 150 Character
Markup:
Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)
Styleguide Sub.Placeholder.Text.150ch
*/
/*
Max 200 Character
Markup:
Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)
Styleguide Sub.Placeholder.Text.200ch
*/
/*
Max 250 Character
Markup:
Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)
Styleguide Sub.Placeholder.Text.250ch
*/
/*
Grid - Triple Card Holder
Markup:
columns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography
NOTE:
Triple up cards with shaded background are used only in full screen pages
Styleguide Sub.ClassList.Grid.Card.Split-Triple
*/
/*
Triple Split with Sidebar
Markup:
columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left
NOTE:
Triple up splits
Styleguide Sub.ClassList.Grid.TripleLG
*/
/*
Grid - Card Holder - 50 split
Markup:
columns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid
NOTE:
split layouts great for half page cards
Styleguide Sub.ClassList.Grid.Split-50
*/
/*
GridList Triple on XL
Markup:
columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none
Styleguide Sub.ClassList.Grid.TripleXL
*/
/*
GridList Item Basic
Markup:
flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius
NOTE:
Icon and Header use differnt classes because they are a simpler component.
Styleguide Sub.ClassList.Grid.Item
*/
/*
Subs
Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as
sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data
points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone
but are composed into larger, reusable structures.
These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text,
or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials
({{> 'Sub.X' }}) to render dynamic or variable content within patterns.
Common use cases: - {{> 'Sub.Sub.Data.Duration'}} — Displays session duration -
{{> 'Sub.Credit' modifier_class='CME'}} — Outputs a credit tag with a modifier -
{{> 'Sub.ActionButtons.Favorite'}} — Interactive favorite/save button
NOTE: Subs are maintained as composable units to promote consistency, reduce repetition, and streamline pattern updates across the system.
Styleguide Sub
*/
/*
Placeholders
Placeholders are just used across the styleguide. The can be either text or image stand ins for the UI.
Weight: 9999
Styleguide Sub.Placeholder
*/
/*
Recipe
Patterns that are used through out the refactors on ACC.org
Weight: 1000
Styleguide Sub.Recipe
*/
/*
Articles
There are multiple sub components that are used through out the most common page type on ACC.org
Weight: 1000
Styleguide Sub.Recipe.Article
*/
/*
Data
There are data and formats that should be followed when building out components on ACC.org bellow are some of the most common data formatting that is used across the site.
Weight: 500
Styleguide Sub.Data
*/
/*
Class Lists
Arches can be robust when trying to descrbe a complicated peice of UI and here is a respository of the classes used on those UI items
Weight: 2000
Styleguide Sub.ClassList
*/
/*
Rich Text
Markup:
Lorem Ipsum
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Header Level 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Table of Contents
How to Prepare for the Boards
General Principles of Cardiovascular Medicine
Arrhythmias
Coronary Artery Disease
Heart Failure & Cardiomyopathy
Valvular Disease
Pericardial Disease
Congenital Heart Disease
Vascular Diseases
Systemic Hypertension and Hypotension
Pulmonary Circulation Disorders
Systemic Disorders Affecting the Circulatory
System
Weight: 100
Styleguide Bootstrap.Pagination
*/
/*
Tabs
A simple way to show small groups of content that should have the same level of reading hierarchy.
Markup:
consectetur adipisicing elit
Lorem ipsum dolor sit amet. Quisquam maxime consectetur, nisi sed ea perspiciatis a sit porro laboriosam ab sequi est quas optio dolorum at maiores quis incidunt inventore.
Lorem ipsum dolor sit
Amet consectetur adipisicing elit. Vero enim provident consequuntur perspiciatis. Eligendi placeat consequuntur veniam quidem temporibus labore quisquam commodi rem error cumque fugit suscipit nulla, excepturi eos.
MarkupWrapperClasses:
SubComponents:
Sub.Component.Structures.Tabs.Tab.LinkActives - Active Tab
Sub.Component.Structures.Tabs.Tab.Link - Tab
Sub.Component.Structures.Tabs.Tab.LinkDisabled - Disabled Tab
Caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Structures.Tabs.
*/
/*
Simple Tabs: Dark Mode
Reverse Colored Tabs for when on dark background
Markup:
Weight: 0
Styleguide Sub.Component.Structures.Tabs.TabDark
*/
/*
Tab Dark: Active
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4
Weight:0
Styleguide Sub.Component.Structures.Tabs.TabDark.Link
*/
/*
Tab Dark: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_acc br_3 br_radius br_solid br_acc-3 p-l_4
Weight:0
Styleguide Sub.Component.Structures.Tabs.TabDark.LinkDisabled
*/
/*
Tab: Active
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light
Weight:0
Styleguide Sub.Component.Structures.Tabs.Tab.LinkActive
*/
/*
Tab: Basic
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light
Weight:0
Styleguide Sub.Component.Structures.Tabs.Tab.Link
*/
/*
Tab: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Markup:
MarkupWrapperClasses: flex_column flex_row:md ul_none nav bg_black-2 br_3 br_radius br_solid br_white-9 c_primary font_0 font_bold font_accent: p-x_0 p-x_4:md shadow_bevel-light
Weight:0
Styleguide Sub.Component.Structures.Tabs.Tab.LinkDisabled
*/
/*
UI Tabs
The application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.
Markup:
{{> Sub.Placeholder.Typography }}
{{> Sub.Placeholder.Typography }}
MarkupWrapperClasses: p_4
caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Structures.UITabs
*/
/*
UI Tabs Overflow
The application systems of acc.org have tabs that sometimes overrun the tabs space areas because they need to show many options.
Markup:
{{> Sub.Placeholder.Typography }}
{{> Sub.Placeholder.Typography }}
MarkupWrapperClasses: p_4
caution: This item is not finalized and might be subject to change
Note: Custom JavaScript is needed to make this scroll back and forth, and will need to have disables applied when overflow has reached a max or min.
Weight:0
Styleguide Component.Structures.UITabs.Overflow
*/
/*
Tab: Default
Description: Active State of Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
Link
caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
MarkupWrapperClasses: flex ul_none
Weight:0
Styleguide Sub.Component.Structures.UITabs.Tab
*/
/*
Tab: Active
Description: Active State of Dark Tab. Add and remove the `active is-active` class from the li-tag toggle the active effect
Markup:
MarkupWrapperClasses: flex ul_none
caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Sub.Component.Structures.UITabs.Tab.LinkActive
*/
/*
Tab: Disabled
Description: Disabled decorations is a swap of many of the decoration classes with the removal of the hover and active classes.
Markup:
caution: This item is not finalized and might be subject to change
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
MarkupWrapperClasses: flex ul_none
Weight:0
Styleguide Sub.Component.Structures.UITabs.Tab.LinkDisabled
*/
/*
Scroll Overflow Script
Description: Javascript is needed to make the scrolls work on the page
Markup:
MarkupWrapperClasses: p_4
caution: This item is not finalized and might be subject to change
Weight:0
Styleguide Component.Structures.UITabs.Script
*/
/*
Sidebar Nav
Description: Side bar for any 3 layer nav on the site. the parent node is from the main nav.
Markup:
Weight:-1000
MarkupWrapperClasses: max-w_25 m_auto
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Styleguide Component.Navigation.Sidebar
*/
/*
Parent NavItem
Description: The parent is singular in this nav it is always active and its direct children are always expanded so there is not need for a toggle.
Markup:
Weight: -100
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.Parent
*/
/*
Child NavItem
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
default - No added class
active - Nav Item changes its decoration if this the page the user is on.
Markup:
Weight: 10
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.Child
*/
/*
Toggle Child
Description: Toggle elements are set to active if the attached node or its children are active. If the toggle is active the collapsed children navigation are open by default.
default - the toggle when it doesn't have an active class still shades on hover
active - shade the toggle
Markup:
Weight: -10
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.ChildToggle
*/
/*
Child NavItem With Children
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Markup:
Weight: 15
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.ChildWithChildren
*/
/*
Child NavItem With Grand Children
Description: Child and Grandchild nav items are built the same way with a spacer with or without a toggle depending on if they have children.
Markup:
Weight: 15
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Styleguide Component.Navigation.Sidebar.ChildWithGrandChildren
*/
/*
Great Grandchild NavItem
Description: Great Grand Children loose the spacer for toggles because they don't have any child navs and don't need the use of a toggle.
default - No added class
active - Nav Item changes its decoration if this the page the user is on.
Markup:
Weight: 100
MarkupWrapperClasses: bg_primary c_white font_ui ul_none
Styleguide Component.Navigation.Sidebar.GreatGrandchild
*/
/*
Bootstrap Toggle Rotation
The toggles for bootstrap collapses use a `+` icon that twists to an `x` when the elements doesn't have `collapsed` or `show` as a class. to reduce confusion the class has a set rotation and speed attached to it. `a:rotation` is applied to the tow specific icons `fa-times` and `fa-chevron-up` only.
These classes are effected by the parent having `collapsed` state.
expanded - when the associated content is expanded the toggle will look like this
collapsed - when the associated content is collapsed the class is added to the toggle and it will look like this.
Markup:
Weight: 100
Styleguide Component.Navigation.Toggle.Rotation
*/
/*
Toggle
Toggle elements of a collapse with user feed back of the icon rotating.
#targetName - the name of the target of the collapse
Markup:
Weight: -10
MarkupWrapperClasses: bg_white font_ui flex c_primary
Styleguide Component.Navigation.Toggle
*/
/*
Toggle Chevron
Toggle elements of a collapse with user feed back of the icon rotating.
#targetName - the name of the target of the collapse
Markup:
Weight: -80
MarkupWrapperClasses: bg_white font_ui flex c_primary
Styleguide Component.Navigation.Toggle.Chevron
*/
/*
Collapse Toggle Advanced
Toggle elements of a collapse with user feed back of the icon morphing.
#targetName - the name of the target of the collapse
Markup:
Weight: -100
MarkupWrapperClasses: bg_white font_ui flex c_primary
Styleguide Component.Navigation.Toggle.Advanced
*/
/*
Collapse Toggle Advanced with Square
Toggle elements of a collapse with user feed back of the icon morphing.
#targetName - the name of the target of the collapse
Markup:
Weight: -90
MarkupWrapperClasses: bg_white font_ui flex c_primary
Styleguide Component.Navigation.Toggle.AdvancedSquare
*/
/*
Accordion
In content accordions are styled differently to User interface accordions. The text of the header should allow for header tags to be added so the style should respond to the surrounding typography sizes.
Markup:
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Accordion
*/
/*
Accordion Child
Description: Sometimes the content needs be collapsed at a secondary level to make it scannable.
Markup:
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Accordion.Child
*/
/*
Accordion Nested Example
In content accordions are styled differently to User interface accordions. The text of the header should allow for header tags to be added so the style should respond to the surrounding typography sizes.
Markup:
Lorem ipsum dolor sit amet, consectetuer adipiscing
elit. Aenean commodo ligula eget dolor. Aenean massa.
Cum sociis natoque penatibus et magnis dis parturient
montes, nascetur ridiculus mus. Donec quam felis,
ultricies nec, pellentesque eu, pretium quis, sem.
Note: Limitations to the documentation system might cause javascript effects to animate or trigger incorrectly.
Weight:0
Styleguide Component.Accordion.Nested
*/
/*
Read More Arrow
This stacked incon is used in multiple locations when a user should know their is more to learn or read on another section of the site.
Markup:
StyleGuide Sub.Component.Common.ReadMoreArrow
*/
/*
600w x 300h
Markup:
https://placeholder.pics/svg/600x300/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.600x300
*/
/*
600w x 400h
Markup:
https://placeholder.pics/svg/600x400/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.600x400
*/
/*
1200w x 300h
Markup:
https://placeholder.pics/svg/1200x300/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.1200x300
*/
/*
375w x 250h
Markup:
https://placeholder.pics/svg/375x250/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.375x250
*/
/*
320w x 300h
Markup:
https://placeholder.pics/svg/320x300/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.320x300
*/
/*
1024w x 256h
Markup:
https://placeholder.pics/svg/1024x256/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.1024x256
*/
/*
Aspect 21x9
Markup:
https://placeholder.pics/svg/588x252/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.21x9
*/
/*
Aspect 16x9
Markup:
https://placeholder.pics/svg/455x195/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.16x9
*/
/*
300w x 400h
Markup:
https://placeholder.pics/svg/300x400/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.300x400
*/
/*
square
Markup:
https://placeholder.pics/svg/250x250/0ccda3-1db0f0/343e42
Styleguide Sub.Placeholder.Image.Square
*/
/*
Max 20 Character
Markup:
Di dolores (20 Chars)
Styleguide Sub.Placeholder.Text.20ch
*/
/*
Max 30 Character
Markup:
Commodi dolores (30 Characters)
Styleguide Sub.Placeholder.Text.30ch
*/
/*
Max 40 Character
Markup:
Rerum libg dero pariatur (40 Characters)
Styleguide Sub.Placeholder.Text.40ch
*/
/*
Max 60 Character
Markup:
Sed ut perspiciatis unde omnis iste natus er (60 Characters)
Styleguide Sub.Placeholder.Text.60ch
*/
/*
Max 80 Character
Markup:
Eius nihil quia adipisci exercitationem eligendiea est nihil yas (80 Characters)
Styleguide Sub.Placeholder.Text.80ch
*/
/*
Max 100 Character
Markup:
Officia enim rerum repudiandae aut est paritur est ea. Ut voluptas magni et eligen. (100 Characters)
Styleguide Sub.Placeholder.Text.100ch
*/
/*
Max 150 Character
Markup:
Svel libero ut rerum repudiandae aut est paritur minus vero. Delectus ea est nostrum quae dolores. Delectus nostrum nihil et ad enim. (150 Characters)
Styleguide Sub.Placeholder.Text.150ch
*/
/*
Max 200 Character
Markup:
Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (200 Characters)
Styleguide Sub.Placeholder.Text.200ch
*/
/*
Max 250 Character
Markup:
Sed ut perspiciatis unde omnis iste natus er sdyer. Dignissimos sed deserunt est non. Aliquam nam aut quam. Voluptas ut vel voluptates aliquam mollitia enim consequatur. Quas quisquam natus dolor eos consequatur culpa. Fuga manam ten. (250 Characters)
Styleguide Sub.Placeholder.Text.250ch
*/
/*
Grid - Triple Card Holder
Markup:
columns_3:lg columns_2:md columns_1 gap_5:lg gap_4 p_3 p_4:md p_5:lg m-y_3 m-y_4:md m-y_5:lg grid wrapper-container bg_black-1 m-x_n4 reading-typography
NOTE:
Triple up cards with shaded background are used only in full screen pages
Styleguide Sub.ClassList.Grid.Card.Split-Triple
*/
/*
Triple Split with Sidebar
Markup:
columns_3:lg columns_2:md columns_1 gap-x_4:lg gap-x_3:md gap_4 grid ul_none text_left
NOTE:
Triple up splits
Styleguide Sub.ClassList.Grid.TripleLG
*/
/*
Grid - Card Holder - 50 split
Markup:
columns_2:md columns_1 gap_5:lg gap_6:xl gap_4 grid
NOTE:
split layouts great for half page cards
Styleguide Sub.ClassList.Grid.Split-50
*/
/*
GridList Triple on XL
Markup:
columns_2:lg columns_3:xl columns_1 gap-x_5:xl gap-x_4:lg gap-x_3 gap-y_4 grid p-x_4:xl p-x_3:lg p-x_0 ul_none
Styleguide Sub.ClassList.Grid.TripleXL
*/
/*
GridList Item Basic
Markup:
flex flex_row:md flex_column items_start:md items_center justify_start isolate relative c_accent-n1 p_3 p_4:md br_radius
NOTE:
Icon and Header use differnt classes because they are a simpler component.
Styleguide Sub.ClassList.Grid.Item
*/
/*
Subs
Subs are the smallest building blocks of the design system—primitive elements and utilities that serve as
sub-components or fragments used across larger patterns and modules. They include placeholder content, simple data
points, iconography, credit tags, action buttons, and other elemental units that are not meant to be used standalone
but are composed into larger, reusable structures.
These assets support a modular design approach, allowing patterns to reference and inject consistent visuals, text,
or interaction units without duplicating logic or styling. Sub elements often use Handlebars partials
({{> 'Sub.X' }}) to render dynamic or variable content within patterns.
Common use cases: - {{> 'Sub.Sub.Data.Duration'}} — Displays session duration -
{{> 'Sub.Credit' modifier_class='CME'}} — Outputs a credit tag with a modifier -
{{> 'Sub.ActionButtons.Favorite'}} — Interactive favorite/save button
NOTE: Subs are maintained as composable units to promote consistency, reduce repetition, and streamline pattern updates across the system.
Styleguide Sub
*/
/*
Placeholders
Placeholders are just used across the styleguide. The can be either text or image stand ins for the UI.
Weight: 9999
Styleguide Sub.Placeholder
*/
/*
Recipe
Patterns that are used through out the refactors on ACC.org
Weight: 1000
Styleguide Sub.Recipe
*/
/*
Articles
There are multiple sub components that are used through out the most common page type on ACC.org
Weight: 1000
Styleguide Sub.Recipe.Article
*/
/*
Data
There are data and formats that should be followed when building out components on ACC.org bellow are some of the most common data formatting that is used across the site.
Weight: 500
Styleguide Sub.Data
*/
/*
Class Lists
Arches can be robust when trying to descrbe a complicated peice of UI and here is a respository of the classes used on those UI items
Weight: 2000
Styleguide Sub.ClassList
*/
/*
Rich Text
Markup:
Lorem Ipsum
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.
Header Level 2
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.
Header Level 3
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Table of Contents
How to Prepare for the Boards
General Principles of Cardiovascular Medicine
Arrhythmias
Coronary Artery Disease
Heart Failure & Cardiomyopathy
Valvular Disease
Pericardial Disease
Congenital Heart Disease
Vascular Diseases
Systemic Hypertension and Hypotension
Pulmonary Circulation Disorders
Systemic Disorders Affecting the Circulatory
System
Miscellaneous
Cardiovascular Genetics
CPR, Post-Resuscitation Care
Cardiac Critical Care
Sleep Disordered Breathing
Sports Cardiology
Pregnancy and Cardiac Disease
Cardiovascular Operative Management
Pharmacology
General Principles of Cardiovascular
Medicine
HideCodeBlock: display_none
Styleguide Sub.Placeholder.Typography
*/
body {
font-size: 16px;
font-size: 1rem;
font-family: var(--font-family_copy);
}
h1, .h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
font-weight: var(--font_regular);
font-family: var(--font-family_display);
}
h6, .h6 {
font-weight: var(--font_bold);
}
p {
line-height: 1.35;
}
ul,
ol {
line-height: 1.6;
}
kbd,
code,
samp,
var {
font-family: var(--font-family_mono);
}
form {
border-color: rgba(34, 34, 34, 0.38);
}
label {
font-weight: var(--font_bold);
}
label,input,
select,
textarea,
legend,
fieldset,
button {
color: currentColor;
font-size: 16px;
font-size: 1rem;
font-family: var(--font-family_ui);
}
input,
select,
textarea,
legend,
fieldset,
button {
box-sizing: border-box;
}
button,
[type=button],
[type=submit],
[type=reset], [type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=url],
[type=week],
[type=time], select,
textarea {
min-height: 1.5em;
padding: 4px 8px;
padding: 0.25rem 0.5rem;
border-width: thin;
border-radius: 3px;
border-color: rgba(34, 34, 34, 0.25);
line-height: 1.6;
}
input:focus,
select:focus,
textarea:focus {
outline-color: hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.5);
box-shadow: inset 1px 1px 2px 2px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.12), inset 2px 2px 3px 0px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1), inset -2px -2px 3px 0px hsla(var(--primary-h), var(--primary-s), var(--primary-l), 0.1);
}
[type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=search],
[type=tel],
[type=text],
[type=url],
[type=week],
[type=time], select,
textarea {
width: 100%;
}
input,
select,
textarea,
legend,
fieldset,
button {
box-sizing: border-box;
}
[type=color] {
width: 24px;
width: 1.5rem;
height: 24px;
height: 1.5rem;
padding: 0;
border-color: rgba(34, 34, 34, 0.25);
}
[type=radio],
[type=checkbox] {
padding-left: 8px;
padding-left: 0.5rem;
}
button,
[type=button],
[type=submit],
[type=reset] {
width: auto;
border-radius: 3px;
}
fieldset {
margin: 8px 0;
margin: 0.5rem 0;
padding: 8px 16px;
padding: 0.5rem 1rem;
border-color: rgba(34, 34, 34, 0.1);
}
/*
Basic Inputs
Arches is strongly based on utility classes styling everything so it commonly just builds on either the base of the browser defaults or the defaults of the framework that is built on. This is a kitchen sink of html elements so you can see how this variation will effect html. There is No basic styling around the pure DOM with the utility class only. To get full brand styling use a framework based version of arches.
Styleguide HTML.Inputs
*/
/*
Text Inputs
Bellow is the comparison of using the basic Html input types with the utility classes only vs using the bootstrap pattern for the input.
Markup:
Utility Class
Bootstrap
Styleguide HTML.Inputs.Text
*/
/*
Inputs UC
Utility Class only build inputs
Markup:
Weight:100
Styleguide HTML.Inputs.All
*/
/*
Table
Basic Tables with this variation of Arches. Please note that the html can have a different look depending on the brand or the framework the variation is built on.
Tables can have captions now.
Person
Number
Third Column
Someone Lastname
900
Nullam quis risus eget urna mollis ornare vel eu leo.
Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla.
Another Person
1500
Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nullam id dolor id nibh ultricies vehicula ut id elit.
Last One
2800
Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.
Styleguide HTML.BasicTable
*/
table {
font-size: 16px;
font-size: 1rem;
font-family: var(--font-family_ui);
}
table caption {
padding: 8px;
padding: 0.5rem;
}
th,
td {
padding: 4px 8px;
padding: 0.25rem 0.5rem;
text-align: start;
}
thead {
padding: 4px 8px 0;
padding: 0.25rem 0.5rem 0;
font-weight: var(--font_bold);
}
tbody {
padding: 0 8px;
padding: 0 0.5rem;
}
tfoot,
caption {
padding: 0 8px 4px;
padding: 0 0.5rem 0.25rem;
font-size: 14.222px;
font-size: 0.8888888889rem;
}
/*
Design Base
Arches is design inspired by a pad of paper in the hand. Subtle Textures and Layer shadows keep the readability very high.
Weight: -1000
Styleguide DesignBase
*/
/*
Fonts
The ACC is focused on stable, conservative, clean fonts. Roboto Slab is the standard serif fonts across all products at the ACC.
Styleguide DesignBase.Fonts
*/
/*
Accent Roboto Slab
A beautiful Accent font that shows a complexity and texture to the fonts used in the design.
Roboto Slab
font-family: "Roboto Slab","Times New Roman","Lucida Bright",Georgia,"slab",serif
RS
Accent Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Weight: -10
Styleguide DesignBase.Fonts.Accent
*/
/*
Display: Roboto Flex
A Slick font that has a slight interest used for headers and UI.
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Weight: 1
Styleguide DesignBase.Fonts.UI
*/
/*
Icons: Not Using Enteprise Solution
There are some subtle effects that happen when a platform doesn't use the enteprise solution for fonts. The most prominent is the loss of the icon link decoration standard with in content.
MarkupWrapperClasses:
NOTE: Not Using Enteprise Solution of Font Awesome
Styleguide DesignBase.IconsFalse
*/
/*
ACC's Blue
$acc-blue - #004176; acc
Styleguide DesignBase.Colors.ACC
*/
/*
Theme Colors
Colors are based off of the ACC Scrub Colors.
map-get($theme-palette, primary) - #002e5a; primary
map-get($theme-palette, secondary) - #747474; secondary
map-get($theme-palette, shade) - #747474; shade
map-get($theme-palette, accent) - #ff6600; accent
map-get($theme-palette, info) - #a3988c; info
map-get($theme-palette, highlight) - #783ca9; highlight
Weight:-1000
Styleguide DesignBase.Colors
*/
/*
Action Colors
Actionable colors used to respond to user inputs and messaging.
map-get($theme-palette, alert) - #ac2217; alert
map-get($theme-palette, warning) - #df732d; warning
map-get($theme-palette, success) - #0fa528; success
map-get($theme-palette, navigation) - #2b58c0; navigation
Styleguide DesignBase.Colors.Actions
*/
/*
Color Coding
Color Coding is used in specific products and concepts to illustrate cohesion and collections. All of these color codes are used universally through out the college and have an associated meaning. All of these colors are just used for reference and have no associated decorator classes. You must include the the associated color-code_x.css have access to utlity classes that will color using the bellow colors.
Styleguide DesignBase.Colors.ColorCoding
*/
/*
COR Colors
(COR) Class of Recommendation is a color collect used in Guideline recommendations.
$cor-green - #6fc284; I
$cor-yellow - #ffd44f; IIA
$cor-yellow-orange - #faa74b; IIA
$cor-orange - #f15d4c;III and III-NoHarm
$cor-red - #ed1c00; III-harm
Weight: 10
Styleguide DesignBase.Colors.ColorCoding.COR
*/
/*
LOE Colors
(LOE) level of Evidence is a color collect used in Guideline recommendations.
$loe-dark-blue - rgb(62, 111, 183);LOE A
$loe-mid-blue - rgb(101, 156, 211);LOE B-R
$loe-light-blue - rgb(161, 193, 230);LOE B-NR
$loe-pale-blue - rgb(181, 213, 229); LOE C
Weight: 10
Styleguide DesignBase.Colors.ColorCoding.LOE
*/
/*
Credit Type Color Coding
Credit Types in the ACC have a specific color coding.
$credit-AAPA - #e8c536; AAPA: American Academy of Physician Assistants (AAPA) Category 1 CME Credit
$credit-ABP - #007a5b; ABP-MOC: American Board of Pediatrics
$credit-ABPMOCII - #0b6d4c; ABP-MOC 2: American Board of Pediatrics MOC 2
$credit-ABPMOCIV - #105a3b; ABP-MOC 4: American Board of Pediatrics MOC 4
$credit-ATCEU - #775744; ATCEU: Athletic Trainer Continuing Education Unit
$credit-CE - #a8a8a8; CE: Continuing CCA\Tech Education
$credit-CME - #00a15b; CME: AMA PRA Category 1TM Credit(s)
$credit-CNE - #198dae; CNE: Continuing Nurse Education
$credit-CNErx - #52549e; CNErx: Continuing Nursing Education Pharmaceutical
$credit-COP - #775891; COP: Certificate of Participation
$credit-CPE - #992e2e; CPE: Continuing Pharmacy Education
$credit-ECME - #d16528; ECME: European Board for Accreditation in Cardiology (EBAC) External CME Credit
$credit-IPCE - #6c36b3; IPCE: Interprofessional Continuing Education Credit
$credit-MOCII - #9a1267; MOC II: ABIM MOC Part II
$credit-MOCIV - #d3248d; MOC IV: ABIM MOC Part IV
Weight: 0
Styleguide DesignBase.Colors.ColorCoding.Credits
*/
/*
Clinical Pathway Colors
Each of the clinical pathways has a distinctive color. These colors are used to give a distinct theme to our clinical apps, marketing, pdf's and tools.
$pathway-acute-coronary-syndromes - #009974; Acute Coronary Syndromes
$pathway-arrhythmias-EP - #005b37; arrhythmias and Clinical EP
$pathway-congenital-heart-disease - #fdb918; Congenital Heart Disease
$pathway-ecg-stress-test - #d9691f; Standard ECG, Stress Test
$pathway-heart-failure - #410d49; Heart Failure and Cardiomyopathies
$pathway-invasive-cardiology - #c8b02f; Invasive Cardiology Angiography and Intervention
$pathway-noninvasive-cardiology - #947b33; Noninvasive Cardiology
$pathway-pandemic - #8e2582; Pandemic "Covid"
$pathway-pericardial - #0079ad; pericardial Disease
$pathway-prevention - #a01d51; Prevention
$pathway-pulmonary-hypertension - #d60e7e; Pulmonary Hypertension and Venous Thromboembolic Disease
$pathway-special - #00b6f1; Special
$pathway-stable-ischemic-heart-disease - #0f3e65; Stable ischemic Heart Disease
$pathway-valvular-heart-disease - #4f4190; Valvular Heart Disease
$pathway-vascular-medicine - #ae171c; Vascular Medicine
Weight: -1
Styleguide DesignBase.Colors.ColorCoding.Pathways
*/
/*
Registry CC
Credit Type Color codes in the ACC have a specific color coding.
$registry-cpmi - #f22418; Chest Pain MI Registry
$registry-afib - #ffb300; AFib Ablation Registry
$registry-cathpci - #0086d5; CathPCI Registry
$registry-icd - #80b800; ICD Registry
$registry-impact - #4e1f73; IMPACT Registry
$registry-pinnacle-primary - #0e4f1b; PINNACLE Registry (Primary)
$registry-pinnacle-accent - #b3c4c4; PINNACLE Registry (Accent)
$registry-focus - #d6560d; Patient Navigator Focus MI
$registry-pcibleeding - #c0268e; Reducing Risk PCI Bleeding
$registry-laao - #00667a; LAAO Registry
$registry-pvi - #00947f; PVI Registry
$registry-auxdata - #04adad; Auxiliar Data Collection
$registry-ststvt - #a20062; STS ACC TVT Registry
$registry-diabetes - #7893b8; Diabetes Collaborative
Weight: 2000
Styleguide DesignBase.Colors.ColorCoding.Registry
*/
/*
Journal
Journals of JACC have specific branding colors.
$journal-jc - #002e5a; Journal of the American College of Cardiology: (JC)
$journal-adv - #0000FF; JACC: Advances: (JC-ADV)
$journal-asia - #ec2939; JACC: Asia: (JC-ASIA)
$journal-tran - #1788c2; JACC: Basic to Translational Science: (JC-TRAN)
$journal-cvonc - #00ae81; JACC: CardioOncology: (JC-CVONC)
$journal-case - #f37321; JACC: Case Reports: (JC-CASE)
$journal-ep - #8a5e96; JACC: Clinical Electrophysiology: (JC-EP)
$journal-hf - #991326; JACC: Heart Failure: (JC-HF)
$journal-invt - #038e92; JACC: Cardiovascular Interventions: (JC-INVT)
$journal-imag - #c18a0e; JACC: Cardiovascular Imaging: (JC-IMAG)
Weight: 2000
Styleguide DesignBase.Colors.ColorCoding.Journals
*/
/*
Social Network Colors
Each of the social networks has a distinctive color. These colors are used to give a distinct theme to the social nav that is in different locations.
$twitter - #000; twitter
$facebook - #3b5998; facebook
$linkedin - #007bb6; linkedin
$apple-store - #ea4cc0; apple-store
$google-play - #689f38; google-play
$youtube - #bb0000; youtube
Weight: 100
Styleguide DesignBase.Colors.ColorCoding.Social Networks
*/
/*
Textures
All textures in the Arches design are a subtle variation of transparent. Allowing for colors to bleed through from behind. Different textures have intentions or are reserved for certain usagaes.
.texture_light - Light textures is reserved for the base of a page where it can gve a soft area for text or cards to live on top of.
.texture_medium - medium texture are used for area that are hidden away. Collapsable navs, areas, or sidebars ususaly use the medium texture.
.texture_dust - Dust is the most transparent texture allowing for the color of the background to show through the most. This is used for the painted tops of cards, or score bars.
.texture_dark - This texture predominatly used on the footer. Its rich black will alway requrie reversed text and buttons to be readable.
.texture_cross - A mostly transparent cross texture used for alternating rows of content when a little extra texture is needed.
.texture_disabled - This texture is used to paint disabled buttons and ui items giving it a greyed and X'ed out appearand.
Markup:
{{modifier_class}} with a light primary color background
Styleguide DesignBase.Textures
*/
/*
primary: Color Variations
The Modified versions of the primary color from this theme
Markup:
primary-n5
HEX:#00070e
RGB:0, 7, 14
HSL:209.3333333333deg ,100%, 2.6470588235%
primary-n4
HEX:#000e1b
RGB:0, 14, 27
HSL:209.3333333333deg ,100%, 5.2941176471%
primary-n3
HEX:#00172d
RGB:0, 23, 45
HSL:209.3333333333deg ,100%, 8.8235294118%
primary-n2
HEX:#00203f
RGB:0, 32, 63
HSL:209.3333333333deg ,100%, 12.3529411765%
primary-n1
HEX:#00274d
RGB:0, 39, 77
HSL:209.3333333333deg ,100%, 15%
primary-0
HEX:#002e5a
RGB:0, 46, 90
HSL:209.3333333333deg, 100%, 17.6470588235%
primary-1
HEX:#004384
RGB:0, 67, 132
HSL:209.3333333333deg ,95%, 25.8823529412%
primary-2
HEX:#0064c3
RGB:0, 100, 195
HSL:209.3333333333deg ,87.5%, 38.2352941176%
primary-3
HEX:#2d98ff
RGB:45, 152, 255
HSL:209.3333333333deg ,75%, 58.8235294118%
primary-4
HEX:#96ccff
RGB:150, 204, 255
HSL:209.3333333333deg ,62.5%, 79.4117647059%
primary-5
HEX:#d5eaff
RGB:213, 234, 255
HSL:209.3333333333deg ,55%, 91.7647058824%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.primary
*/
/*
secondary: Color Variations
The Modified versions of the secondary color from this theme
Markup:
secondary-n5
HEX:#111111
RGB:17, 17, 17
HSL:0deg ,8.5%, 6.8235294118%
secondary-n4
HEX:#232323
RGB:35, 35, 35
HSL:0deg ,7%, 13.6470588235%
secondary-n3
HEX:#3a3a3a
RGB:58, 58, 58
HSL:0deg ,5%, 22.7450980392%
secondary-n2
HEX:#515151
RGB:81, 81, 81
HSL:0deg ,3%, 31.8431372549%
secondary-n1
HEX:#636363
RGB:99, 99, 99
HSL:0deg ,1.5%, 38.6666666667%
secondary-0
HEX:#747474
RGB:116, 116, 116
HSL:0deg, 0%, 45.4901960784%
secondary-1
HEX:#828282
RGB:130, 130, 130
HSL:0deg ,0%, 50.9411764706%
secondary-2
HEX:#979797
RGB:151, 151, 151
HSL:0deg ,0%, 59.1176470588%
secondary-3
HEX:#bababa
RGB:186, 186, 186
HSL:0deg ,0%, 72.7450980392%
secondary-4
HEX:gainsboro
RGB:220, 220, 220
HSL:0deg ,0%, 86.3725490196%
secondary-5
HEX:#f1f1f1
RGB:241, 241, 241
HSL:0deg ,0%, 94.5490196078%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.secondary
*/
/*
success: Color Variations
The Modified versions of the success color from this theme
Markup:
success-n5
HEX:#021906
RGB:2, 25, 6
HSL:130deg ,84.75%, 5.2941176471%
success-n4
HEX:#05320c
RGB:5, 50, 12
HSL:130deg ,84.5%, 10.5882352941%
success-n3
HEX:#085314
RGB:8, 83, 20
HSL:130deg ,84.1666666667%, 17.6470588235%
success-n2
HEX:#0b741c
RGB:11, 116, 28
HSL:130deg ,83.8333333333%, 24.7058823529%
success-n1
HEX:#0d8c22
RGB:13, 140, 34
HSL:130deg ,83.5833333333%, 30%
success-0
HEX:#0fa528
RGB:15, 165, 40
HSL:130deg, 83.3333333333%, 35.2941176471%
success-1
HEX:#12c32f
RGB:18, 195, 47
HSL:130deg ,79.1666666667%, 41.7647058824%
success-2
HEX:#1cea3f
RGB:28, 234, 63
HSL:130deg ,72.9166666667%, 51.4705882353%
success-3
HEX:#68f17f
RGB:104, 241, 127
HSL:130deg ,62.5%, 67.6470588235%
success-4
HEX:#b3f8bf
RGB:179, 248, 191
HSL:130deg ,52.0833333333%, 83.8235294118%
success-5
HEX:#e1fce5
RGB:225, 252, 229
HSL:130deg ,45.8333333333%, 93.5294117647%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.success
*/
/*
shade: Color Variations
The Modified versions of the shade color from this theme
Markup:
shade-n5
HEX:#111111
RGB:17, 17, 17
HSL:0deg ,8.5%, 6.8235294118%
shade-n4
HEX:#232323
RGB:35, 35, 35
HSL:0deg ,7%, 13.6470588235%
shade-n3
HEX:#3a3a3a
RGB:58, 58, 58
HSL:0deg ,5%, 22.7450980392%
shade-n2
HEX:#515151
RGB:81, 81, 81
HSL:0deg ,3%, 31.8431372549%
shade-n1
HEX:#636363
RGB:99, 99, 99
HSL:0deg ,1.5%, 38.6666666667%
shade-0
HEX:#747474
RGB:116, 116, 116
HSL:0deg, 0%, 45.4901960784%
shade-1
HEX:#828282
RGB:130, 130, 130
HSL:0deg ,0%, 50.9411764706%
shade-2
HEX:#979797
RGB:151, 151, 151
HSL:0deg ,0%, 59.1176470588%
shade-3
HEX:#bababa
RGB:186, 186, 186
HSL:0deg ,0%, 72.7450980392%
shade-4
HEX:gainsboro
RGB:220, 220, 220
HSL:0deg ,0%, 86.3725490196%
shade-5
HEX:#f1f1f1
RGB:241, 241, 241
HSL:0deg ,0%, 94.5490196078%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.shade
*/
/*
warning: Color Variations
The Modified versions of the warning color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.warning
*/
/*
alert: Color Variations
The Modified versions of the alert color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.alert
*/
/*
navigation: Color Variations
The Modified versions of the navigation color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.navigation
*/
/*
accent: Color Variations
The Modified versions of the accent color from this theme
Markup:
accent-n5
HEX:#260f00
RGB:38, 15, 0
HSL:24deg ,100%, 7.5%
accent-n4
HEX:#4d1f00
RGB:77, 31, 0
HSL:24deg ,100%, 15%
accent-n3
HEX:#803300
RGB:128, 51, 0
HSL:24deg ,100%, 25%
accent-n2
HEX:#b34700
RGB:179, 71, 0
HSL:24deg ,100%, 35%
accent-n1
HEX:#d95700
RGB:217, 87, 0
HSL:24deg ,100%, 42.5%
accent-0
HEX:#ff6600
RGB:255, 102, 0
HSL:24deg, 100%, 50%
accent-1
HEX:#ff751a
RGB:255, 117, 26
HSL:24deg ,95%, 55%
accent-2
HEX:#ff8c40
RGB:255, 140, 64
HSL:24deg ,87.5%, 62.5%
accent-3
HEX:#ffb380
RGB:255, 179, 128
HSL:24deg ,75%, 75%
accent-4
HEX:#ffd9bf
RGB:255, 217, 191
HSL:24deg ,62.5%, 87.5%
accent-5
HEX:#fff0e6
RGB:255, 240, 230
HSL:24deg ,55%, 95%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.accent
*/
/*
info: Color Variations
The Modified versions of the info color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.info
*/
/*
highlight: Color Variations
The Modified versions of the highlight color from this theme
Markup:
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.highlight
*/
/*
acc: Color Variations
The Modified versions of the acc color from this theme
Markup:
acc-n5
HEX:#000a12
RGB:0, 10, 18
HSL:206.9491525424deg ,100%, 3.4705882353%
acc-n4
HEX:#001423
RGB:0, 20, 35
HSL:206.9491525424deg ,100%, 6.9411764706%
acc-n3
HEX:#00213b
RGB:0, 33, 59
HSL:206.9491525424deg ,100%, 11.568627451%
acc-n2
HEX:#002e53
RGB:0, 46, 83
HSL:206.9491525424deg ,100%, 16.1960784314%
acc-n1
HEX:#003764
RGB:0, 55, 100
HSL:206.9491525424deg ,100%, 19.6666666667%
acc-0
HEX:#004176
RGB:0, 65, 118
HSL:206.9491525424deg, 100%, 23.137254902%
acc-1
HEX:#00579d
RGB:0, 87, 157
HSL:206.9491525424deg ,95%, 30.8235294118%
acc-2
HEX:#0077d8
RGB:0, 119, 216
HSL:206.9491525424deg ,87.5%, 42.3529411765%
acc-3
HEX:#3ba7ff
RGB:59, 167, 255
HSL:206.9491525424deg ,75%, 61.568627451%
acc-4
HEX:#9dd3ff
RGB:157, 211, 255
HSL:206.9491525424deg ,62.5%, 80.7843137255%
acc-5
HEX:#d8edff
RGB:216, 237, 255
HSL:206.9491525424deg ,55%, 92.3137254902%
HideCodeBlock: display_none
Weight:0
Styleguide DesignBase.CrayonBox.acc
*/
/*
Crayon Box
This is all of the colors of the theme broken out with its modifications written in hex code.
Weight:0
HideCodeBlock: display_none
Styleguide DesignBase.CrayonBox
*/
/*Adobe XD Color Map*/
/* $xd-color_primary-0: #002e5a*/
/* $xd-color_primary-n5: #00070e*/
/* $xd-color_primary-n4: #000e1b*/
/* $xd-color_primary-n3: #00172d*/
/* $xd-color_primary-n2: #00203f*/
/* $xd-color_primary-n1: #00274d*/
/* $xd-color_primary-1: #004384*/
/* $xd-color_primary-2: #0064c3*/
/* $xd-color_primary-3: #2d98ff*/
/* $xd-color_primary-4: #96ccff*/
/* $xd-color_primary-5: #d5eaff*/
/* $xd-color_secondary-0: #747474*/
/* $xd-color_secondary-n5: #111111*/
/* $xd-color_secondary-n4: #232323*/
/* $xd-color_secondary-n3: #3a3a3a*/
/* $xd-color_secondary-n2: #515151*/
/* $xd-color_secondary-n1: #636363*/
/* $xd-color_secondary-1: #828282*/
/* $xd-color_secondary-2: #979797*/
/* $xd-color_secondary-3: #bababa*/
/* $xd-color_secondary-4: gainsboro*/
/* $xd-color_secondary-5: #f1f1f1*/
/* $xd-color_success-0: #0fa528*/
/* $xd-color_success-n5: #021906*/
/* $xd-color_success-n4: #05320c*/
/* $xd-color_success-n3: #085314*/
/* $xd-color_success-n2: #0b741c*/
/* $xd-color_success-n1: #0d8c22*/
/* $xd-color_success-1: #12c32f*/
/* $xd-color_success-2: #1cea3f*/
/* $xd-color_success-3: #68f17f*/
/* $xd-color_success-4: #b3f8bf*/
/* $xd-color_success-5: #e1fce5*/
/* $xd-color_shade-0: #747474*/
/* $xd-color_shade-n5: #111111*/
/* $xd-color_shade-n4: #232323*/
/* $xd-color_shade-n3: #3a3a3a*/
/* $xd-color_shade-n2: #515151*/
/* $xd-color_shade-n1: #636363*/
/* $xd-color_shade-1: #828282*/
/* $xd-color_shade-2: #979797*/
/* $xd-color_shade-3: #bababa*/
/* $xd-color_shade-4: gainsboro*/
/* $xd-color_shade-5: #f1f1f1*/
/* $xd-color_warning-0: #df732d*/
/* $xd-color_warning-n5: #231105*/
/* $xd-color_warning-n4: #46220b*/
/* $xd-color_warning-n3: #743812*/
/* $xd-color_warning-n2: #a34f19*/
/* $xd-color_warning-n1: #c6601e*/
/* $xd-color_warning-1: #e28142*/
/* $xd-color_warning-2: #e79662*/
/* $xd-color_warning-3: #efb996*/
/* $xd-color_warning-4: #f7dccb*/
/* $xd-color_warning-5: #fcf1ea*/
/* $xd-color_alert-0: #ac2217*/
/* $xd-color_alert-n5: #1a0503*/
/* $xd-color_alert-n4: #340a07*/
/* $xd-color_alert-n3: #56110c*/
/* $xd-color_alert-n2: #781810*/
/* $xd-color_alert-n1: #921d14*/
/* $xd-color_alert-1: #c8271b*/
/* $xd-color_alert-2: #e33c2f*/
/* $xd-color_alert-3: #ec7d74*/
/* $xd-color_alert-4: #f6beba*/
/* $xd-color_alert-5: #fbe5e3*/
/* $xd-color_navigation-0: #2b58c0*/
/* $xd-color_navigation-n5: #060d1d*/
/* $xd-color_navigation-n4: #0d1a3a*/
/* $xd-color_navigation-n3: #162c60*/
/* $xd-color_navigation-n2: #1e3e86*/
/* $xd-color_navigation-n1: #254ba3*/
/* $xd-color_navigation-1: #3564d2*/
/* $xd-color_navigation-2: #567ed9*/
/* $xd-color_navigation-3: #8fa9e6*/
/* $xd-color_navigation-4: #c7d4f2*/
/* $xd-color_navigation-5: #e9eefa*/
/* $xd-color_accent-0: #ff6600*/
/* $xd-color_accent-n5: #260f00*/
/* $xd-color_accent-n4: #4d1f00*/
/* $xd-color_accent-n3: #803300*/
/* $xd-color_accent-n2: #b34700*/
/* $xd-color_accent-n1: #d95700*/
/* $xd-color_accent-1: #ff751a*/
/* $xd-color_accent-2: #ff8c40*/
/* $xd-color_accent-3: #ffb380*/
/* $xd-color_accent-4: #ffd9bf*/
/* $xd-color_accent-5: #fff0e6*/
/* $xd-color_info-0: #a3988c*/
/* $xd-color_info-n5: #191714*/
/* $xd-color_info-n4: #332e28*/
/* $xd-color_info-n3: #544c43*/
/* $xd-color_info-n2: #766b5e*/
/* $xd-color_info-n1: #8f8173*/
/* $xd-color_info-1: #aca298*/
/* $xd-color_info-2: #bab2a9*/
/* $xd-color_info-3: #d1ccc6*/
/* $xd-color_info-4: #e8e5e2*/
/* $xd-color_info-5: #f6f5f4*/
/* $xd-color_highlight-0: #783ca9*/
/* $xd-color_highlight-n5: #120919*/
/* $xd-color_highlight-n4: #241233*/
/* $xd-color_highlight-n3: #3c1e55*/
/* $xd-color_highlight-n2: #542a76*/
/* $xd-color_highlight-n1: #663390*/
/* $xd-color_highlight-1: #8744bd*/
/* $xd-color_highlight-2: #9b63c8*/
/* $xd-color_highlight-3: #bc97da*/
/* $xd-color_highlight-4: #decbed*/
/* $xd-color_highlight-5: #f2eaf8*/
/* $xd-color_acc-0: #004176*/
/* $xd-color_acc-n5: #000a12*/
/* $xd-color_acc-n4: #001423*/
/* $xd-color_acc-n3: #00213b*/
/* $xd-color_acc-n2: #002e53*/
/* $xd-color_acc-n1: #003764*/
/* $xd-color_acc-1: #00579d*/
/* $xd-color_acc-2: #0077d8*/
/* $xd-color_acc-3: #3ba7ff*/
/* $xd-color_acc-4: #9dd3ff*/
/* $xd-color_acc-5: #d8edff*/
.font .font--example {
background-image: url(http://basehold.it/i/24);
}
.font .font--name {
color: #000;
}
.font .font--dropcase_2x {
color: #002e5a;
}
/*
Basic HTML
The Arches Design System, at its core, is a Utility Class Styling Design. It is built not to prescribe the design of the HTML and components but to paint with classes to create complicated UI without having to create more styles. Arches rely on the browser or branding defaults for basic HTML styling. Below is a kitchen sink of HTML elements so you can see how this variation look without further alteration from adding classes. There is No basic styling around the pure DOM with the utility class only, and there is improved styling as you add Bootstrap or Foundation.
Weight: -100
Styleguide HTML
*/
/*
Reading Typography
Reading typography is a container class to opt into an override of the basic typography from arches. Basic Typography is un-styled and rely on the most basic styles from the browser stylesheets so there is less overriding when making UI but it leaves reading typography lacking. Most ways typography content is added to a site is devoid of hooks to add styles to an element so work around that restriction and to unified styling across reading experiences the "reading-typography" class is used on the parent container. Please note that the reading typography can still look a bit different look depending on the brand or the framework.
modifier class
customization
usage
.inherit_color
removes all color rules from colored typography and sets it to inherit.
inverting a block of typography where all text and headlines should be white.
.font-size_up
shifts all typography up one font size step
intro blocks of text where the text. Or in articles where you can shift all text up a size.
`.font-size_down`
shifts all typography down one font size step.
citation blocks or boiler plate content where the text should be smaller and less impactful.
.links_dark
turns all links to the dark color standard.
this is used in junction with the .inherit_color class.
.links_light
turns all links to the light color standard.
this is used in junction with the .inherit_color class when text is on a dark background.
* there are further advanced features if you want to apply CSS Property Overrides.
Markup:
This is the primary heading and there should only be one of these per page
sub heading
A small paragraph to emphasis and show important bits.
This is a list item
So is this - there could be more
Make sure to style list items to:
Not forgetting child list items
Not forgetting child list items
Not forgetting child list items
Not forgetting child list items
A couple more
top level list items
Don't forget Ordered lists:
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Aliquam tincidunt mauris eu risus.
A sub heading which is not as important as the first, but is quite imporant overall
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Table Heading
Table Heading
table data
table data
table data
table data
table data
table data
table data
table data
A sub heading which is not as important as the second, but should be used with consideration
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
“Ooh - a blockquote! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.”
A sub heading which is not as important as the second, but should be used with consideration
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
A sub heading which is not as important as the second, but should be used with consideration
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Definition list
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
Lorem ipsum dolor sit amet
Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
commodo consequat.
This heading plays a relatively small bit part role, if you use it at all
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.
Table of Contents
How to Prepare for the Boards
General Principles of Cardiovascular Medicine
Arrhythmias
Coronary Artery Disease
Heart Failure & Cardiomyopathy
Valvular Disease
Pericardial Disease
Congenital Heart Disease
Vascular Diseases
Systemic Hypertension and Hypotension
Pulmonary Circulation Disorders
Systemic Disorders Affecting the Circulatory
System
Miscellaneous
Cardiovascular Genetics
CPR, Post-Resuscitation Care
Cardiac Critical Care
Sleep Disordered Breathing
Sports Cardiology
Pregnancy and Cardiac Disease
Cardiovascular Operative Management
Pharmacology
General Principles of Cardiovascular
Medicine
Weight: -9
HideCodeBlock: display_none
Styleguide HTML.Typography
*/
/*
Reading Typography Modified
This text is used as a lorem content in many of our containers.
.color_inherit.bg_acc.c_white.p_4.links_light - This removes all color defining styles to make it easer to reverse colors. This sets all typography and borders to inherit their colors.
Markup:
{{> Sub.Placeholder.Typography modifier_class=" color_inherit bg_acc c_white p_4 links_light"}}
Weight: -9
HideCodeBlock: display_none
MarkupWrapperClasses: br_solid br_radius br_black-1 br_1 m_3 max-w_50
Styleguide HTML.Typography.Sample
*/
/*
Links States
This shows the look and feel of all the states of a text link, color, underline and decoration.
Markup:
Weight: 100
Styleguide Recipes ACCBranded Nav.Login
*/
/*
Responsive Top Nav with Single Layer Nav
The Header Nav with no dropdown navs but with elements that show up only in the mobile viewport
Markup:
Weight: 1
Styleguide Recipes ACCBranded Nav.Simple
*/
/*
Nav Dropdown Simple
The Header Nav of ACC.org
Markup:
Weight: 1
Styleguide Recipes ACCBranded Nav.Dropdowns.Simple
*/
/*
Nav Dropdown with Sub Links
The Header Nav of ACC.org
Markup:
Weight: 2
Styleguide Recipes ACCBranded Nav.Dropdowns.Sublinks
*/
/*
Nav Dropdown with Alternate Content in Links
It is easy to add images in replace of text links in the navs.
Markup:
Weight: 3
Styleguide Recipes ACCBranded Nav.Dropdowns.Alt Content
*/
/*
Branded Nav
The Header Nav of ACC.org
Markup:
MarkupWrapperClasses: max-w_40 relative h_20 w_100
Weight:10
Styleguide Sub.Data.Sponsor.Logo
*/
/*
Web Address
Markup:
http://wwww.LogoIpsum.com
Weight:25
Styleguide Sub.Data.Sponsor.WebAddress
*/
/*
Website Link
Markup:
Website
Weight:26
Styleguide Sub.Data.Sponsor.WebLink
*/
/* Nav Recipes.00x */
/*
Call to Action Buttons
Description: The Call to Action Button component is used to create a prominent button that encourages users to take a specific action.
Sign Up - Used to encourage users to register or create an account. It prompts them to take action and join a platform, service, or community.
Purchase - Used to prompt users to make a purchase. It creates a sense of urgency and directs users to complete a transaction for a product or service.
Learn More - Used explore further information about a product, service, or topic. It encourages them to click and discover additional details or resources.
Subscribe - Used to encourage users to subscribe to a newsletter, mailing list, or updates from a website or company. It aims to build a relationship with users and keep them engaged.
Get Started - Used to initiate user onboarding or guide users through the first steps of using a product or service. It prompts users to begin their journey and experience the offering.
Markup:
NOTE: The Call to Action Button component is ideal for creating prominent buttons that attract user attention and encourage them to take a specific action, such as signing up, making a purchase, or exploring more content.
Weight:1000
Styleguide HTML.Inputs.Button.CTA
*/
/*
Buttons
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button
*/
/*
Buttons Small
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button.SM
*/
/*
Buttons Large
Description: Basic Buttons and modifiers.
.btn-primary - primary button
.btn-secondary - secondary button
.btn-shade - shade button
.btn-accent - accent button
.btn-success - success button
.btn-warning - warning button
.btn-alert - alert button
.btn-hollow - hollow button
.disabled - disabled button
Markup:
MarkupWrapperClasses: grid columns_4:lg columns_3:md columns_2 gap_4
Weight:0
Styleguide HTML.Inputs.Button.LG
*/
/* Recipes.40 */
.address {
font-style: unset;
}
@media only screen and (min-width: 640px) {
.reverse-indent {
display: inline-block;
width: 100%;
margin-left: 1em;
padding-right: 1em;
text-indent: -1em;
}
.reverse-indent:after {
display: table;
clear: both;
content: "";
}
}
/*
Generic Footer
This defines the web footer.
Markup:
SubComponents:
Sub.Component.Navigation.Footer.Address - Addresses
Sub.Component.Navigation.Footer.Social - Social Links
Sub.Component.Navigation.Footer.ACCProductLinks - Sister Sites
Sub.Component.Navigation.Footer.Subfooter - Sub Footer
Sub.Component.Navigation.Footer.Cite - Citation for the Site
Weight: 40
Styleguide Component.Navigation.Footer
*/
/*
Sub Footer
Description: ACC has some basic legal information that should be on every property.
Markup:
Weight: 0
Styleguide Sub.Component.Navigation.Footer.Subfooter
*/
/*
Cite and Copyright
Contains copy right
Markup:
