Source: dist/css/virtual_boot.css, line 19140

10.1 Interactive Extras

Interactions can be enhanced with toggle icons or loading graphics to show the system is responding to user input.

Source: dist/css/virtual_boot.css, line 14839

10.1.1 Expanded Click Area

allows for a relative container to be clickable by the link.

Example

This is a header

This is a card.

It has an easy to override visual style, and is appropriately subdued.

I am so clickable

<div class="card shadow_2 cell small-6 large-4 max-w_40"  data-style="" >
  <div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
    This is a header
  </div>
  <img src="https://picsum.photos/400/300">
  <div class="card-section card-body">
    <h4>This is a card.</h4>
	 <p>It has an easy to override visual style, and is appropriately subdued.</p>
	 <a href="#" class="expanded-click-area button btn btn-primary">I am so clickable</a>
  </div>
</div>

<div class="card shadow_2 cell small-6 large-4 max-w_40"  data-style="" >
  <div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
    This is a header
  </div>
  <img src="https://picsum.photos/400/300">
  <div class="card-section card-body">
    <h4>This is a card.</h4>
	 <p>It has an easy to override visual style, and is appropriately subdued.</p>
	 <a href="#" class="expanded-click-area button btn btn-primary">I am so clickable</a>
  </div>
</div>

Code Sample

Copy Code

Source: dist/css/virtual_boot.css, line 14631

10.1.2 Link Decorator

Links with the .link will auto decorate with an icon of the corresponding file type

File	Effect
.pdf	Portable Document Format
.doc	Word Document
.txt	Text Document
.ppt	Power Point
mailto:	Email
tel:	Telephone
fax:	Fax
target=`_blank`	External Link icons will appear after any link

Example

A link that is a Pdf Document
A link that is a Word Document
An External link that is a Power Point Document
1-555-555-5555
test@abc.org
A link that is a Zip Document

<div class="p_4">
 <a class="link" href="abc.pdf">A link that is a Pdf Document</a><br/>
 <a class="link" href="abc.doc">A link that is a Word Document</a><br/>
 <a class="link" href="https://www.abc.ppt">An External link that is a Power Point Document</a><br/>
 <a class="link" href="tel:1-555-555-5555">1-555-555-5555</a><br/>
 <a class="link" href="mailto:test@abc.org">test@abc.org</a><br/>
 <a class="link" href="xyz.zip">A link that is a Zip Document</a><br/></div>
<div class="bg_shade-n3 p_4">
 <a class="link-light" href="abc.pdf">A link that is a Pdf Document</a><br/>
 <a class="link-light" href="abc.doc">A link that is a Word Document</a><br/>
 <a class="link-light" href="https://www.abc.ppt">An External link that is a Power Point Document</a><br/>
 <a class="link-light" href="tel:1-555-555-5555">1-555-555-5555</a><br/>
 <a class="link-light" href="mailto:test@abc.org">test@abc.org</a><br/>
 <a class="link-light" href="xyz.zip">A link that is a Zip Document</a><br/>
</div>

<div class="p_4">
 <a class="link" href="abc.pdf">A link that is a Pdf Document</a><br/>
 <a class="link" href="abc.doc">A link that is a Word Document</a><br/>
 <a class="link" href="https://www.abc.ppt">An External link that is a Power Point Document</a><br/>
 <a class="link" href="tel:1-555-555-5555">1-555-555-5555</a><br/>
 <a class="link" href="mailto:test@abc.org">test@abc.org</a><br/>
 <a class="link" href="xyz.zip">A link that is a Zip Document</a><br/></div>
<div class="bg_shade-n3 p_4">
 <a class="link-light" href="abc.pdf">A link that is a Pdf Document</a><br/>
 <a class="link-light" href="abc.doc">A link that is a Word Document</a><br/>
 <a class="link-light" href="https://www.abc.ppt">An External link that is a Power Point Document</a><br/>
 <a class="link-light" href="tel:1-555-555-5555">1-555-555-5555</a><br/>
 <a class="link-light" href="mailto:test@abc.org">test@abc.org</a><br/>
 <a class="link-light" href="xyz.zip">A link that is a Zip Document</a><br/>
</div>

Code Sample

Copy Code

Source: dist/css/virtual_boot.css, line 14576

To create an image placeholder use the lorem-loader plus an aspect of the intended image on th parent container while waiting for the image.The placeholder will be a 100% of the container so size the container properly.

Example s

Default styling

.aspect_8x10

lock image to a 8 to 10 ratio

.aspect_1x1

lock image to a 1 to 1 ratio

.aspect_2x1

lock image to a 2 to 1 ratio

.aspect_3x2

lock image to a 3 to 2 ratio

.aspect_4x3

lock image to a 4 to 3 ratio

.aspect_16x9

lock image to a 16 to 9 ratio

.aspect_21x9

lock image to a 21 to 9 ratio

.aspect_4x1

lock image to a 4 to 1 ratio

<div class="grid-w_2 max-w_20"  data-style="[modifier]" >
   <div class="m-y_2 lorem-loader [modifier] ">&nbsp;</div>
</div>

<div class="grid-w_2 max-w_20"  data-style="[modifier]" >
   <div class="m-y_2 lorem-loader [modifier] ">&nbsp;</div>
</div>

Code Sample

Copy Code

Source: dist/css/virtual_boot.css, line 14981

10.1.4 Scrollbar Mini

Give a mini scroll bar to a content area.

Example

This is a header

This is a card.

It has an easy to override visual style, and is appropriately subdued.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!

I am so clickable

<div class="card shadow_2 cell small-6 large-4 max-w_30" >
    <div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
    This is a header
    </div>
    <div class="card-section card-body p_4 scrollbar-mini overflow_auto" style="max-height:300px;">
        <h4>This is a card.</h4>
        <p class="font_1">It has an easy to override visual style, and is appropriately subdued.</p>
        <img src="https://picsum.photos/400/300">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
    </div>
    <div class="card-divider card-footer br_0 br_solid br-t_1 br_primary"> <a href="#" class="button btn btn-primary">I am so clickable</a></div>
</div>

<div class="card shadow_2 cell small-6 large-4 max-w_30" >
    <div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
    This is a header
    </div>
    <div class="card-section card-body p_4 scrollbar-mini overflow_auto" style="max-height:300px;">
        <h4>This is a card.</h4>
        <p class="font_1">It has an easy to override visual style, and is appropriately subdued.</p>
        <img src="https://picsum.photos/400/300">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
    </div>
    <div class="card-divider card-footer br_0 br_solid br-t_1 br_primary"> <a href="#" class="button btn btn-primary">I am so clickable</a></div>
</div>

Code Sample

Copy Code

Source: dist/css/virtual_boot.css, line 15104

10.1.5 Stars

experimental

Star ratings should be build throughout arches in a more dynamic way but this is an easy level of adding stars.

Experimental: This item is not finalized and might be subject to change

Example

<ul class="ul_none flex flex_inline star-rating">
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
</ul>

<ul class="ul_none flex flex_inline star-rating">
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
</ul>

Code Sample

Copy Code

Source: dist/css/virtual_boot.css, line 14556

10.1.6 Lorem Text Loader

deprecated

It is often we need to have space held for a return of details or text.

Deprecated: This set of components was never fully utilized and will be removed for sake of size. 06/01/21

Example

<div class="max-w_40">
   <h1 class="lorem-loader font_3 m-y_3">&nbsp;</h1>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
</div>

<div class="max-w_40">
   <h1 class="lorem-loader font_3 m-y_3">&nbsp;</h1>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
   <p class="m-y_2 font_0 lorem-loader">&nbsp;</p>
</div>

Code Sample

Copy Code

Source: dist/css/virtual_boot.css, line 14881

10.1.7 Is Active Toggle

Many momment there are needs for toggles of icon when the parent is in the state of active. Used in tree navs, dropdowns, and collapsing areas.

Example s

Default styling

FA Solid [modifier] active
FA Regular [modifier] active
FA Light [modifier] active

.icon-toggle_plus-minus

Toggle between plus and minus square

FA Solid icon-toggle_plus-minus active
FA Regular icon-toggle_plus-minus active
FA Light icon-toggle_plus-minus active

.icon-toggle_chevron-up-down

Toggle a chevron pointing up and then down.

FA Solid icon-toggle_chevron-up-down active
FA Regular icon-toggle_chevron-up-down active
FA Light icon-toggle_chevron-up-down active

.icon-toggle_chevron-double-up-down

Toggle the double chevron to point up when active

FA Solid icon-toggle_chevron-double-up-down active
FA Regular icon-toggle_chevron-double-up-down active
FA Light icon-toggle_chevron-double-up-down active

.icon-toggle_chevron-double-left-right

Toggle chevron left and right

FA Solid icon-toggle_chevron-double-left-right active
FA Regular icon-toggle_chevron-double-left-right active
FA Light icon-toggle_chevron-double-left-right active

.icon-toggle_arrow-circle

Toggle the arrow to have a circle when active.

FA Solid icon-toggle_arrow-circle active
FA Regular icon-toggle_arrow-circle active
FA Light icon-toggle_arrow-circle active

.icon-toggle_bars-times

Toggle between bars and times

FA Solid icon-toggle_bars-times active
FA Regular icon-toggle_bars-times active
FA Light icon-toggle_bars-times active

.icon-toggle_check-sqaure

Check Marks toggle on and off

FA Solid icon-toggle_check-sqaure active
FA Regular icon-toggle_check-sqaure active
FA Light icon-toggle_check-sqaure active

.icon-toggle_check-circle

Check Marks toggle on and off

FA Solid icon-toggle_check-circle active
FA Regular icon-toggle_check-circle active
FA Light icon-toggle_check-circle active

.icon-toggle_check

Check Marks toggle on and off

FA Solid icon-toggle_check active
FA Regular icon-toggle_check active
FA Light icon-toggle_check active

<ul data-style="[modifier]" class="ul_none m_0 p_0">
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 fas fa-fw [modifier]"></i>
			<span class="flex_auto ">FA Solid [modifier]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 far  fa-fw [modifier]"></i>
			<span class="flex_auto ">FA Regular [modifier]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 fal fa-fw [modifier]"></i>
			<span class="flex_auto">FA Light [modifier]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
</ul>

<ul data-style="[modifier]" class="ul_none m_0 p_0">
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 fas fa-fw [modifier]"></i>
			<span class="flex_auto ">FA Solid [modifier]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 far  fa-fw [modifier]"></i>
			<span class="flex_auto ">FA Regular [modifier]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 fal fa-fw [modifier]"></i>
			<span class="flex_auto">FA Light [modifier]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
</ul>

Code Sample

Copy Code

Source: dist/css/virtual_boot.css, line 15034

10.2 Social Links

The social links From the Footer.

Example

<section class="social p_4 m-y_2 bg_shade-n3 font_2">
    <ul class="flex social-bar ul_none c_white h:c_white m_0">
        <li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-twitter-square"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>

<section class="social p_4 m-y_2 bg_shade-n3 font_2">
    <ul class="flex social-bar ul_none c_white h:c_white m_0">
        <li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-twitter-square"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button block m-b_0 p_3 c_white text_center opacity_7 h:opacity"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>

Code Sample

Copy Code

Source: dist/css/virtual_boot.css, line 15058

10.2.1 Social Links Monochrome

The social links can be restyled to be smaller.

Example

<section class="social p_4 m-y_2 font_n1 bg_white">
    <ul class="flex social-bar ul_none m_0">
        <li class="flex_shrink m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-twitter-square"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>

<section class="social p_4 m-y_2 font_n1 bg_white">
    <ul class="flex social-bar ul_none m_0">
        <li class="flex_shrink m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-twitter-square"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_shrink m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store c_shade-n2 bg_shade-4 block h:bg_accent h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>

Code Sample

Copy Code

Source: dist/css/virtual_boot.css, line 15082

10.2.2 Social Links Smaller

The social links can be restyled to be smaller.

Example

<section class="social p_4 m-y_2 font_0 max-w_20  bg_white">
    <ul class="flex social-bar ul_none c_white m_0">
        <li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-twitter-square"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>

<section class="social p_4 m-y_2 font_0 max-w_20  bg_white">
    <ul class="flex social-bar ul_none c_white m_0">
        <li class="flex_auto m-r_2"><a href="https://twitter.com/accintouch" target="_blank" class="twitter social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-twitter-square"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.facebook.com/AmericanCollegeofCardiology" target="_blank" class="facebook social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-facebook-square"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://www.linkedin.com/company/american-college-of-cardiology/" target="_blank" class="linkedin social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-linkedin"></i></a></li>
        <li class="flex_auto m-r_2"><a href="http://www.youtube.com/user/ACCinTouch" target="_blank" class="youtube social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-youtube"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://play.google.com/store/apps/dev?id=5189912010956845696&hl=en_US" target="_blank" class="google-play social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-google-play"></i></a></li>
        <li class="flex_auto m-r_2"><a href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps" target="_blank" class="apple-store social-bar--button br_radius block m-b_0 p_2 c_white-8 h:c_white text_center opacity_8 h:opacity"><i class="fab fa-apple"></i></a></li>
    </ul>
</section>

Code Sample

Copy Code

This Documentation is Moved!

Recipes

10.1 Interactive Extras

10.1.1 Expanded Click Area

Example

This is a card.

10.1.2 Link Decorator

Example

10.1.3 Aspect Ratio

Example s

Default styling

.aspect_8x10

.aspect_1x1

.aspect_2x1

.aspect_3x2

.aspect_4x3

.aspect_16x9

.aspect_21x9

.aspect_4x1

10.1.4 Scrollbar Mini

Example

This is a card.

10.1.5 Stars

Example

10.1.6 Lorem Text Loader

Example

10.1.7 Is Active Toggle

Example s

Default styling

.icon-toggle_plus-minus

.icon-toggle_chevron-up-down

.icon-toggle_chevron-double-up-down

.icon-toggle_chevron-double-left-right

.icon-toggle_arrow-circle

.icon-toggle_bars-times

.icon-toggle_check-sqaure

.icon-toggle_check-circle

.icon-toggle_check

10.2 Social Links

Example

10.2.1 Social Links Monochrome

Example

10.2.2 Social Links Smaller

Example