Providing access to vital court information for the court's justice partners.
Providing court information to news agencies and reporters.
[body]
[IMAGE AS BG]
This is a jumbotron for below the navbar (not included). It includes placement for a right-aligned responsive image that I suggest you keep the body text limited to 6 lines before the image distorts. Images disappear on mobile devices.
[title]
[body]
[title]
[IMAGE AS BG]
You can change the col from col-12 to any other column size like col-md-8
when it is left rail but empty to the right.
[basic 1 column layout]
[left column]
[right column]
This is a two column with a topper. Topper is a col-md-7 and the main body below is
col-md-8 which then contains two col-md-6 columns.
[top content inside col-md-8 col-lg-7]
[left col]
[right col]
.card classes from Bootstrap with a bit of custom styling.
nav element with flexbox styling to space out the previous and next buttons.
Some sample text.
Some sample text.
| General Orders | General orders are formal directives issued by a court to all judges, attorneys, and court staff, outlining procedures, rules, or policies that apply to specific case types or court operations. | 
|
| Mediator Profile Update | Mediators Use Only: Submit the online form to request updates to your MVP profile details. |
|
General Orders General orders are formal directives issued by a court to all judges, attorneys, and court staff, outlining procedures, rules, or policies that apply to specific case types or court operations. Mediator Profile Update Mediators Use Only: Submit the online form to request updates to your MVP profile details. 
These are cards that swaps div for a. It uses an automatic height that
makes all
the tiles on the row with the class h-100 match height, but it is suggested in the
column that
wraps each one to have an extra padding on the bottom like pb-4.
.card classes from Bootstrap with a bit of custom styling.
ADA-compliant facilities with wheelchair access and accommodations.
View Details >
Accessibility
Services
ADA-compliant facilities with wheelchair access and accommodations.
View Details >
Additional Information
- Security screening required for all visitors. Allow extra time for entry.
- No weapons, recording devices, or cameras allowed without prior authorization.
- Public Wi-Fi available throughout the courthouse.
- Food and beverages are not permitted in courtrooms.
Courthouse
Airport Courthouse
Floor
7
Room Number
701
DEPS
Yes
Telephone
(310)
725-3096
.alert-danger but it follows the
standard Bootstrap alert
structure for colors. There is jQuery used to make these dismissable on clicking the "x" when we
add the
class .alert-dismissible rounded.
[alert body]
Section title
Try to use type="submit" or type="reset" because the CSS has them defined,
but classes work too. Remove the text if you want icons only. We use FontAwesome 6.x. In a few casses we
only use an icon and no text.
Icons only on mobile, they are inline with a flex behaviour
This is a link that requires an ARIA label for screen readers to know that a PDF file is present.
You can change the border color with a class like w3-bd-court-primary because I added an
!important hack to the CSS for borders.
I'm a callout
JS and jQuery versions to catch broken images and swap for a place holder that are in the DOM, not
from CSS or as a background as it looks for the <img> element.
*note: The url path comes from the JavaScript's file location.
*note2: We have not included this yet.
document.addEventListener('error', function(event) {
if (event.target.tagName.toLowerCase() === 'img') {
event.target.src = '../img/img404.png'; //note the url path to the image is relative to the JS file
// Optional: Remove listener to prevent loops
event.target.onerror = null;
}
}, true); // Use 'true' for capture phase to catch event
$("img").each(function () {
if (
(typeof this.naturalWidth != "undefined" &&
this.naturalWidth == 0) ||
this.readyState == "uninitialized"
) {
//note the url path to the image is relative to the JS file
$(this).attr(
"src",
"../img/img404.png"
);
// note if you want to tell screen readers the image is broken with an alt otherwise remove this
$(this).attr(
"alt",
"this image is missing or cannot be displayed"
);
}
});
It will grab a preview image from opengraph or favicon unless you specify one through a method that changes the title in the description to the name of the image file with dropdown (undesirable). Make sure to read the API specification
This also includes a share icon from FontAwesome.This leverages the universal share menu, it is not customizable for options.
const shareLinkBtn = document.getElementById('share-link-btn');
shareLinkBtn.addEventListener('click', async () => {
try {
const url = document.location.href;;
const share = await navigator.share({
title: document.title,
text: "text doesn't work with the current API but it is req in the spec so we include it here, leave empty double parentheses",
url: document.location.href,
});
console.log('Shared successfully:');
} catch (error) {
console.error('Error sharing content:', error);
}
});
This allows you to add to Google, Outlook, Yahoo calendars but Apple nneeds a file to be created as
.ics as a JS Blob. There is a site that does mock-ups for
multiple formats: Better formatter or link. All the info passed here is as placeholder data, you would need to replace it with dynamic data. Example: [title] [description] [location]
NOTE: OutLook/Office 365 are broken by MS. Fix timeline is unknown but the iCal for Apple should work for those cases.
Apple version uses \n with space before and after it to escape lines to prevent wrapping
Description with .code
[code]