Arches: CVquality

Arches:CVquality

Multi Product Brand Style System by the American College of Cardiology

Recipes

Source: dist/css/cvquality_boot.css, line 7547

5.1 Cards

Basic Cards

Example

Default styling

Basic Card

cupidatat eu dolor dolor aliquip aliqua velit esse magna culpa qui fugiat ad culpa consectetur sint tempor elit dolor eu anim nisi quis consectetur laborum laboris proident consectetur mollit esse

Action
<div class="card">
 <h3 class="card-header c_black">Basic Card</h3>
  <div class="card-body">
    <p>cupidatat eu dolor dolor aliquip aliqua velit esse magna culpa qui fugiat ad culpa consectetur sint tempor elit dolor eu anim nisi quis consectetur laborum laboris proident consectetur mollit esse</p>
  </div>
   <div class="card-footer"> <a href="#" class="btn btn-primary btn-block">Action</a></div>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 7654

5.1.1 Address Card

Decorated address card for accreditation

<div class="bg_shade-5 p_3 p_4:md">
	<address class="m-b_3 m-x_2 vcard">
		<h4 class="c_secondary font_1 font_bold font_ui m-b_2 m-t_3">Questions About Accreditation?</h4>
		<div class="contact font_n1">
			<ul class="ul_none">
				<li><a href="mailto:" class="c_shade-n3 email link">non@.org</a></li>
				<li><a href="tel:" class="c_shade-n3 link tel">55-555-55555</a></li>
				<li><a href="fax:" class="c_shade-n3 fax link">55-444-55555</a></li>
			</ul>
		</div>
		<h4 class="c_secondary font_1 font_bold font_ui m-b_2 m-t_3">Office Hours:</h4>
		<div class="font_n1 openning-hours">
			<ul class="ul_none">
				<li><span class="time">8:00am - 4pm EST</span><br /></li>
				<li><span class="days">Monday - Firday</span></li>
				<li>
					<a href="blank.pdf" class="block c_shade-n3 link"
						>Holiday Schedule &nbsp;<i class="fa-calendar far"></i
					></a>
				</li>
			</ul>
		</div>
		<h4 class="c_secondary font_1 font_bold font_ui m-b_2 m-t_3">Mailing &amp; Shipping</h4>
		<span class=".org"></span>
		<ul class="ul_none adr">
			<li class="street-address">2400 N St. NW</li>
			<li>
				<span class="locality">Washington</span>,
				<span class="country-name"><abbr title="District of Colombia">DC</abbr></span>
				<span class="postal-code display_none">20006</span>
			</li>
		</ul>
		<nav class="nav-social-button mono-grey">
			<h4 class="c_secondary font_1 font_bold font_ui m-b_2 m-t_3">Follow Us</h4>
			<ul class="flex m_0 social-bar ul_none">
				<li class="flex_shrink m-r_1">
					<a
						href="https://twitter.com/accintouch"
						target="_blank"
						class="bg_shade-1 block br-bl_radius br-tl_radius c_shade-5 h:bg_secondary h:c_white m-b_0 p-x_3 p_2 social-bar--button text_center transition_0 twitter"
						><i class="fab fa-square-x-twitter"></i
					></a>
				</li>
				<li class="flex_shrink m-r_1">
					<a
						href="https://www.facebook.com/AmericanCollegeofCardiology"
						target="_blank"
						class="facebook c_shade-5 bg_shade-1 block h:bg_secondary 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_1">
					<a
						href="https://www.linkedin.com/company/american-college-of-cardiology/"
						target="_blank"
						class="linkedin c_shade-5 bg_shade-1 block h:bg_secondary 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_1">
					<a
						href="http://www.youtube.com/user/ACCinTouch"
						target="_blank"
						class="youtube c_shade-5 bg_shade-1 block h:bg_secondary 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_1">
					<a
						href="https://play.google.com/store/apps/dev?id=5189912010956845696&amp;hl=en_US"
						target="_blank"
						class="google-play c_shade-5 bg_shade-1 block h:bg_secondary 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_1">
					<a
						href="https://apps.apple.com/us/developer/american-college-of-cardiology/id502174543#see-all/i-phonei-pad-apps"
						target="_blank"
						class="apple-store bg_shade-1 block br-br_radius br-tr_radius c_shade-5 h:bg_secondary 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>
		</nav>
	</address>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 7778

5.1.2 Date

Style a date marker

Example

Default styling

May 12 2018 
<div class="br_3 br_primary br_solid event-date flex flex_column font_display lh_1 p-x_2 text_center">
  <span class="month font_2">May</span>
  <span class="day font_3 font_bold">12</span>
  <span class="bg_primary c_white-9 font_0 font_1 font_bold m-b_n2 m-x_n2 year">2018</span>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 7793

5.1.3 Date

Style a date marker

Example

Default styling

May 12 2018
voluptate anim consequat tempor adipisicing aliquip non do
Grand Hayatt
Cincinnati, OH
May 12, 20188:00AM - 2:00PM (EST)

Eu dolore ullamco laboris veniam commodo pariatur pariatur proident ea. Esse in in nisi non eiusmod consequat pariatur officia mollit incididunt qui consectetur est. Ex aute non amet elit. Voluptate commodo minim sit Lorem occaecat sit aute reprehenderit. Dolore pariatur cupidatat velit anim enim veniam mollit aute fugiat magna do. Culpa non veniam non officia exercitation laborum dolor irure exercitation tempor adipisicing tempor elit nulla.

Add to Calendar: Outlook | Google | iCal
Register
<div class="br_shade-2 card event">
    <div class="bg_shade-4 br-l_1 br-t_1 br_solid br_white-5 card-header flex">
            <div class="flex_shrink"><div class="bg_white br_3 br_primary br_solid event-date flex flex_column font_display lh_1 p-x_2 text_center">
  <span class="month font_2">May</span>
  <span class="day font_3 font_bold">12</span>
  <span class="bg_primary c_white-9 font_0 font_1 font_bold m-b_n2 m-x_n2 year">2018</span>
    </div></div>
            <div class="event-details flex_grow lh_1 p-l_4">
                <div class="c_secondary-n1 font_2 m-b_2 title">voluptate anim consequat tempor adipisicing aliquip non do</div>
                <div class="c_primary font_0 font_bold location-title m-b_2">Grand Hayatt</div>
                <div class="c_shade-n4 font_n1 location">Cincinnati, OH </div>
                <span class="font_italic font_n2 full-date p-r_3">May 12, 2018</span><span class="time font_italic font_n2 p-r_3"><span class="begin">8:00AM</span> - <span class="end">2:00PM</span> <span class="timezone">(EST)</span></span>
            </div>
    </div>
    <div class="card-body font_0 p-x_3 p-x_4:md p-y_3 p-y_4:md">
        <p>Eu dolore ullamco laboris veniam commodo pariatur pariatur proident ea. Esse in in nisi non eiusmod consequat pariatur officia mollit incididunt qui consectetur est. Ex aute non amet elit. Voluptate commodo minim sit Lorem occaecat sit aute reprehenderit. Dolore pariatur cupidatat velit anim enim veniam mollit aute fugiat magna do. Culpa non veniam non officia exercitation laborum dolor irure exercitation tempor adipisicing tempor elit nulla.</p>
    </div>
    <div class="bg_shade-5 c_shade-1 card-footer font_n1 text_center"><strong>Add to Calendar: </strong><a href="#" class="link">Outlook</a> | <a href="#" class="link">Google</a> | <a href="#" class="link">iCal</a></div>
    <div class="bg_shade-5 br-t_0 card-footer p-t_0"><a href="#" class="bg_secondary br_radius btn btn-secondary btn-block c_white font_bold h:bg_secondary-n2 h:shadow shadow_2">Register</a></div></div>
Copy Code

Source: dist/css/cvquality_boot.css, line 7563

5.1.4 Highlighted Card

Highlighted Cards are stylized cards with a soft blue background and changes all header sizes and text to a bit larger. These cards are used as hero area or for extra interest.

Example

Default styling

Highlighted Card

Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.

Action
<div class="bg_primary-5 br_primary-4 br_radius card highlighted">
 <h2 class="bg_tansparent br-b_0 c_secondary c_shade-n4 card-header font_1 font_2:md font_3:lg p-b_3 p-x_3 p-x_3:md p-x_4:lg uppercase">Highlighted Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 7606

5.1.5 Info Card

Info Cards are stylized cards with a warm grey background and changes all headers to bold. These cards are side notes to the main content

Example

Default styling

Info Card

aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse

Action
<div class="bg_shade-4 br_radius card info shadow_n1 br_0">
 <h2 class="bg_tansparent br-b_0 c_shade-n4 card-header font_1 font_2:md font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg">Info Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 7622

5.1.6 Notice Card

Notice Cards are side notes usually associated with an action button.

Example

Default styling

Notice Card

aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse

Action
<div class="bg_primary-alt br_1  br_shade-4 card info text_center">
 <h2 class="bg_tansparent br-b_0 br_shade-4 c_primary-n2 card-header font_1 font_2:md font_3:lg font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg triangle_left">Notice Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 7638

5.1.7 Notice Card Alt

Notice Cards are side notes usually associated with an action button.

Example

Default styling

Notice Card

aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse

Action
<div class="bg_shade-4 br_0   card info text_center">
 <h2 class="bg_tansparent br-b_0 br_secondary-alt c_secondary card-header font_1 font_2:md font_3:lg font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg triangle_left">Notice Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>aliqua mollit consectetur labore ipsum velit officia nulla anim magna est id elit irure qui dolor exercitation incididunt exercitation proident anim officia veniam reprehenderit laboris incididunt irure enim amet esse</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-shade font_0:md font_n1">Action</a></div>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 7580

5.1.8 Card Positions

Placing cards inside of content areas is needed within the design. Placing some utility classes will acomplish this with a responsive toggle.

Style Combo Effect Classes
position-right-lg floats the card when the veiwport is large up. max-w_20 clear_right:lg float_right:lg w_20:lg
position-right-md floats the card when the veiwport is medium up. max-w_20 clear_right:md float_right:md w_40:md w_20:lg
position-right-sm floats the card when the veiwport is small up. max-w_20 clear_right float_right w_50 w_40:md w_20:lg
position-left-lg floats the card when the veiwport is small up. max-w_20 clear_left:lg float_left:lg w_20:lg
position-left-md floats the card when the veiwport is medium up. max-w_20 clear_left:md float_left:md w_40:md w_20:lg
position-left-sm floats the card when the veiwport is large up. max-w_20 clear_left float_left w_50 w_40:md w_20:lg

Example

Default styling

Positioned Small Right

Container Classes:max-w_1 clear_right float_right w_50 w_40:md w_20:lg

Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.

Action
<div class="bg_primary-alt br_1 br_primary-4 br_radius card highlighted shadow_1 max-w_20 clear_right float_right w_50 w_40\:md w_20\:lg ">
 <h2 class="bg_tansparent br-b_0 c_secondary c_shade-n4 card-header font_1 font_2:md font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg uppercase">Positioned Small Right</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
  <p class=" font_n2"> Container Classes:max-w_1 clear_right float_right w_50 w_40:md w_20:lg</p>
  <p>Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 7845

5.1.9 Product Card

Graphic areas that hold a snippet of a product.

Example

Default styling

incididunt est culpa

aliqua adipisicing sint exercitation nostrud pariatur amet ut est fugiat excepteur ad elit mollit cillum

Link To Product   
<div class="card product">
  <header class="card-header bg_shade-3">
     <img class="card-img" src="https://cvquality.acc.org/images/default-source/accreditation/afbutton.jpg?sfvrsn=f32980bf_2" alt="">
  </header>
  <div class="card-body">
    <article>
     <h2 class="m-0">incididunt est culpa</h2>
      <p>aliqua adipisicing sint exercitation nostrud pariatur amet ut est fugiat excepteur ad elit mollit cillum</p>
      <a class="btn btn-primary" href="#">Link To Product &nbsp; <i class="fa fa-external-link-square"></i></a>
    </article>
  </div>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 7750

5.1.10 Score Card

The Score Box Generic is currently used on the Assessments Page. These repeated boxes are used to show the score with each section of the assessment.

Example

Default styling

veniam quis veniam enim

(0 of 96 possible points) 0
Your Score
Overall Score (0 of 96 possible points) 0% 
<div class="bg_shade-5 box p-x_3 p-y_2 score">
     <h3>veniam quis veniam enim</h3>
     <div class="flex results-points">
         <span class="flex_auto points-possible"><span class="points-breakdown">(0 of 96 possible points)</span></span>
         <span class="c_secondary flex_shrink font_2 points-total">0</span>
     </div>
</div>
<div class="m-t_3 overall-score">
    <span class="c_secondary float_right font_n1 your-score-label">Your Score</span>
    <div class="br-t_2 br_shade br_solid clear_both flex results-points">
        <span class="br-b_1 br_secondary br_dashed flex_auto p-t_4 points-possible">
               <span class="c_secondary font_2 font_bold font_ui m-b_n4 p_3 title">Overall Score</span> <span class="c_shade-1 font_italic points-breakdown">(0 of 96 possible points)</span>
        </span>
        <span class="bg_secondary br_shade c_white flex_shrink font_1 p_3 points-total triangle_top">
            0%
        </span>
    </div>
</div>
Copy Code

Example

Default styling

cillum tempor aliquip amet commodo aute qui veniam Lorem cillum sunt laboris consectetur nisi cillum

Someone famous 
<div class="card testimonial">
	<header class="card-header bg_primary-alt br_primary-3 br_solid br_1">
		<img
			class="card-img br_raund img-thumbnail"
			src="https://unsplash.it/200/200?random=0.08080712330559026"
		/>
	</header>
	<div class="card-body">
		<article class="blockquote">
			<p>cillum tempor aliquip amet commodo aute qui veniam Lorem cillum sunt laboris consectetur nisi cillum</p>
			<cite class="blockquote-cite">Someone famous</cite>
		</article>
	</div>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 13155

5.1.12 Webinar

Graphic areas that hold a snippet of a webinar.

Classes Effect
.ep-webinar Changes the product graphic.
.afib-webinar Changes the product graphic.
.cathlab-webinar Changes the product graphic.
.cpc-webinar Changes the product graphic.
.fsed-webinar Changes the product graphic.
.hf-webinar Changes the product graphic.

Example s 

<div class="bg_shade-5 br_4 br_none br_radius br_shade-4 br_solid card flex_row:md shadow_3"  data-style="[modifier class]" >
    <div class="bg_black-1 card-header br_0 flex_shrink">
        <div class="bg_white br_2 br_shade-3 br_solid [modifier class] m-b_3 p_2 webinar"></div>
		<div class="action">
			<a class="btn btn-block btn-primary c_white">View Webinar <i class="fa fa-play-circle" aria-hidden="true"></i></a>
		</div>
    </div>
    <div class="card-body flex_auto">
        <div class="title">
        	<a>labore ad nisi velit labore commodo nisi tempor occaecat fugiat anim commodo</a>
        </div>
        <div class="view-time"><strong>View Time:</strong>&nbsp;<span>71 minutes</span></div>
    </div>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 13197

5.1.13 Webinar Buttons

Graphic areas that hold a snippet of a webinar.

Style Combo Effect Classes
primary Alters the button style to a btn-primary instead of just a link. btn-primary c_white
shade Alters the button style to a btn-shade instead of just a link. btn-shade c_white
success Alters the button style to a btn-success instead of just a link. bg_success h:bg_success-n2 br_radius c_white

Example s 

<div class="bg_shade-5 br_4 br_none br_radius br_shade-4 br_solid card flex_row:md shadow_3"  data-style="[modifier class]" >
    <div class="bg_black-1 card-header  br_0 flex_shrink">
        <div class="bg_white br_2 br_shade-3 br_solid ep-webinar m-b_3 p_2 webinar"></div>
		<div class="action">
			<a class="btn btn-block [modifier class]">View Webinar <i class="fa fa-play-circle" aria-hidden="true"></i></a>
		</div>
    </div>
    <div class="card-body flex_auto">
        <div class="title">
        	<a>labore ad nisi velit labore commodo nisi tempor occaecat fugiat anim commodo</a>
        </div>
        <div class="view-time"><strong>View Time:</strong>&nbsp;<span>71 minutes</span></div>
    </div>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 13260

5.2.1 Jumbotron

Jumbotron are hero content areas. Larger marketing text with a colored backgrounds to grab the user or mark the page as important. By default Jumbotron is dark text on a light grey background the UC's add some predefined colored backgrounds allow for modificaiton of the area. The backgrounds were generated by this online generator https://qrohlf.com/trianglify-generator/.

Class Effect
.orange-blue orange to blue background
.orange-grey orange to grey background
.blue-grey blue to grey background
.soft softens the edges of the triangles in the background
.blur blurs the back to a smooth gradient

Example s

.orange-blue

orange to blue background

I am a Jumbotron!

Doloribus omnis facere voluptatibus beatae.

.orange-grey

orange to grey background

I am a Jumbotron!

Doloribus omnis facere voluptatibus beatae.

.blue-grey

blue to grey background

I am a Jumbotron!

Doloribus omnis facere voluptatibus beatae.

.soft

softens the edges of the triangles in the background

I am a Jumbotron!

Doloribus omnis facere voluptatibus beatae.

.blur.blue-grey

blurs the back to a smooth gradient

I am a Jumbotron!

Doloribus omnis facere voluptatibus beatae.

<div class="jumbotron relative overflow_hidden br_round [modifier class]">
   <div class="container p-x_4 max-w_60 w_auto m_auto">
         <h1 class="c_black font_10:lg font_6 font_8:md">I am a Jumbotron!</h1>
         <p class="font_1 font_1:md font_3:lg">Doloribus omnis facere voluptatibus beatae.</p>
         <div><a class="br_radius btn btn-primary gradient_teal h:gradient_teal-reverse" href="#" role="button">Learn more</a></div>
   </div>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 8302

5.3 Decorators

The Cvquality design employs a collection of unique decorators that are either accomplished by styles added on top of Arches or are collections of Utility Classes to make the effect. Bellow are the list of standardized decorators in the design.

Source: dist/css/cvquality_boot.css, line 8310

5.3.1 Dividers

There are many dividers in the design. Bellow are the types and how to create them.

Style Combo Effect Classes
item-divider dividing items from eachother like between paragraphs. br_shade-4 br_dashed br_1
group-divider A mid weight divider to show the differnce between grouped items. br_accent br_dotted br_1
section-divider A strong division between Secotions of a page br_primary br_solid br_2
spacer No decoration but adds space between objects br_0

Example

Default styling

Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.

There is a spacer between the two sentences

Cupidatat id incididunt tempor magna consectetur laboris cillum laborum. Enim non reprehenderit eiusmod nisi velit veniam ea eiusmod esse aute proident. Laborum pariatur consequat cillum est officia exercitation esse et consectetur ea ad sint. Sunt esse do cupidatat laborum. Deserunt occaecat id tempor consectetur velit pariatur nulla fugiat sit laboris ipsum.

Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.

Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.

<hr class="divider br_0 br-b_1 br_dotted br_accent">
<p>Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.</p>
<hr class="divider br_0 br-b_1 br_dashed br_shade-4">
<strong>There is a spacer between the two sentences</strong>
<p>Cupidatat id incididunt tempor magna consectetur laboris cillum laborum. Enim non reprehenderit eiusmod nisi velit veniam ea eiusmod esse aute proident. Laborum pariatur consequat cillum est officia exercitation esse et consectetur ea ad sint. Sunt esse do cupidatat laborum. Deserunt occaecat id tempor consectetur velit pariatur nulla fugiat sit laboris ipsum.</p>
<hr class="br_none"/>
<p>Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.</p>
<hr class=" br_0 br-b_1 br_primary br_solid">
<p>Est veniam anim duis ex irure occaecat velit voluptate. Exercitation incididunt ea esse duis voluptate esse veniam est officia id voluptate. In labore cupidatat do nulla anim labore. Esse ipsum velit sunt eu eiusmod fugiat sit culpa. Qui occaecat adipisicing minim minim minim ipsum esse ut id adipisicing duis duis. Esse esse ut amet ullamco. Est excepteur sunt laboris anim.</p>
Copy Code

Source: dist/css/cvquality_boot.css, line 13342

5.3.2 Triangles

Colored Triangles are used through out the cvquality design. To add triangle that adhears to the side of a container and takes on the color of the border color of the container.

Example s

.triangle_left

left placed triangle.

Highlighted Card

Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.

Action

.triangle_right

right placed triangle.

Highlighted Card

Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.

Action

.triangle_bottom

bottom placed triangle.

Highlighted Card

Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.

Action

.triangle_top

top placed triangle.

Highlighted Card

Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.

Action
<div class="bg_shade-5 br_1 br_accent br_radius card highlighted shadow_1 ">
 <div class="[modifier class] br_accent"><h2 class="bg_tansparent br-b_0 c_accent c_shade-n4 card-header font_1 font_2:md font_bold font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg uppercase">Highlighted Card</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
    <p>Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div></div>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 9787

5.4 Interactive Extras

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

Source: dist/css/cvquality_boot.css, line 8654

5.4.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 class]" >
   <div class="m-y_2 lorem-loader [modifier class] ">&nbsp;</div>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 8873

5.4.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>
Copy Code

Example

Default styling

 

 

 

 

<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>
Copy Code

Source: dist/css/cvquality_boot.css, line 8703

5.4.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]" 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 class]"></i>
			<span class="flex_auto ">FA Solid [modifier class]</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 class]"></i>
			<span class="flex_auto ">FA Regular [modifier class]</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 class]"></i>
			<span class="flex_auto">FA Light [modifier class]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
</ul>
Copy Code

Source: dist/css/cvquality_boot.css, line 7868

5.5 List

CVquatlity has some lists through out the design that go beyond basic lists. Below are collection of them and where they can be found.

Source: dist/css/cvquality_boot.css, line 7876

5.5.1 Map Result List

Result lists is the list view of all of the pins on the map

Example

Default styling

  • proident ad velit sit
    sunt magna ea exercitation
    nisi qui culpa labore
  • proident ad velit sit
    sunt magna ea exercitation
    nisi qui culpa labore
<ul class="bg_shade-2 font_ui result-list ul_none">
      <li class="address bg_shade-4 br-r_4 br_solid br_white-0 h:bg_shade-n2 h:br_accent h:c_accent-alt p_2 p_3:md p_4:lg relative transition_1">
         <div class="c_primary-n2 expanded-click-area font_1 h:c_white name">proident ad velit sit</div>
         <div class="address-line">sunt magna ea exercitation</div>
         <div class="address-line">nisi qui culpa labore</div>
      </li>
      <li class="address bg_shade-4 br-r_4 br_solid br_white-0 h:bg_shade-n2 h:br_accent h:c_accent-alt m-t_1 p_2 p_3:md p_4:lg relative transition_1">
         <div class="c_primary-n2 expanded-click-area font_1 h:c_white name">proident ad velit sit</div>
         <div class="address-line">sunt magna ea exercitation</div>
         <div class="address-line">nisi qui culpa labore</div>
      </li>
</ul>
Copy Code 
<div class="flex relative font_display font_medium">
	<nav class="bg_shade-1  flex_auto font_0 font_1:lg font_display navbar navbar-dark navbar-expand-lg navbar-primary p-x_0 uppercase">
		<a class="br_white-2 flex is-active_toggle-function m-l_3 m-l_n2 m-y_2 navbar-toggler p-l_2 p-r_3 p-y_2 collapsed" type="button" data-toggle="collapse" data-target="#navbarLoginContent" aria-controls="navbarLoginContent" aria-expanded="false" aria-label="Toggle navigation">
			<i class="a:c_secondary c_white fas flex_shrink font_0 icon-toggle_bars-times self_center"></i><span class="a:c_acc-2 c_white flex_auto self_center">&nbsp;Menu</span>
		</a>
		<div class="navbar-collapse collapse" id="navbarLoginContent" style="">
			<ul class="expand expanded flex flex_column flex_row:lg nav text_center:lg text_left w_100">
				<li class="nav-item flex_shrink">
					<a class="active c_white h:bg_shade nav-link p-x_4 p-x_5:lg" href="//www.acc.org/guidelines#doctype=Guidelines" title="Access ACC guidelines and clinical policy documents as well as related resources"><i class="fas fa-home"></i><span class="display_none:lg p-x_3">Home</span></a>
				</li>
				<li class="nav-item flex_auto dropdown lh_2">
					<a class="c_white dropdown-toggle h:bg_shade is-active_toggle-function nav-link p-x_4" href="/NCDR-Home" target="_self" data-delay="300" data-close-others="false" id="clinicalTopicsDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="far faw icon-toggle_plus-minus display_none:lg m-l_n2 m-r_2"></i>Clinical Topics</a>
					<div class="absolute:lg br_1 br_none br_shade-3 br_solid:lg c_white dropdown-menu font_bold l_0 m-t_0 m-x_0 m-x_0:lg p_0 r_0 relative w_100" aria-labelledby="clinicalTopicsDropdown">
						<ul class="bg_shade-5 font_0 font_bold lh_1 ul_none">
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/about-ncdr" target="_self">About NCDR</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/registries" target="_self">Registries</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/data-collection" target="_self">Data Collection</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/reports" target="_self">Reports</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/quality-payment-program" target="_self">Quality Payment Program</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/research" target="_self">Research</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/analytics" target="_self">Analytics</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/annual-conference" target="_self">ACC Quality Summit</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/ncdr-learning-center" target="_self">NCDR Learning Center</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/transform-ldl-c-risk" target="_self">TRANSFORM LDL C Risk</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/participant-directory" target="_self">Participant Directory</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/acc-public-reporting" target="_self">ACC Public Reporting</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/clinical-quality-coach" target="_self">NCDR Clinical Quality Coach Practice Dashboard</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="https://www.ncdr.com/webncdr/Login?ReturnUrl=/webncdr/home/registry-selection" target="_self">Registry Participant Login</a></li>
							<li class="nav-item"><a class="c_black-8 dropdown-item h:bg_black-2 h:c_white nav-link p-x_5 text-indent_n1 wrap" href="/NCDR-Home/join-a-registry" target="_self">Join a Registry</a></li>
						</ul>
					</div>
				</li>
				<li class="nav-item flex_auto">
					<a class="nav-link active h:bg_shade c_white p-x_4" href="#">deserunt</a>
				</li>
				<li class="nav-item flex_auto">
					<a class="nav-link h:bg_shade c_white p-x_4" href="#">sit dolor commodo</a>
				</li>
				<li class="nav-item flex_auto">
					<a class="nav-link h:bg_shade c_white p-x_4" href="#">adipisicing</a>
				</li>
			</ul>
		</div>
	</nav>
	<nav class="absolute flex_shrink font_0 font_1:lg gradient_teal navbar navbar-dark navbar-expand p-b_1 p_0 r_0 relative:lg">
		<ul class="navbar-nav">
			<li class="dropdown h:gradient_teal-reverse nav-item show">
				<a class="block is-active_toggle-function nav-link p-x_5:lg" id="myACCDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><i class="far icon-toggle_chevron-up-down"></i> Sign In</a>
				<div class="br_none br_solid:lg dropdown-menu dropdown-menu-right font_0 m-t_n1 p_0 r_0 show" aria-labelledby="navbarDropdown">
					<ul class="ul_none">
						<li class="nav-item">
							<a class="dropdown-item nav-link bg_secondary h:bg_secondary-n2 c_white flex" href="#">
								<span class="flex_auto inline-block p-l_2 p-r_4 uppercase">CV Quality </span>
								<span class="c_white-7 flex-shrink font_n1 p-x_3 self_center">Log Out <i class="fas fa-sign-out"></i></span></a>
						</li>
						<li class="nav-item">
							<a class="dropdown-item nav-link flex bg_primary-n1 h:bg_primary-n3 c_white" href="#"><span class="flex_auto inline-block p-l_2 p-r_4 uppercase">Accreditation</span>
								<span class="c_white-7 flex-shrink font_n1 p-x_3 self_center">Log In <i class="fas fa-sign-in"></i></span></a>
						</li>
						<li class="nav-item">
							<a class="dropdown-item nav-link flex bg_primary-n1 h:bg_primary-n3 c_white" href="#"><span class="flex_auto inline-block p-l_2 p-r_4 uppercase">NCDR</span>
								<span class="c_white-7 flex-shrink font_n1 p-x_3 self_center">Log In <i class="fas fa-sign-in"></i></span></a>
						</li>
					</ul>
				</div>
			</li>
			<li class="br-l_1 br_solid br_white-3 h:gradient_teal-reverse nav-item">
				<a class=" nav-link" href="#" title="Sign Out of all Systems"><i class="fas fa-sign-out-alt"></i></a>
			</li>
		</ul>
	</nav>
</div>
Copy Code

Source: dist/css/cvquality_boot.css, line 7313

5.6.2 Footer

The Footer of CVQuality.org

Example

Default styling

<div id="footer-wrap" class="">
	<!-- ********************************** breadcrumbs ********************************** -->
	<div id="breadcrumbs" class="br-b_3 br-t_1 br_0 br_accent br_solid br_t_3 breadcrumbs-container c_shade font_0 font_ui p-x_4 p_3">
		<b class="breadcrumbs-title">YOU ARE HERE: </b>
		Home
	</div>
	<!-- This is the inner footer that we cache -->
	<div id="footer" role="contentinfo" class="bg_shade-2 flex flex_column flex_inline flex_row:md flex_wrap p-x_3 p-y_0:lg p-y_4 w_100">
		<div class="br-l_1 br_so br_solid:lg br_white-3 flex_auto font_ui m-l_4:lg m-y_4:lg order-1 p-l_3:md p-l_4:lg p-y_4:md p-x_0 p-x_3 p-y_4:lg w-grid_2:lg w-grid_6:md">
			<h2 class="br-b_1 br_dotted:md br_dotted:lg br_white-6 c_shade-n4 font_0:md font_1 font_ui font_bold m-b_0:md m-b_2 m-b_2:lg m-t_4:md p-b_3 table-cell vertical-align_bottom w_10" style="height: 4rem;">
				Quality Improvement for Institutions:
			</h2>
			<ul class="font_n1:lg font_0 font_ui m-b_4 p-t_2 ul_none">
				<li class="text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/home" id="msFooter_rptQii_hypLnk_0" target="_top">
						Home
					</a>
				</li>
				<li class="text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/About-QII" id="msFooter_rptQii_hypLnk_1" target="_top">
						About
					</a>
				</li>
				<li class="text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/Get-Started" id="msFooter_rptQii_hypLnk_2" target="_top">
						Get Started
					</a>
				</li>
				<li class="text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/News" id="msFooter_rptQii_hypLnk_3" target="_top">
						News
					</a>
				</li>
			</ul>
		</div>
		<div class="br-r_1 br_0 br_solid:lg br_white-3 flex_auto font_ui m-r_4:lg m-y_4:lg order-1 p-r_4:lg p-x_3 p-y_4:md w-grid_2:lg w-grid_6:md">
			<h2 class="br-b_1 br_dotted:md br_dotted:lg font_1 br_white-6 c_shade-n5 font_0:md font_ui font_bold m-b_0 m-b_2:lg m-t_4:md nowrap p-b_3 table-cell vertical-align_bottom w_10" style="height: 4rem;">Offerings:</h2>
			<ul class="font_n1:lg font_0 font_ui m-b_4 p-t_2 ul_none">
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/NCDR-Home" id="msFooter_rptOfferings_hypLnk_0" target="_top">
						NCDR
					</a>
				</li>
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/Initiatives" id="msFooter_rptOfferings_hypLnk_1" target="_top">
						Initiatives
					</a>
				</li>
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/qi-communications-kit" id="msFooter_rptOfferings_hypLnk_2" target="_top">
						QI Participation Kit
					</a>
				</li>
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/Clinical-Toolkits" id="msFooter_rptOfferings_hypLnk_3" target="_top">
						Clinical Toolkits
					</a>
				</li>
				<li class="nav-item text-indent_n1 p-l_4 p-l_r">
					<a class="nav-link c_white h:underline p-y_0" href="/accreditation" target="_self">
						Accreditation
					</a>
				</li>
			</ul>
		</div>
		<!-- column 4 -->
		<div class="flex_auto order_0:md order_last p-x_3 p-y_4:lg relative w-grid:12:md w-grid_12 w-grid_3:lg">
			<div class="bg_left block display_none:md logo_condensed seal_primary" style="height: 80px;">
				<span class="alt">logo_primary-alt max-w_20</span>
			</div>
<div class="bg_left block:md display_none logo_primary" style="height: 100px;">
				<span class="alt">logo_primary-alt max-w_20</span>
			</div>
			<section class="address c_shade-n4 p-l_0:md p-y_0:md p-y_3">
				<address>
					<!-- http://microformats.org/wiki/hcard -->
					<h4 class="m-b_0 font_bold m-b_2:md font_copy font_normal font_1:md font_2 m-t_4:md">
						Heart House
					</h4>
					<div class="flex flex_column flex_row:md font_n1 lh_1 font_ui">
						<ul class="flex_auto p-r_4 ul_none w_10:md w_50:lg">
							<li class="m-b_1 m-b_2:md font_normal">
								<span class="street-address">2400 N. St. NW</span>
							</li>
							<li class="m-b_1 m-b_2:md font_normal">
								<span class="locality ">Washington</span>,
								<span class="city-name ">
									<abbr title="District of Colombia">DC</abbr>
								</span>
								<span class="postal-code">20037</span>
							</li>
							<li class="m-b_1 m-b_2:md font_normal">
								<a href="mailto:MemberCare@acc.org" class="email c_shade-n4 h:c_shade-n5 h:underline">
									<strong class="p-r_2">Email:</strong>
									<span class="">MemberCare@acc.org</span></a>
							</li>
						</ul>
						<ul class="flex_auto p-l_0:lg p-l_4:md ul_none w_50:lg w_50:md">
							<li class="m-b_1 m-b_2:md font_normal">
								<a tel="+12023756000" href="tel:+12023756000" class="tel c_shade-n4 h:c_shade-n5 h:underline">
									<strong class="p-r_2">Phone:</strong><span class="">(202) 375-6000, ext. 5603</span></a>
							</li>
							<li class="m-b_1 m-b_2:md font_normal">
								<a tel="+18002574737" href="tel:+18002534636.5603" class="tel c_shade-n4 h:c_shade-n5 h:underline">
									<strong class="p-r_2">Toll Free:</strong><span class="">(800) 253-4636, ext. 5603</span></a>
							</li>
							<li class="m-b_1 m-b_2:md font_normal">
								<a fax="+12023757000" href="fax:+12023757000" class="fax c_shade-n4 h:c_shade-n5 h:underline">
									<strong class="p-r_2">Fax:</strong>
									<span class="">(202) 375-7000</span>
								</a>
							</li>
						</ul>
					</div>
				</address>
			</section>
		</div>
		<div class="flex_auto order-10 order_last p-x_3 p-y_4:lg relative w-grid_3:lg w-grid_6:md">
			<section class="acc-websites m-y_3">
				<nav class="font_ui w_100 font_0"><h3 class="br-b_1 br_dotted br_white-4 c_shade-n4 font_0 font_ui font_bold m-b_2 p-b_3 w_100">Improving Cardiovascular Care</h3>
					<ul class="lh_4 ul_none">
						<li class="">
							<a target="_blank" class="block c_shade-5 h:bg_black-2 h:c_white flex" href="http://www.acc.org">
								<span class="flex_auto m-l_2">Acc</span>
								<i class="fa-external-link-square fas flex_shrink  p-r_3 self_center"></i>
							</a>
						</li>
						<li class="">
							<a target="_blank" class="c_shade-5 block h:bg_black-2 h:c_white flex" href="https://cvquality.acc.org/Accreditation?">
								<span class="flex_auto m-l_2 self_center">Accreditation Services</span>
								<i class=" fa-external-link-square fas flex_shrink p-r_3 self_center"></i>
							</a>
						</li>
						<li class="">
							<a target="_blank" class="c_shade-5 block h:bg_black-2 h:c_white flex" href="http://www.ncdr.com">
								<span class="flex_auto inline-block m-l_2 self_center">NCDR</span>
								<i class=" fa-external-link-square fas flex_shrink p-r_3 self_center"></i>
							</a>
						</li>
						<li class="">
							<a target="_blank" class="c_shade-5 block h:bg_black-2 h:c_white flex" href="http://www.cardiosmart.org">
								<span class="flex_auto inline-block m-l_2 self_center">CardioSmart</span>
								<i class=" fa-external-link-square fas flex_shrink p-r_3 self_center"></i>
							</a>
						</li>
						<li class="">
							<a target="_blank" class="c_shade-5 block h:bg_black-2 h:c_white flex" href="http://www.onlinejacc.org/">
								<span class="flex_auto inline-block m-l_2 self_center">JACC</span>
								<i class=" fa-external-link-square fas flex_shrink p-r_3 self_center"></i>
							</a>
						</li>
					</ul>
				</nav>
			</section>
			<section class="b_4 l_0 m-t_4 p-t_5 r_0 social">
				<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&amp;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>
		</div>
	</div>
	<!-- / footer -->
	<div id="subfooter" class="bg_shade-n1 br-b_2 br_0 br_accent-n1 br_solid c_white font_n1 p-x_4 p-y_4">
		<ul class="block footer-bottom-links ul_none">
			<li class="inline p_2">
				<a href="//www.acc.org/footer-pages/media-center" class="c_white-6 h:c_white">Media Center</a>
			</li>
			<li class="inline p_2">
				<a href="//www.acc.org/footer-pages/quick-start-guide" class="c_white-6 h:c_white">ACC.org Quick Start Guide</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/advertising-and-sponsorship-policy">Advertising &amp; Sponsorship Policy</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/clinical-content-disclaimer">Clinical Content Disclaimer</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/editorial-board">Editorial Board</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/privacy-policy">Privacy Policy</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/registered-user-agreement">Registered User Agreement</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/terms-and-conditions">Terms of Service</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/cookie-policy">Cookie Policy</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/footer-pages/member-hub-terms-of-use">Member Hub Terms of Use</a>
			</li>
			<li class="inline p_2">
				<a class="c_white-6 h:c_white" href="//www.acc.org/sitemap-acc.xml">Site Map</a>
			</li>
		</ul>
		<!-- /footer-bottom-links -->
		<p class="c_white-5 font_italic font_n2 legal m-b_2 m-t_3">
			© 2019 American College of Cardiology Foundation. All rights reserved.
		</p>
	</div>
	<!-- /subfooter -->
</div>
Copy Code

Example

Default styling

<nav class="hidden-print nav-sub max-w-25">
    <ul
        class="bg_shade-5 br-b_1 br-t_1 br_secondary br_solid flex flex_column font_0 font_bold font_ui nav">
        <li data-nav="parent"
            class="nav-item parent"><a
               class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black"
               href="/accreditation/about-accreditation"
               target="_self"><i
                   class="fa fa-holder toggle"></i>About
                Accreditation</a>
            <ul data-nav="child"
                class="flex_column font_n1 nav text-indent_2 bg_shade-4">
                <li class="nav-item"><a
                       class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black"
                       href="/accreditation/about-accreditation/benefits-of-accreditation"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Benefits
                        of Accreditation</a></li>
                <li class="nav-item"><a
                       class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black"
                       href="/accreditation/about-accreditation/steps-to-accreditation"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Pathway
                        to Accreditation</a></li>
                <li class="nav-item"><a
                       class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black"
                       href="/accreditation/about-accreditation/testimonials-and-success-stories"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Testimonials
                        and Success Stories</a></li>
                <li class="nav-item"><a
                       class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black"
                       href="/accreditation/about-accreditation/value-of-process-improvement"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Value
                        of Process Improvement</a></li>
                <li class="nav-item"><a
                       class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black"
                       href="/accreditation/about-accreditation/faqs"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>FAQs</a>
                </li>
                <li class="nav-item"><a
                       class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black"
                       href="/accreditation/about-accreditation/accreditation-for-systems"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>System-Wide
                        Accreditation</a></li>
            </ul>
        </li>
        <li data-nav="parent"
            class="is-active nav-item parent"><a
               class="a:c_secondary c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2"
               href="/accreditation/services"
               target="_self"><i
                   class="fa fa-holder toggle"></i>Products
                and Services</a>
            <ul data-nav="child"
                class="bg_shade-4 flex_column font_n1 nav text-indent_1">
                <li class="nav-item parent"><a
                       class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2"
                       href="/accreditation/services/CCL"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Cardiac
                        Cath Lab Accreditation</a>
                    <ul
                        class="nav flex_column bg_black-2 font_n1 text-indent_3">
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/CCL/OnDemandCathLabwebianrs"
                               target="_self">On-Demand Cath
                                Lab Webinars</a></li>
                        <li class="nav-item"><a
                               class="nav-link nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/CCL/CCLBenefits"
                               target="_self">Cardiac Cath
                                Lab Features Benefits</a>
                        </li>
                        <li class="nav-item"><a
                               class="nav-link nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/CCL/cardiac-cath-lab-accreditation-training"
                               target="_self">Cardiac Cath
                                Lab Accreditation
                                Training</a></li>
                    </ul>
                </li>
                <li class="nav-item parent"><a
                       class="nav-link c_shade-n3 fa-caret-right icon-before nav-link p-y_2"
                       href="/accreditation/services/chest-pain-center-accreditation"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Chest
                        Pain Center Accreditation</a>
                    <ul
                        class="nav flex_column bg_black-2 font_n1 text-indent_3">
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/cpcwebinars"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>On-Demand
                                Chest Pain Center
                                Webinars</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/CPCDesignations"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Chest
                                Pain Center Accreditation
                                Designations</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/CPCBenefits"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Chest
                                Pain Center Accreditation
                                Features Benefits</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/CPCsupplementalED"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Supplemental
                                Education</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/CPCGuidelines"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Chest
                                Pain Center Accreditation
                                Guidelines</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/CPCArticles"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Chest
                                Pain Center Accreditation
                                Articles Abstracts</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/CPCPublications"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Chest
                                Pain Center Accreditation
                                Pubs</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/CPCQuestions"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Chest
                                Pain Center FAQs</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 nav-link p-y_2"
                               href="/accreditation/services/chest-pain-center-accreditation/chest-pain-center-accreditation-training"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Chest
                                Pain Center Accreditation
                                Training</a></li>
                    </ul>
                </li>
                <li class="nav-item parent"><a
                       class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2"
                       href="/accreditation/services/EP"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Electrophysiology
                        Accreditation</a>
                    <ul
                        class="nav flex_column bg_black-2 font_n1 text-indent_3">
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/EP/register-for-webinar"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>On-Demand
                                EP Webinars</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/EP/EPBenefits"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Electrophysiology
                                Features Benefits</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/EP/electrophysiology-accreditation-training"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Electrophysiology
                                Accreditation Training</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item parent"><a
                       class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2"
                       href="/accreditation/services/HF"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Heart
                        Failure Accreditation</a>
                    <ul
                        class="nav flex_column bg_black-2 font_n1 text-indent_3">
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/hfwebinars"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>On-Demand
                                Heart Failure Webinars</a>
                        </li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/HFBenefits"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Heart
                                Failure Accreditation
                                Features Benefits</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/supplementalED"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Supplemental
                                Education</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/HFGuidelines"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Heart
                                Failure Accreditation
                                Guidelines</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/HFArticles"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Heart
                                Failure Accreditation
                                Articles and Abstracts</a>
                        </li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/HFPublications"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Heart
                                Failure Accreditation
                                Publications</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/HFQuestions"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Heart
                                Failure FAQs</a></li>
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/HF/heart-failure-accreditation-training"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Heart
                                Failure Accreditation
                                Training</a></li>
                    </ul>
                </li>
                <li class="nav-item parent"><a
                       class="h:bg_black-1 c_shade-n3 fa-caret-right icon-before nav-link p-y_2"
                       href="/accreditation/services/TCV"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>Transcatheter
                        Valve Certification</a>
                    <ul
                        class="nav flex_column bg_black-2 font_n1 text-indent_3">
                        <li class="nav-item"><a
                               class="nav-link c_shade-n4 p-y_2"
                               href="/accreditation/services/TCV/TCV-certification-training"
                               target="_self"><i
                                   class="fa fa-holder toggle"></i>Transcatheter
                                Valve Certification
                                Training</a></li>
                    </ul>
                </li>
                <li class="nav-item"><a
                       class="h:bg_black-1 c_shade-n3 nav-link p-y_2"
                       href="/accreditation/services/C4Certification"
                       target="_self"><i
                           class="fa fa-holder toggle"></i>C4
                        Certification</a></li>
            </ul>
        </li>
        <li class="nav-item"><a
               class="a:c_secondary c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2"
               href="/accreditation/heartcare-center-recognition-program"
               target="_self"><i
                   class="fa fa-holder toggle"></i>HeartCARE
                Center Recognition Program</a></li>
        <li class="nav-item"><a
               class="a:c_secondary c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2"
               href="/accreditation/acc-quality-summit-2020"
               target="_self"><i
                   class="fa fa-holder toggle"></i>ACC
                Quality Summit</a></li>
        <li class="nav-item active current"><a
               class="a:c_secondary c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2"
               href="/accreditation/brand"
               target="_self"><i
                   class="fa fa-holder toggle"></i>Promote
                Your Achievement</a></li>
    </ul>
</nav>
Copy Code

Source: dist/css/cvquality_boot.css, line 8205

5.6.4 Side Nav Parent

Decoration classes with UC's to make the nav look like the primary level.

<nav class="hidden-print nav-sub max-w-25">
	<ul class="bg_shade-5 br-b_1 br-t_1 br_secondary br_solid flex flex_column font_0 font_bold font_ui nav">
		<li data-nav="parent" class="nav-item parent">
			<a class="a:c_secondary c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" target="_self">
				Link with children
			</a>
		</li>
		<li  class="nav-item">
			<a class="a:c_secondary c_shade-n3 h:bg_white-4 nav-link p-y_2" target="_self">
				Link without children
			</a>
		</li>
		<li data-nav="parent" class="nav-item parent active">
			<a class="a:c_secondary c_shade-n3 fa-caret-down h:bg_white-4 icon-before nav-link p-y_2"t arget="_self">
				Link that is active
			</a>
		</li>
	</ul>
</nav>
Copy Code

Source: dist/css/cvquality_boot.css, line 8235

5.6.5 Side Nav Child

Decoration classes with UC's to make the nav look like the child of the primary level.

<nav class="hidden-print nav-sub max-w-25">
	<ul class="bg_shade-5 br-b_1 br-t_1 br_secondary br_solid flex flex_column font_0 font_bold font_ui nav">
		<li data-nav="parent" class="nav-item parent">
			<a class="a:c_secondary c_shade-n3 fa-caret-right h:bg_white-4 icon-before nav-link p-y_2" target="_self">
				Parent Link
			</a>
			<ul class="flex_column font_n1 nav text-indent_2 bg_shade-4">
				<li data-nav="parent" class="nav-item parent">
					<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" target="_self">
						Link with children
					</a>
				</li>
				<li  class="nav-item">
					<a class="a:c_secondary c_shade-n3 h:bg_white-4 nav-link p-y_2" target="_self">
						Link without children
					</a>
				</li>
				<li data-nav="parent" class="nav-item parent active">
					<a class="a:c_secondary c_shade-n3 fa-caret-down h:bg_white-4 icon-before nav-link p-y_2"t arget="_self">
						Link that is active
					</a>
				</li>
			</ul>
		</li>
	</ul>
</nav>
Copy Code

Source: dist/css/cvquality_boot.css, line 8272

5.6.6 Side Nav Gran Child

Decoration classes with UC's to make the nav look like the child of the primary level.

<nav class="hidden-print nav-sub max-w-25">
	<ul class="bg_shade-5 br-b_1 br-t_1 br_secondary br_solid flex flex_column font_0 font_bold font_ui nav">
		<li data-nav="parent" class="nav-item parent">
			<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" target="_self">
				Link with children
			</a>
		</li>
		<li  class="nav-item">
			<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" target="_self">
				Link without children
			</a>
		</li>
		<li data-nav="parent" class="nav-item parent active">
			<a class="nav-link p-y_2 c_shade-n3 h:bg_black-2 h:c_black" target="_self">
				Link that is active
			</a>
		</li>
	</ul>
</nav>
Copy Code

Source: dist/css/cvquality_boot.css, line 8803

5.7 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>
Copy Code

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>
Copy Code

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>
Copy Code