Cool Patterns
Last Updated: 06/25/2024
Back to Mockup DirectoryCheckbox Examples
- CAS "Make Request" Screen - With "I am filling out this request on behalf of an instructor" checkbox that when checked, toggles open Instructor Name fields along with note alert
- IDEM Ecommerce Addresses Screen (BS3) - With "Same as shipping address" checkbox that when checked, toggles close the Billing Address fields
- Polaris User Feedback Form with Checkbox Showing Hidden Div - With "Please follow up with me" checkbox that when checked, toggles open contact fields LABS Bucket
Radio Button Examples
- Form Test with Radio Buttons Dynamically Showing Checkbox Section All With Validation - V1 - "No" radio button default
- Form Test with Radio Buttons Dynamically Showing Checkbox Section All With Validation - V2 - "Yes" radio button default
- Form Test with Radio Buttons Dynamically Showing Checkbox Section All With Validation - V3 - "Other" field always exposed and optional; Validation that at least one checkbox OR input in text field
- Form Test with Radio Buttons Dynamically Showing Checkbox Section All With Validation - V4 - Same as V3 but with "switch" designDelivered
- Polaris User Feedback Form with Radio Button Dynamic Display - When "System Bug" or "Export/Email/Print" radio button options are checked, then a div is shown, otherwise that div is hidden LABS Bucket
- Radio Button Card Design - IDEM "Choose Shipping" Fields - Note that the live site is accessible (fully), and the mockups are too (at least in WAVE), but there may be issues with the mockup accessibility that haven't been updated
- Radio Button Card Design - ACW-IDEM Choose Purchase Option Design
Modal Examples
- Older Salesforce Preference Center Design with "Double-Modal" Functionality - Click on the "Opt Out From All of These Emails" link at the bottom, then "Confirm" on the first modal to then navigate to a second modal LABS Bucket
Accordion Examples
Adding and Removing Controlled Select List with Ability to Add Other Topic to List
Adding and Removing Tags Example
Adding and Removing Free-Text Input Fields Example
Attach Screenshots Example (Responsive)
Isotope Examples
- Polaris "Explore All Notifications" Isotope Screen - With active sort option only showing fontawesome icon scriptLABS Bucket
- Salesforce Email Preferences Screen LABS Bucket
Pagination-Related Examples
- Polaris "Cited By" Fullscreen Modal with Pagination Controls - Using Flexbox to responsively order the "Results per page", results count, and pagination controlsLABS Bucket
Feature Tour Examples
- Highlighting New Features - POC - Version 3 - Top, Dismissable Alert on Small Devices - Bootstrap Tourist on Large Devices - Note that on devices with a viewport width <767px, a top, dismissable alert will be displayed, while on devices with a viewport width >767px, the Bootstrap Tourist will be initiated and the top-right "restart tour" info icon will be displayed. When testing this on a browser, you will have to clear out the Local Storage for the Bootstrap Tourist at each breakpoint when checking, as there is a media query approach to initializing the Bootstrap Tourist script only on larger devices. LABS Bucket
- Highlighting New Features - POC - Version 7 - New Features Carousel Modal - Highlighting New Features - POC - Version 7 - New Features Carousel Modal LABS Bucket
Validation Examples
Ringold Patterns
Datatables
- Public Commenting System Admin Portal - Welcome Page - Datatable with Month-Day-Year sorting (due to moment.js integration) - Responsive Bootstrap 5 example (Bootstrap 5 datatable CSS with PL2.0)
- Participating Programs (GradStudy) - AJAX/JSON driven datatable with "Degree Level" dropdown filter, sortable columns, "Reset All" link; (Bootstrap 4 datatable CSS with PL1.0)
- Datatable within page (Polaris) - AJAX/JSON driven datatable with 2 columns not sortable, moment.js month and year sorting, "Unfollow" button in an "Actions" column that launches a modal to unfollow a journal row which then deletes that rows; (Bootstrap 4 datatable CSS with PL1.0)
- Datatable within page (Polaris) - Shows datatable with numerical date, all columns sortable, datepicker, "Content Type" dropdown filter, tools (Copy, CSV, Excel, Print, Column Visibility), "Reset All" link; (Bootstrap 4 datatable CSS with PL1.0)
- Full-screen Modal with Datatable (Polaris) - Click on the "View All Updates" button to launch the modal; Shows datatable with numerical date, all columns sortable, datepicker, "Content Type" dropdown filter, tools (Copy, CSV, Excel, Print, Column Visibility), "Reset All" (might not be working within modal); (Bootstrap 4 datatable CSS with PL1.0)
Miscellaneous Patterns
- Polaris Date Picker Example - Example date picker with day, month, and year LABS Bucket
- "Tree List" Design for Year Directory Listing - Click on the "Past Notifications List" LABS Bucket
- Salesforce Email Preferences Center - Floating "Save" Button - Top-right floating "Save" button on desktop and centered bottom button on mobile LABS Bucket