Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Disabled

Source: dist/css/acc_uc.css, line 15741

5 Disabled

Description: The antithesis of active or hover is disabled. combined with the standard for background and color UI elements styled with disable look very inactive and untouchable

Example

Default styling

Markup: 
Markup:
Copy Code

Example

Default styling

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

Source: dist/css/acc_uc.css, line 16474

5.1.2 Link Decorator

Links with the .link will auto decorate with an icon of the corresponding file type. In each brand there the the variable $usingFontAwesome to control if the classes should even render for the brand. $usingFontAwesome's defualt is true.| 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 |

<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" target="_blank" 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"  target="_blank"  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>
Copy Code

Example

Default styling

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!

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!

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