Module Card v1

Content Cards

Please Note

The module-card component was primarily developed/provided for administrators. In the front end this component is ususally not used. Of course it can be used wherever you like it.

<div class="module-card v1 hoverable z-depth-1">
    <div class="card-inner">
        <figure>
            <img src="https://www.amaryllis-cms.de/media/images/amaryllis-icons-full.svg#client" title="clients" alt="clients" itemprop="image" class="activator module-logo full clients">
            <figcaption>
                <h3 class="text-center">Clients</h3>
                <p class="text-center">Version <span>1.3.0.44</span></p>
            </figcaption>
        </figure>
        <div class="card-content">
            <div class="card-title">
                <h3><span>Clients</span> <small>Clients</small></h3>
            </div>
            <div class="provider">
                <button class="author-company">
                    <span>
                        Amaryllis Systems GmbH
                    </span>
                </button>
            </div>
            <p>
                <span class="tag large">
                    <span class="tag-image">
                        <i aria-hidden="true" class="acms-icon acms-icon-folder"></i> 
                    </span>
                    <span>
                        418.37 kb
                    </span>
                </span>
                <span class="tag large">
                    <span class="tag-image">
                        <i aria-hidden="true" class="acms-icon acms-icon-cloud-upload-alt"></i> 
                    </span>
                    <span>
                        0 bytes
                    </span>
                </span>
                <span class="tag large">
                    <span class="tag-image">
                        <i class="acms-icon acms-icon-database"></i>
                    </span>
                    <span>
                        6 (96 kb)
                    </span>
                </span>
                <span class="tag large">
                    <span class="tag-image">
                        <i class="acms-icon acms-icon-calendar-alt acms-iconr"></i>
                    </span>
                    <span>
                        01.03.2018
                    </span>
                </span>
                <span class="label success">Active</span>
                <span class="label success">Final</span>
            </p>
            <div class="tag-bar">
                <i aria-hidden="true" class="acms-icon acms-icon-tags"></i>
                <span class="tag default">
                    <span class="tag-image">
                        <i aria-hidden="true" class="acms-icon acms-icon-tag"></i>
                    </span>
                    <span>Clients</span>
                </span>
                <span class="tag default">
                    <span class="tag-image">
                        <i aria-hidden="true" class="acms-icon acms-icon-tag"></i>
                    </span>
                    <span>Clients-Administration</span>
                </span>
                <span class="tag default">
                    <span class="tag-image">
                        <i aria-hidden="true" class="acms-icon acms-icon-tag"></i>
                    </span>
                    <span> Clients</span>
                </span>
                <span class="tag default">
                    <span class="tag-image">
                        <i aria-hidden="true" class="acms-icon acms-icon-tag"></i>
                    </span>
                    <span> Clients-Administration</span>
                </span>
            </div>
            <div class="card-action">
                <button class="button tiny highlight">
                    <i aria-hidden="true" class="acms-icon acms-icon-link"></i>
                    <span class="src-only">To the Module</span>
                </button>
                <button class="button tiny info module-info">
                    <i aria-hidden="true" class="acms-icon acms-icon-info-circle"></i>
                    <span class="src-only">Module-Description</span>
                </button>
                <button class="button tiny primary module-edit">
                    <i aria-hidden="true" class="acms-icon acms-icon-edit"></i>
                    <span class="src-only">Edit</span>
                </button>
                <button class="button tiny royal module-dashboard">
                    <i aria-hidden="true" class="acms-icon acms-icon-tachometer-alt "></i>
                    <span class="src-only">Administrative Dashboard</span>
                </button>
            </div>
            <div class="card-shortcuts">
                <ul class="list-inline list-unstyled">
                    <li>
                        <button class="module-update primary button tiny">
                            <i aria-hidden="true" class="acms-icon acms-icon-sync-alt"></i>
                            <span class="src-only">Update</span>
                        </button>
                    </li>
                    <li>
                        <button class="module-about button tiny info">
                            <i aria-hidden="true" class="acms-icon acms-icon-lightbulb acms-iconr"></i>
                            <span class="src-only">About</span>
                        </button>
                    </li>
                    <li>
                        <button class="module-uninstall button tiny danger">
                            <i aria-hidden="true" class="acms-icon acms-icon-trash"></i>
                            <span class="src-only">Uninstall</span>
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

Beispiel

Clients

Version 1.3.0.44

Klienten Clients

418.37 kb 0 bytes 6 (96 kb) 01.03.2018 Active Final

Clients Clients-Administration Clients Clients-Administration