Aforza Component Library

The Aforza Component Library (also known as ACL) has been developed to help internal engineers at Aforza build functional modular interfaces while maintaining brand consistency.

Based on a Material Design system that was originally developed by a core team of engineers and UX designers at Google, these components help produce a reliable development workflow to build beautiful and functional web projects.

Resources

Download the ACL resources:

• JavaScript
• CSS
• CSS Animate

Quick start

To get started the CSS and JS will need to be added your application, the version number included in the URL will change dependent on the time of implementation.

<!-- Required styles for ACL -->
<link rel="stylesheet" href="/acl--1-0-1.css" />

<!-- Required ACL Web JavaScript library -->
<script src="/acl--1-0-1.min.js"></script>

TODO Please see quick start demo on codepen for full example.

HTML

Sample usage of text field component. Please see ACL Textfield component page for more options.

<label class="acl-text-field">
    <input type="text" class="acl-text-field__input" aria-labelledby="my-label" />
    <span class="acl-floating-label" id="my-label">Label</span>
    <div class="acl-line-ripple"></div>
</label>