PAGES: Responsive Card Layout

Responsive Card Layout

This template takes advantage of Placeholder Links to dynamically link Clients to their appropriate Project or Shared Folder

For more on Placeholder Links?  See PLACEHOLDER LINKS

You can also use Custom Fields & Dynamic Data Placeholders, just as in any template.

Don't know much about Custom Fields?  See CUSTOM FIELDS DOCUMENTATION

Need some help understanding how to work with Templates? See USING TEMPLATES IN SUITEDASH

Screenshot

Step 1

Paste the following code into the HTML/Source of the Announcement

<div class="row feature-section">
    <div class="col-12">
        <h2 class="feature-heading py-1" data-type="header">{{companyName}}</h2>
        <p data-type="paragraph" class="lead">This will be your Start Page. We'll provide direct links here for you to simplify your experience.<br></p>
    </div>
</div>
<div class="row feature-section mb-4">
    <div class="col-12">
        <div class="row">
            <div class="col-12 col-lg-4 mb-3 mb-lg-0">
                <div class="card">
                    <div class="card-body text-center">
                        <h5 class="card-text" data-type="paragraph"><i class="material-icons md-48">dvr</i></h5>
                        <h5 class="card-title" data-type="header">Your Project</h5>
                        <p class="card-text" data-type="paragraph"><small class="text-muted">Click here for Project Updates & Management</small></p><a class="btn btn-primary" href="/your-project">Go to My Project</a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4 mb-3 mb-lg-0">
                <div class="card">
                    <div class="card-body text-center">
                        <h5 class="card-text" data-type="paragraph"><i class="material-icons md-48">today</i></h5>
                        <h5 class="card-title" data-type="header">your calendar<br></h5>
                        <p class="card-text" data-type="paragraph">View Tasks, Events & Appointments<br></p><a class="btn btn-primary" href="/your-calendar">Go to Your Calendar</a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4 mb-3 mb-lg-0">
                <div class="card">
                    <div class="card-body text-center">
                        <h5 class="card-text" data-type="paragraph"><i class="material-icons md-48">cloud_upload</i></h5>
                        <h5 class="card-title" data-type="header">File/Logo Upload</h5>
                        <p class="card-text" data-type="paragraph"><small class="text-muted">Upload your logo files & supporting files here</small></p><a class="btn btn-primary" href="/your-files">Go to File/Logo Upload</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<div class="row feature-section mb-4">
    <div class="col-12">
        <div class="row">
            <div class="col-12 col-lg-4 mb-3 mb-lg-0">
                <div class="card">
                    <div class="card-body text-center">
                        <h5 class="card-text" data-type="paragraph"><i class="material-icons md-48">attach_money</i></h5>
                        <h5 class="card-title" data-type="header">Invoices / Payments</h5>
                        <p class="card-text" data-type="paragraph"><small class="text-muted">Your Invoices & Payments</small></p><a class="btn btn-primary" href="/invoices/admin">Go to Invoices / Payments</a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4 mb-3 mb-lg-0">
                <div class="card">
                    <div class="card-body text-center">
                        <h5 class="card-text" data-type="paragraph"><i class="material-icons md-48">security</i></h5>
                        <h5 class="card-title" data-type="header">Submit Login Credentials</h5>
                        <p class="card-text" data-type="paragraph"><small class="text-muted">Securely send/update your auxiliary account credentials</small></p><a class="btn btn-primary" href="link_to_portal_page_here">Go to Credentials</a>
                    </div>
                </div>
            </div>
            <div class="col-12 col-lg-4 mb-3 mb-lg-0">
                <div class="card">
                    <div class="card-body text-center">
                        <h5 class="card-text" data-type="paragraph"><i class="material-icons md-48">report</i></h5>
                        <h5 class="card-title" data-type="header">Emergency</h5>
                        <p class="card-text" data-type="paragraph"><small class="text-muted">If you need Emergency Response related to your Project</small></p><a class="btn btn-primary" href="/message/new">Emergency</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Step 2

Check the box below the editor that says Enable Advanced Features and copy/paste the CSS provided below.

.client-page a {
    color: white !important;
    text-decoration: none !important;
}

Step 3

Replace the placeholders with your own as needed, and modify text as needed

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.

Still need help? Contact Us Contact Us