Slide panel
Keep filters, notifications, and much more in a drawer that can be triggered by a button press.
Anatomy
- Label H4
- Body
- Title H5
- Body
- Close Panel
- Badge
- Card
Example
Coded example
Notifications
November 9, 2021
Products
PAX devices are back!
In accordance with the guidance from Office of Cybersecurity and Critical Infrastructure Protection (“OCCIP”) and the U.S. Department of the Treasury, Payroc has resumed a risk-based approach to distribution of PAX devices.
At this time, Payroc has not been contacted by any government agency to cease deployment of, or replace, any PAX terminals. Payroc will continue to monitor the situation closely and provide updates or take additional actions, as necessary. Please connect with your relationship manager at [email protected], or the Product Sales Team at [email protected] if you have any questions or need further information.
We will continue to keep you updated through Business Updates and on Partner Engage.
October 26, 2021
Products
PAX terminals
It is the decision of Payroc to shut down deployment of the PAX family of devices. Regrettably, our Consumer Choice product has been temporarily suspended due to device issues and investigations on-going at PAX, as well.
Please connect with your relationship manager at [email protected], or the Product Sales Team at [email protected] if you have additional questions involving PAX equipment or Consumer Choice.
We will continue to keep you updated.
October 25, 2021
Products
Clover equipment
TASQ is currently out of Clover Solo's, currently no ETA on shipment.
May 5, 2020
Support and Training
Agreement Express training
We have added our Agreement Express training under information center. You will need to enter your first name, last name and email to hear the recording.
Filters
Code snippet
<div class="btn-group" role="group" aria-label="Basic example">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalSlide">Show Notifications</button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target="#FiltersSlide"> View Filters <i class="fa-regular fa-sliders ml-9"></i></button>
</div>
<!-- Notifications panel -->
<div class="modal fade slide-modal" id="modalSlide" tabindex="-1" role="dialog" aria-labelledby="modalSlide" aria-hidden="true">
<div class="modal-dialog modal-dialog-slideout" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Notifications</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="fa-solid fa-xmark"></i>
<span class="keyboard-text">esc</span>
</span>
</button>
</div>
<div class="modal-body">
<div class="card notification-card">
<div class="card-body">
<div class="notification-header">
<div class="notification-date">November 9, 2021</div>
<div class="notification-category">
<span class="badge badge-pill badge-secondary">Products</span>
</div>
</div>
<div class="clearfix"></div>
<h5 class="card-title mt-18">PAX devices are back!</h5>
<div class="card-text">
<p>In accordance with the guidance from Office of Cybersecurity and Critical Infrastructure Protection (“OCCIP”) and the U.S. Department of the Treasury, Payroc has resumed a risk-based approach to distribution of PAX devices.</p>
<p>At this time, Payroc has not been contacted by any government agency to cease deployment of, or replace, any PAX terminals. Payroc will continue to monitor the situation closely and provide updates or take additional actions, as necessary. Please connect with your relationship manager at [email protected], or the Product Sales Team at [email protected] if you have any questions or need further information.</p>
<p>We will continue to keep you updated through Business Updates and on Partner Engage.</p>
</div>
</div>
</div>
<div class="card notification-card">
<div class="card-body">
<div class="notification-header">
<div class="notification-date">October 26, 2021</div>
<div class="notification-category">
<span class="badge badge-pill badge-secondary">Products</span>
</div>
</div>
<div class="clearfix"></div>
<h5 class="card-title mt-18">PAX terminals</h5>
<div class="card-text">
<p>It is the decision of Payroc to shut down deployment of the PAX family of devices. Regrettably, our Consumer Choice product has been temporarily suspended due to device issues and investigations on-going at PAX, as well.</p>
<p>Please connect with your relationship manager at [email protected], or the Product Sales Team at [email protected] if you have additional questions involving PAX equipment or Consumer Choice.</p>
<p>We will continue to keep you updated.</p>
</div>
</div>
</div>
<div class="card notification-card">
<div class="card-body">
<div class="notification-header">
<div class="notification-date">October 25, 2021</div>
<div class="notification-category">
<span class="badge badge-pill badge-secondary">Products</span>
</div>
</div>
<div class="clearfix"></div>
<h5 class="card-title mt-18">Clover equipment</h5>
<div class="card-text">
<p>TASQ is currently out of Clover Solo's, currently no ETA on shipment.</p>
</div>
</div>
</div>
<div class="card notification-card">
<div class="card-body">
<div class="notification-header">
<div class="notification-date">May 5, 2020</div>
<div class="notification-category">
<span class="badge badge-pill badge-secondary">Support and Training</span>
</div>
</div>
<div class="clearfix"></div>
<h5 class="card-title mt-18">Agreement Express training</h5>
<div class="card-text">
<p>We have added our Agreement Express training under information center. You will need to enter your first name, last name and email to hear the recording.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Notifications panel -->
<!-- Filters Panel -->
<div class="modal fade slide-modal filter-modal" id="FiltersSlide" tabindex="-1" role="dialog" aria-labelledby="FiltersSlide" aria-hidden="true">
<div class="modal-dialog modal-dialog-slideout" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Filters</h4>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">
<i class="fa-solid fa-xmark"></i>
<span class="keyboard-text">esc</span>
</span>
</button>
</div>
<div class="modal-body">
<form>
<div class="accordion mb-36" id="accordionExample">
<div class="card mb-18">
<div class="card-header" id="headingOne">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
User details<i class="fa-light fa-angle-down"></i>
</button>
</h2>
</div>
<div id="collapseOne" class="collapse" aria-labelledby="headingOne">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group mb-48">
<label for="firstName">First name</label>
<input type="text" class="form-control" id="firstName" aria-describedby="firstName" required>
<div class="invalid-feedback">
<i class="fa-regular fa-circle-xmark"></i> Please provide a valid email address.
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-48">
<label for="lastName">Last name</label>
<input type="text" class="form-control" id="lastName" aria-describedby="lastName" required>
<div class="invalid-feedback">
<i class="fa-regular fa-circle-xmark"></i> Please provide a valid email address.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card mb-18">
<div class="card-header" id="headingTwo">
<h2 class="mb-0">
<button class="btn btn-link btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Company details<i class="fa-light fa-angle-down"></i>
</button>
</h2>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo">
<div class="card-body">
<div class="row">
<div class="col-md-6">
<div class="form-group mb-48">
<label for="salesCompany">Sales company</label>
<div class="select-wrapper">
<select class="form-control" id="chargeType">
<option>All companies</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group mb-48">
<label for="salesRep">Sales rep</label>
<div class="select-wrapper">
<select class="form-control" id="chargeType">
<option>All reps</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
</div>
<div class="col-md-12">
<div class="form-group mb-9">
<label for="salesRep">Merchant company</label>
<div class="select-wrapper">
<select class="form-control" id="chargeType">
<option>All companies</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-check mb-48">
<input class="form-check-input" type="checkbox" value="option1" id="defaultCheck1">
<label class="form-check-label" for="defaultCheck1">
Include terminated merchants
</label>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<button type="submit" class="btn btn-primary">Update Results</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- Filters panel -->
None required
Figma prototype
Usage guide
Dos and don'ts
Use it to display an action to focus a user's attention for example notifications.
Make sure it loads in from the right.
The close button is clearly displayed to allow a user to dissmiss it.
If it's not prompting an action, don't use it.
Over use this component.
Use it as a menu or modal.