Source: dist/css/virtual_boot.css, line 15417
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 14284
10.1.1 Aspect Ratio
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
.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] "> </div>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 14503
10.1.2 Stars
experimental
Star ratings should be build throughout arches in a more dynamic way but this is an easy level of adding stars.
Example
Default styling
caution:
This item is not finalized and might be subject to change<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
Source: dist/css/virtual_boot.css, line 14266
10.1.3 Deprecated: Lorem Text Loader
deprecated
It is often we need to have space held for a return of details or text.
Example
Default styling
<div class="max-w_40">
<h1 class="lorem-loader font_3 m-y_3"> </h1>
<p class="m-y_2 font_0 lorem-loader"> </p>
<p class="m-y_2 font_0 lorem-loader"> </p>
<p class="m-y_2 font_0 lorem-loader"> </p>
</div>Code Sample
Source: dist/css/virtual_boot.css, line 14333
10.1.4 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
.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>Code Sample
Source: dist/css/virtual_boot.css, line 14433
10.2 Social Links
The social links From the Footer.
Example
Default styling
<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-square-x-twitter"></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
Source: dist/css/virtual_boot.css, line 14457
10.2.1 Social Links Monochrome
The social links can be restyled to be smaller.
Example
Default styling
<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-square-x-twitter"></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
Source: dist/css/virtual_boot.css, line 14481
10.2.2 Social Links Smaller
The social links can be restyled to be smaller.
Example
Default styling
<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-square-x-twitter"></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>