Accordions
This is an example of a open section
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.This is an example of a open section
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.This is an example of a open section
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.Badge
Breadcrumb
Default
With an icon
Buttons
Types
Variants
States
Colours
Colours Outline
Button Sizes
Button Group
Cards
Cards with icon
Cards with image
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Horizontal Card
Card title
Some quick example text to build on the card title and make up the bulk of the card's content.
Callouts
Carousel
Checkbox
Checkbox Group (Stacked)
Checkbox Group (Stacked)
Checkbox Group (Inline)
Checkbox Group (Inline)
Checkbox (Switches)
Hero
Hero image with tagline
Hero image with Search Bar
Hyperlink
Hyperlink normal
Bottom border (underline) with 20% opacity of primary color
Link item 1Hyperlink hover
Bottom border (underline) with 100% opacity of primary color
Link item 1 (hover)Hyperlink to open external link
Bottom border (underline) with 20% opacity of primary color and diagonal up arrow icon
Link item with an external linkHyperlink with tooltip
Bottom border (underline) with 20% opacity of primary color and tooltip is displayed on top of the link
Link item with tooltip on topIcons
Sizes
1x
2x
3x
Generic icons
Navigation icons
Action icons
Loaders
Modals
Sizes
Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes triggers on at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
Notifications/Alerts
Confirmation Dialogs
Full Width Notifications
Pagination
Popovers
Bottom
Lorem Ipsum is simply dummy text of the printing an d typesetting industry. Lorem Ipsum has been the industry's standard dummy bottom - left aligned Title Lorem Ipsum is simply dummy text of the printing an d typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into bottom - center aligned Title Lorem Ipsum is simply dummy text of the printing an d typesetting industry. Lorem Ipsum has been the industry's standard dummy electronic typesetting, essentially unchanged. It was popularised in 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and recently with desktop bottom - right aligned Title Lorem Ipsum is simply dummy text of the printing an d typesetting industry. Lorem Ipsum has been the industry's standard dummy software like Aldus PageMaker including versions of Lorem Ipsum
Radio Buttons
Radio Group (Stacked)
Radio Group with error (Stacked)
Radio Group (Inline)
Radio Group with error (Inline)
Toggle Group (Inline)
Range Slider
Scroll to Top
This is to demonstrate "scroll to top" button that becomes visible when the user starts to scroll the page.
A button that looks like appears at botttom right corner. Javascript is required for this component.
Search box with filters
Tabs
Horizontal Tabs
Tab 1 Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Tab 2 Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Tab 3 Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Horizontal Boxed Tabs with Icon
Vertical Tabs
Tab 1 Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Tab 2 Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Tab 3 Content
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Vertical Boxed Tabs
Default table
| Table Header | Table Header | Table Header | Table Header |
|---|---|---|---|
| Text goes here | Text goes here | Text goes here | Text goes here |
| Text goes here | Text goes here | Text goes here | Text goes here |
| Text goes here | Text goes here | Text goes here | Text goes here |
| Mediation |
Conciliation |
Neutral evaluation |
Arbitration |
Expert determination |
|
|---|---|---|---|---|---|
Role of the third party |
Guides parties to find a solution that meets their concerns |
Guides parties and proposes solutions |
Assesses the likelihood of success at trial |
Decides on an outcome after each party presents their case |
Has expert knowledge and gives an opinion that could be a basis for agreement |
Cost |
Low cost (Example: mediation is free for most cases in the State Courts except for mediation of a District Court case, which generally costs $250) |
Low cost (Example: conciliation is free for most cases in the State Courts except for conciliation of a District Court case, which generally costs $250) |
Lower than a trial, but higher than mediation (Example: neutral evaluation is free for most cases in the State Courts except for neutral evaluation of a District Court case, which generally costs $250. There may be other legal fees from your lawyer.) |
Higher than mediation. Can sometimes be lower than a trial. The arbitrator's fees must be paid by the parties. |
Generally lower than a trial, but higher than mediation. The expert's fees must be paid by the parties. |
Speed |
Fast |
Fast |
Faster than a trial, but slower than mediation |
Can be faster than a trial, but generally slower than mediation |
Faster than a trial, but slower than mediation |
Allows control over the outcome |
Yes |
Yes |
Yes |
No |
Yes. The expert's opinion does not determine the parties’ dispute unless the parties agree to it. |
You will know the merits of your case |
No |
No |
Yes |
Yes |
Yes |
Requires a lawyer |
No |
No |
Yes |
No |
No |
Involves a technical expert's opinion |
No |
No |
No |
No |
Yes |
Offered by the court |
Yes (State Courts) |
Yes (State Courts) |
Yes (State Courts) |
No |
No |
Static table
DataTables
| Name | Position | Office | Age | Start date | Salary |
|---|---|---|---|---|---|
| Tiger Nixon | System Architect | Edinburgh | 61 | 2011/04/25 | $320,800 |
| Garrett Winters | Accountant | Tokyo | 63 | 2011/07/25 | $170,750 |
| Ashton Cox | Junior Technical Author | San Francisco | 66 | 2009/01/12 | $86,000 |
| Cedric Kelly | Senior Javascript Developer | Edinburgh | 22 | 2012/03/29 | $433,060 |
| Airi Satou | Accountant | Tokyo | 33 | 2008/11/28 | $162,700 |
| Brielle Williamson | Integration Specialist | New York | 61 | 2012/12/02 | $372,000 |
| Herrod Chandler | Sales Assistant | San Francisco | 59 | 2012/08/06 | $137,500 |
| Rhona Davidson | Integration Specialist | Tokyo | 55 | 2010/10/14 | $327,900 |
| Colleen Hurst | Javascript Developer | San Francisco | 39 | 2009/09/15 | $205,500 |
| Sonya Frost | Software Engineer | Edinburgh | 23 | 2008/12/13 | $103,600 |
| Jena Gaines | Office Manager | London | 30 | 2008/12/19 | $90,560 |
| Quinn Flynn | Support Lead | Edinburgh | 22 | 2013/03/03 | $342,000 |
| Charde Marshall | Regional Director | San Francisco | 36 | 2008/10/16 | $470,600 |
| Haley Kennedy | Senior Marketing Designer | London | 43 | 2012/12/18 | $313,500 |
| Tatyana Fitzpatrick | Regional Director | London | 19 | 2010/03/17 | $385,750 |
| Michael Silva | Marketing Designer | London | 66 | 2012/11/27 | $198,500 |
| Paul Byrd | Chief Financial Officer (CFO) | New York | 64 | 2010/06/09 | $725,000 |
| Gloria Little | Systems Administrator | New York | 59 | 2009/04/10 | $237,500 |
| Bradley Greer | Software Engineer | London | 41 | 2012/10/13 | $132,000 |
| Dai Rios | Personnel Lead | Edinburgh | 35 | 2012/09/26 | $217,500 |
| Jenette Caldwell | Development Lead | New York | 30 | 2011/09/03 | $345,000 |
| Yuri Berry | Chief Marketing Officer (CMO) | New York | 40 | 2009/06/25 | $675,000 |
| Caesar Vance | Pre-Sales Support | New York | 21 | 2011/12/12 | $106,450 |
| Doris Wilder | Sales Assistant | Sydney | 23 | 2010/09/20 | $85,600 |
| Angelica Ramos | Chief Executive Officer (CEO) | London | 47 | 2009/10/09 | $1,200,000 |
| Gavin Joyce | Developer | Edinburgh | 42 | 2010/12/22 | $92,575 |
| Jennifer Chang | Regional Director | Singapore | 28 | 2010/11/14 | $357,650 |
| Brenden Wagner | Software Engineer | San Francisco | 28 | 2011/06/07 | $206,850 |
| Fiona Green | Chief Operating Officer (COO) | San Francisco | 48 | 2010/03/11 | $850,000 |
| Shou Itou | Regional Marketing | Tokyo | 20 | 2011/08/14 | $163,000 |
| Michelle House | Integration Specialist | Sydney | 37 | 2011/06/02 | $95,400 |
| Suki Burks | Developer | London | 53 | 2009/10/22 | $114,500 |
| Prescott Bartlett | Technical Author | London | 27 | 2011/05/07 | $145,000 |
| Gavin Cortez | Team Leader | San Francisco | 22 | 2008/10/26 | $235,500 |
| Martena Mccray | Post-Sales support | Edinburgh | 46 | 2011/03/09 | $324,050 |
| Unity Butler | Marketing Designer | San Francisco | 47 | 2009/12/09 | $85,675 |
| Howard Hatfield | Office Manager | San Francisco | 51 | 2008/12/16 | $164,500 |
| Hope Fuentes | Secretary | San Francisco | 41 | 2010/02/12 | $109,850 |
| Vivian Harrell | Financial Controller | San Francisco | 62 | 2009/02/14 | $452,500 |
| Timothy Mooney | Office Manager | London | 37 | 2008/12/11 | $136,200 |
| Jackson Bradshaw | Director | New York | 65 | 2008/09/26 | $645,750 |
| Olivia Liang | Support Engineer | Singapore | 64 | 2011/02/03 | $234,500 |
| Bruno Nash | Software Engineer | London | 38 | 2011/05/03 | $163,500 |
| Sakura Yamamoto | Support Engineer | Tokyo | 37 | 2009/08/19 | $139,575 |
| Thor Walton | Developer | New York | 61 | 2013/08/11 | $98,540 |
| Finn Camacho | Support Engineer | San Francisco | 47 | 2009/07/07 | $87,500 |
| Serge Baldwin | Data Coordinator | Singapore | 64 | 2012/04/09 | $138,575 |
| Zenaida Frank | Software Engineer | New York | 63 | 2010/01/04 | $125,250 |
| Zorita Serrano | Software Engineer | San Francisco | 56 | 2012/06/01 | $115,000 |
| Jennifer Acosta | Junior Javascript Developer | Edinburgh | 43 | 2013/02/01 | $75,650 |
| Cara Stevens | Sales Assistant | New York | 46 | 2011/12/06 | $145,600 |
| Hermione Butler | Regional Director | London | 47 | 2011/03/21 | $356,250 |
| Lael Greer | Systems Administrator | London | 21 | 2009/02/27 | $103,500 |
| Jonas Alexander | Developer | San Francisco | 30 | 2010/07/14 | $86,500 |
| Shad Decker | Regional Director | Edinburgh | 51 | 2008/11/13 | $183,000 |
| Michael Bruce | Javascript Developer | Singapore | 29 | 2011/06/27 | $183,000 |
| Donna Snider | Customer Support | New York | 27 | 2011/01/25 | $112,000 |
Tags
Text Area
Default form
Horizontal form
Text Input
Timeline
-
Timeline title
Card title
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-
Timeline title
Card title
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
-
Timeline title
Card title
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Tool Tips
It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently Tooltip Item with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Typography
Desktop
| Style | Size | Line Height | Weight | Example | Usage |
|---|---|---|---|---|---|
| Uber | 52px | 62px | Bold | Judiciary Design System | Hero |
| 4XL | 57px | 68px | Bold | Header 1 |
H1 |
| 3XL | 35px | 42px | Bold | Header 2 |
H2 |
| 2XL | 24px | 29px | Bold | Header 3 |
H3 |
| XL | 21px | 28px | Bold | Header 4 |
H4 |
| L | 18px | 28px | Bold | Header 5 |
H5 |
| M | 18px | 28px | Normal | Paragraph |
Body |
| S | 15px | 22px | Bold | Small Bold | Breadcrumb, Footnotes |
| S | 15px | 22px | Normal | Small Regular | Breadcrumb, Footnotes, Helper text |
| XS | 12px | 18px | Bold | XS Bold | Low level headings |
| XS | 12px | 18px | Normal | XS Regular | Meta data |
| XXS | 11px | 16px | Medium | XXS Regular | Low level headings on Card |
| XXXS | 9px | 13px | Normal | XXXS Regular | Super Script |
Mobile
| Style | Size | Line Height | Weight | Example | Usage |
|---|---|---|---|---|---|
| Uber | 40px | 48px | Bold | Judiciary Design System | Hero |
| 4XL | 39px | 47x | Bold | Header 1 |
H1 |
| 3XL | 31px | 42px | Bold | Header 2 |
H2 |
| 2XL | 25px | 30px | Bold | Header 3 |
H3 |
| XL | 21px | 28px | Bold | Header 4 |
H4 |
| L | 18px | 28px | Bold | Header 5 |
H5 |
| M | 16px | 26px | Normal | Paragraph |
Body |