Common components
The following demos include buttons, icons, form elements, form messages, accordion, accordion with links, side navigation, side nav with 4 levels, cards, cards with stats, content blocks, pagination, progress indicator, callout, link list, text list, tags (pills), modal (dialog), table, global alert and notification.
Icons
Material icons which replace text such as 'search', 'close' and 'arrow_forward':
standalone (large by default)
arrow
file
drag
very small
small
medium
extra large
extra large 2x
animation
rotate_right
Form elements
Accordion
simple accordion
Iséliȝe, sah ic Dubrovnik ær þat Daenerys Targaryen and hire drake hit fordiden. Ic sah þe sweȝ-pleȝe "Hær" ȝestren-éfne. Þe wíf behinden mé sang þurhút and lúde. "Gód Lafdiȝ, ic beséce þé - linn þín sáng. Ic ne ȝald ehtetiȝ dollars þé tó héren." Mín áne réw - þat ic þise wordes eft þohte, in þe train.
Þe NBN-man cumeþ, and brekeþ úre gas-pípe. Is hit wird þat þe lateste niht þá maȝ ic mín iscot-writ online asenden, is ék Alre Halgen Éfen?
Hér in Néwe Súþ-Wales, nú forbernþ þe súþerne særime, fram Nowra tó þe marce of Victoria, firlen twá hundred and twentiȝ míles. Mín wíf and ic curen snoterlíce úre háliȝdaȝ-stede at Tuncurry on þe norþerne særime.
Þohhweþre, drifen úre fréndes Raȝnald and Meregrot súþward tó Mallacoota, on þe æsterne særime of Victoria. Hí curen unsnoterlíce. Án micel wáld-fír snáþ alle waȝn-weȝes tó þe lítele túne.
On þe folgende daȝe, nælæcte þe fír and flugen þe cesterwares tó þe strande. Maniȝe húses wæren fordón. After tweȝen daȝes, cóm án here-scip, þat folk tó aredden.
Úre fréndes Raȝnald and Meregrot athwurfen isúnde fram þe wáld-fír at Mallacoota. Wé métten hem at Gringos - án lítel Mexikisc rerd-hús néh here háme.
Hí tálden ús þat þe síþ bí here-scipe fram Mallacoota tó Westerne Hafen néh Melburn, lastede þritiȝ stúndes.
simple accordion using details
Good Scheme: ICT Services
Iséliȝe, sah ic Dubrovnik ær þat Daenerys Targaryen and hire drake hit fordiden. Ic sah þe sweȝ-pleȝe "Hær" ȝestren-éfne. Þe wíf behinden mé sang þurhút and lúde. "Gód Lafdiȝ, ic beséce þé - linn þín sáng. Ic ne ȝald ehtetiȝ dollars þé tó héren." Mín áne réw - þat ic þise wordes eft þohte, in þe train.
Dodgy Scheme: Akme Developments
Þe NBN-man cumeþ, and brekeþ úre gas-pípe. Is hit wird þat þe lateste niht þá maȝ ic mín iscot-writ online asenden, is ék Alre Halgen Éfen?
Ponzi scheme: Steerclear Financial Services Pty Ltd
Hér in Néwe Súþ-Wales, nú forbernþ þe súþerne særime, fram Nowra tó þe marce of Victoria, firlen twá hundred and twentiȝ míles. Mín wíf and ic curen snoterlíce úre háliȝdaȝ-stede at Tuncurry on þe norþerne særime.
Þohhweþre, drifen úre fréndes Raȝnald and Meregrot súþward tó Mallacoota, on þe æsterne særime of Victoria. Hí curen unsnoterlíce. Án micel wáld-fír snáþ alle waȝn-weȝes tó þe lítele túne.
On þe folgende daȝe, nælæcte þe fír and flugen þe cesterwares tó þe strande. Maniȝe húses wæren fordón. After tweȝen daȝes, cóm án here-scip, þat folk tó aredden.
Mad scheme: Frenetic Services Pty Ltd
Úre fréndes Raȝnald and Meregrot athwurfen isúnde fram þe wáld-fír at Mallacoota. Wé métten hem at Gringos - án lítel Mexikisc rerd-hús néh here háme.
Hí tálden ús þat þe síþ bí here-scipe fram Mallacoota tó Westerne Hafen néh Melburn, lastede þritiȝ stúndes.
accordion with 'expand/collapse all' toggles
Iséliȝe, sah ic Dubrovnik ær þat Daenerys Targaryen and hire drake hit fordiden. Ic sah þe sweȝ-pleȝe "Hær" ȝestren-éfne. Þe wíf behinden mé sang þurhút and lúde. "Gód Lafdiȝ, ic beséce þé - linn þín sáng. Ic ne ȝald ehtetiȝ dollars þé tó héren." Mín áne réw - þat ic þise wordes eft þohte, in þe train.
Þe NBN-man cumeþ, and brekeþ úre gas-pípe. Is hit wird þat þe lateste niht þá maȝ ic mín iscot-writ online asenden, is ék Alre Halgen Éfen?
Hér in Néwe Súþ-Wales, nú forbernþ þe súþerne særime, fram Nowra tó þe marce of Victoria, firlen twá hundred and twentiȝ míles. Mín wíf and ic curen snoterlíce úre háliȝdaȝ-stede at Tuncurry on þe norþerne særime.
Þohhweþre, drifen úre fréndes Raȝnald and Meregrot súþward tó Mallacoota, on þe æsterne særime of Victoria. Hí curen unsnoterlíce. Án micel wáld-fír snáþ alle waȝn-weȝes tó þe lítele túne.
On þe folgende daȝe, nælæcte þe fír and flugen þe cesterwares tó þe strande. Maniȝe húses wæren fordón. After tweȝen daȝes, cóm án here-scip, þat folk tó aredden.
Úre fréndes Raȝnald and Meregrot athwurfen isúnde fram þe wáld-fír at Mallacoota. Wé métten hem at Gringos - án lítel Mexikisc rerd-hús néh here háme.
Hí tálden ús þat þe síþ bí here-scipe fram Mallacoota tó Westerne Hafen néh Melburn, lastede þritiȝ stúndes.
simple accordion with link at top of content
Note that for accessibility reasons, an accordion bar (trigger) should not contain a link. Instead shift a key link to the top of the initially hidden content.info Most users expect that clicking anywhere within an accordion bar (trigger) will show or hide the associated content. Taking the user to a different page would be unexpected and disorienting.
SCM0030 - Prequalification Scheme: ICT Services
SCM0030 - Prequalification Scheme: ICT Services open_in_new
Professional services
- (A) Enterprise & business architecture
- (B) Information architecture
- (C1) Solution architecture
- (A2) Data centre services
Data centre
- (E) Data centre services
End user computing
- (B) Computing installation, configuration & maintenance
- (B) Ict strategy
- (B) Network equipment installation, configuration, maintenance, delivery as a service
- (C) Network operations, delivery as a service
Other ICT services
- (E1) Mobile devices, delivery as a service
- (F) Telephony, delivery as a service
ICT programs
- (A7) Change management
Server management
- (E3) Server installation, configuration, maintenance, delivery as a service
SCM0040 - Pyramid Scheme: Best to avoid
SCM0040 - Pyramid Scheme: Best to avoid open_in_new
Bottom of harbour services
- Trawling and cement shoe services
- Pollywaffles
Top of tower services
- Ropeless bungee jumping
- Base jumping without parachute
- Over the railing you go services
XP5000 - Sensory Deprivator: Feel it to believe it
XP5000 - Sensory Deprivator: Feel nothing to believe it open_in_new
Capability group 1
- capability.title 1
- capability.title 2
- capability.title 3
- capability.title 4
- capability.title 5
- capability.title 6
- capability.title 7
- capability.title 8
Capability group 2
- capability.title 1
- capability.title 2
- capability.title 3
- capability.title 4
- capability.title 5
- capability.title 6
- capability.title 7
- capability.title 8
Pagination
Progress indicator
Callout
The Digital Driver's License trial
Once we launch statewide, the Digital Drivers License will become legal for use across NSW
Link list
requires a section (or div) wrapper with class nsw-link-list
Details (def) list
requires a definition list ('dl') with class details
- Final cost inc GST
- $1,500.00
- Effective date
- 23/11/2024
- End date
- 23/11/2024
Longer definition term (.dt-200):
- Final cost inc GST
- $1,500.00
- Effective date
- 23/11/2024
- Contract end date
- 23/11/2024
Striped table-style (.striped.dt-200):
- Final cost inc GST
- $1,500.00
- Effective date
- 23/11/2024
- Contract end date
- 23/11/2024
Very long definition term(s) and/or detail (.col-0)
- ACN
- 083022057
- ABN
- 2342-384223
- Is it an Aboriginal or Torres Strait Islander owned business
- No
- Street Address
- Shop 5, 177 Kelly Street
- Town/Suburb
- Scone
- State/Territory
- NSW
- Postcode
- 2337
- Country
- AUSTRALIA
Very long definition term(s) and/or detail separated by hyphen (.col-0.hyphen) with additional margin below def detail via .plus.
- Department administrator
- can create and manage users across their portfolio; can create, approve and manage opportunities; can act on behalf of other users.
- Agency administrator
- can create and manage users within their agency only; can create, approve and manage opportunities for their agency; can act on behalf of other agency users.
- Agency settings
- only department and agency admins can be assigned and manage agency settings; agency settings must be applied for each agency and cannot be applied at the department level.
- Opportunity approvers
- can create, approve and publish opportunities for their agency.
- Identified buyers
- can create opportunities for publication and approval by others.
- Notice admin
- can manage all aspects of a notice, but they can't manage permissions or users.
- Identified user
- can only create notices and edit disclosure notices; a Disclosures Identified user cannot publish a new disclosure, however they can publish an amendment to a disclosure.
Definition description sits below term (.strong)
- Final cost inc GST
- $1,500.00
- Effective date
- 23/11/2024
- Contract end date
- 23/11/2024
Increased margin above definition term (.dt-mt)
- Final cost inc GST
- $1,500.00
- Effective date
- 23/11/2024
- Contract end date
- 23/11/2024
Grid layout with 2 rows and 2 or more columns (.row-2)
- Effective date:
- 30-Jun-2025
- Contract end date:
- 03-Jul-2025
- Publish date:
- 30-Jun-2025
- Display until:
- 28-Jul-2025
Text list with border separation
This is a Supplier Hub and SimpleQuote component (not DDS 3.0).
It has the same padding and borders as the list above but without linked list items and arrows.
The class nsw-list is inserted in the ul tag itself.
- First home buyer grant and assistance
- Buying and selling property
- Building or renovating a home
- Aged care housing, home living assistance and retirement villages
File lists
File name with description and file type
Description can be replaced by a long file name, and file type by the file size.
- note Note - Tenders opportunity Report on Tenders Opportunities by department/agency, date range, opportunity ID, and export to CSV (Web, CSV)
- description Description - Tenders response report_on_tenders_responses_by_department_with_date_range_opportunityID_and_export_to_CSV.doc (doc; 2.3mb)
- picture_as_pdf Picture as PDF - Tenders summary Report on Tenders Summary statistics by department/agency, date range, and export to CSV (PDF; 76kb)
- article Articulo re nocentia de clamor nocentia_de_clamor_et_rumor_in_officio.txt (txt; 54kb)
- file_open Fila aperta re peregrinos in officio A discussion of the annoyance and distraction caused by interlopers who conduct meetings at their desk (txt; 54kb)
File name with file size
- note Supplier_user_guide_old2021.pdf (PDF, 1661.67 kb)
File name with file size and delete button
- note file-name.pdf (PDF, 100 kb)
File name with file size, delete button and text input for description
- note Supplier_user_guide_old2021.pdf (PDF, 1661.67 kb)
Team setup
These list items contain a name, checkbox-label pairs and a delete button.
two checkbox-label pairs (older mark-up)
- No team member(s) added. Search for team member(s) above.
-
Dan Dalton
trimmer mark-up
- No team member(s) added. Search for team member(s) above.
-
Dan Dalton
-
Clyde McPhatter
three checkbox-label pairs
- No team member(s) added. Search for team member(s) above.
-
Dan Dalton dan.dalton@hmail.com
-
Clyde McPhatter clyde.mcphatter@hmail.com
Re-order lists
single line of text
- Egbert
- Aethelwulf
- Aethelbald
- Aethelbert
- Aethelred
- Alfred the Great
numbered with more than 3 lines of text
-
bongo
buff et multas alteras paraulas hic
- Response type
- Free text
-
congo
cuff et multas alteras paraulas hic
- Response type
- Multi select
-
pongo
puff et multas alteras paraulas hic
- Response type
- File template and upload
invited suppliers
-
BEST STAFF PTY LTD
- ABN
- 1111-999999
- Phone
- 09 8765 4321
- companyz@ymail.com.au
-
SCS ILLAWARRA PTY LIMITED
- ABN
- 1111-999999
- Phone
- 09 8765 4321
- companyz@ymail.com.au
suppliers in grid layout
-
BEST STAFF PTY LTD
- ABN
- 2342-384223
- ACN
- 124038803
- Address
- 1 Boundary Road Northmead NSW 2152 AU
-
Bonzer Blokes & Sheilas Inc
- ABN
- 2342-384224
- ACN
- 124038804
- Phone
- 09 8765 4321
- companyz@ymail.com.au
dot-point list with spacing .li-mb.p-lg
- ABN: 72 619 418 003
- ACN: Suppressed
- Goods & Services Tax (GST): Not registered for GST
- Entity name: DAVSUT PTY LTD
- Date established: 5-Aug-2019
Dialog (modal)
Launch long .nsw-dialogToo much information (scrolls)
closeThis yeare foor the king Stephne over sea to Normandy and there was underfangen forthy that hy weenden that he shulde been alswich alse the eam was, and for he hadde yeet his mathme. Ak he todealde it and scatered soothlyche. Michel hadde Henry king gadered gold and silver. And no good ne dide man for his sowele thereof. Tho the king Stephne to Englelande com, tho makede he his gadering at Oxeneford.
And there he nam the bishop Roger of Searebiry and Alexander bishop of Lincol and the Canceler Roger hise neves, and dide alle in quarterne, til hy yeaven up here castles. Tho the swikes underyeaten that he mylde man was and softe and good. And no iustise ne dide. Tho diden hy alle wunder.
Hy hadden him manreaden maked and oathes swooren, ak hy none trewth ne helden. Alle hy weren forsworen and here trewthes forloren. For evrich ryche man his castles makede and ayeanes him helden. And fillden the land ful of castles. Hy swencheden swythe the wrecche men of the land mid castelwerkes tho the castles weren maked tho fillden hy mid develes and ivele men.
Tho nomen hy tho men the hy weenden that any good hadden, bothe be nightes and be dais, carlmen and wimmen.
And diden hem in prisun after gold and silver. And pyneden hem - untellendliche pyning. For ne weren nevere none martirs so pyned alse hy weren. Me hengede up by the feet and hy smokeden hem, mid foul smoke. Me hengede by the thoumbes, other by the head, and hy heengen brinyes on here feet. Me dide knotted strenges abouten here head, and writhen to that it yeede to the harnes. Hy diden hem in quarterne there naddres and snakes and paddes weren inne, and dreapen hem so. Sume hy diden in crucethur - that is in an cheste that was short and narowe and undeep - and dide sharpe stones thereinne.
Tables (with linked rows)
| Receipt | Date lodged | Days since lodged | Supplier | Submission type | Status | View details |
|---|---|---|---|---|---|---|
| 10039 | 7-Mar-2023 | 14 | FORTESCUE METALS GROUP LTD | New application | New | chevron_right |
| 10035 | 24-Feb-2023 | 25 | New application | In review: Joan Beal |
chevron_right |
| Business name | ABN | Membership level | Status | View details |
|---|---|---|---|---|
| Benext Pty. Ltd. | 6633082834 | Base | Active | chevron_right |
| Dande Built | 9644082834 | Advanced | Deactivated | chevron_right |
| Fortech IT Solutions | 8655082834 | Advanced | Paused | chevron_right |
| OX Projects Pty. Ltd. | 7666082834 | Advanced | Suspended | chevron_right |
| Warren Smith & Partners | 6677082834 | Advanced | Suspended | chevron_right |
| Primavera Enterprises | 5688082834 | Advanced | Suspended | chevron_right |
| Pru Tregonning-Schlemperer & Associates | 4699082834 | Advanced | Suspended | chevron_right |
| Compania Incognita | 3600082834 | Advanced | Suspended | chevron_right |
| Compania Incognita | 3600082834 | Advanced | Suspended | chevron_right |
| Compania Incognita | 3600082834 | Advanced | Suspended | chevron_right |
Notifications
Typical content - icon, h4 heading, single short paragraph and button
.nsw-notification
NB - an id is required, in order for the close button ('x') to be displayed.
Time is
I hope that information was useful. We have a brochure if you need more.
Success
We have lift off. And you're coming with us!
Error
That action was foolish! There will be tears.
Warning
Do it now! Don't procrastinate or you'll be rending your shirt.
Icon variations
It looks like there was a problem.
Please contact your service desk for further assistance. (DDS 'Critical')
Password expiring soon
Your password is expiring in 4 days. Please change your password. (DDS 'Warning')
Content variations
.nsw-notification will display any element (without class .m-icons) in the middle column. If either the notification icon or the close button are missing, the corresponding column is efectively removed via CSS. NB - a wrapper div is not needed for the main content.
Single long paragraph
Think!
Take a moment. Think it through. Is this really what you want? London to a brick, if you give the matter more than a cursory glance, you'll step back.
Single long paragraph without button
Think!
Take a moment. Think it through. Is this really what you want? London to a brick, if you give the matter more than a cursory glance, you'll step back.
Single long paragraph with neither button nor icon
Think!
Take a moment. Think it through. Is this really what you want? London to a brick, if you give the matter more than a cursory glance, you'll step back.
Two paragraphs with neither heading, button nor icon
Take a moment. Think it through. Is this really what you want? London to a brick, if you give the matter more than a cursory glance, you'll step back.
More guff here.
Two paragraphs with button and icon, but no heading
Þá cómen tídinges tó Arþur þe kinge þat sék was Howel his meᵹ þær-fore hé was sáriᵹ in Clud licᵹende & þær hé him belæfde.
Hígendlíce swíþe forþ hé gan líþen þat hé behalfes Baþe bæh tó áne félde þær hé alihte & his cnihtes alle.
h3 heading, paragraph and icon
This area of your profile is confidential
Documents added to this section are only visible to authenticated government buyers.
Heading only
You have made amendments to this opportunity
Three paragraphs with neither icon, heading nor button
Edit = can edit requirements
Review = unable to edit, can only review responses
Review and edit = can review responses and edit requirements
Def list with icon
- Publish date
- 01-Apr-2023
- Cancel date
- 13-Jun-2023
- Cancellation reason
- Not to be awarded
- Note
- Changes to budget meant we could no longer procure this service
List with paragraph and icon
- item A
- item B
- item C
Paragraph here.
Four paragraphs with icon, heading and button
Some drack news
Think it might be a good idea to sit down for a tick. This may shock and dismay.
Edit = can edit requirements
Review = unable to edit, can only review responses
Review and edit = can review responses and edit requirements
A table with heading, but neither button nor icon
A table - might be useful
| col a | col b | col c |
|---|---|---|
| cell 1a | cell 1b | cell 1c |
| cell 2a | cell 2b | cell 2c |
The lot - icon, heading, unordered list, def list, table, 4 paragraphs and close button
Notification with the lot
- item A
- item B
- item C
- Publish date
- 01-Apr-2023
- Cancel date
- 13-Jun-2023
| col a | col b | col c |
|---|---|---|
| cell 1a | cell 1b | cell 1c |
| cell 2a | cell 2b | cell 2c |
A bonzer lil paragraph you will just love.
One more paragraph with feeling.
Never say never.
Encore.
Notification lists
with remove button
Notifications
Displaying 2 notifications
Planned SimpleQuote outage
Essente plus inteligente que le homines medie, forsan le scientistas tende anque a essere plus judiciose, ma isto non impedi alcunos inter iles de cadere in dificultates amorose, de essere decepte per obvie mistificationes e fraudes, o de imbraciar doctrinas pseudoscientific.
Report submitted
Le psicologo Sheldon pensa que le scientistas tende verso su tipo ectomorfic in lor fisico e cerebrotonic in lor temperamento. De lo que io ha viste de scientistas io so inclinat a concurere. Le ectomorfo es le homine magre, e le cerebrotonico es le individualista pensative, introvertite, nervose, quiet, e maestro de se mesme. Il ama laborar solo, prefere ideas a homines, e invetera ben, deveniente arugat e coriacee in vice de grasse de pancia e de gena.
with linked sections
Notifications
Displaying 2 notifications
Planned SimpleQuote outage
Essente plus inteligente que le homines medie, forsan le scientistas tende anque a essere plus judiciose, ma isto non impedi alcunos inter iles de cadere in dificultates amorose, de essere decepte per obvie mistificationes e fraudes, o de imbraciar doctrinas pseudoscientific.
Report submitted
Le psicologo Sheldon pensa que le scientistas tende verso su tipo ectomorfic in lor fisico e cerebrotonic in lor temperamento. De lo que io ha viste de scientistas io so inclinat a concurere. Le ectomorfo es le homine magre, e le cerebrotonico es le individualista pensative, introvertite, nervose, quiet, e maestro de se mesme. Il ama laborar solo, prefere ideas a homines, e invetera ben, deveniente arugat e coriacee in vice de grasse de pancia e de gena.
(in-page) Alerts
error Alert. This opportunity will close in 30 days.
small notification
Alert This opportunity will close in 30 days.
Tabs
tab links are anchored
Notifications
Displaying 1-4 of 7 notifications
Planned SimpleQuote outage
It all needs fixing so we're turning it off ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet...
Report submitted
94520575 Snake food Subject: 08/09/21 report for supply of brown snake food has been submitted Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet...
Opportunities
There are (8) opportunities currently listed that match your goods & services
Audit and Risk Committee Independent Chairs and Members
Community and social services
- RFT Type
- Scheme Invitation
- Agency
- NSW Procurement
- Closes
- 28-Feb-2021 12:00pm
- Publish date
- 5-Jul-2016
Customer Service / Subsidence Advisory NSW Independent Assessment Prequalification Scheme - SCM4721
Community and social services
- RFT Type
- Scheme Invitation
- Agency
- NSW Procurement
- Closes
- 28-Feb-2021 12:00pm
- Publish date
- 5-Jul-2016
tab links not anchored
Clicking a tab link does not shift the page. Add class free to nsw-tabs.
Notifications
Displaying 1-4 of 7 notifications
Planned SimpleQuote outage
It all needs fixing so we're turning it off ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet...
Report submitted
94520575 Snake food Subject: 08/09/21 report for supply of brown snake food has been submitted Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet...
Opportunities
There are (8) opportunities currently listed that match your goods & services
Audit and Risk Committee Independent Chairs and Members
Community and social services
- RFT Type
- Scheme Invitation
- Agency
- NSW Procurement
- Closes
- 28-Feb-2021 12:00pm
- Publish date
- 5-Jul-2016
Customer Service / Subsidence Advisory NSW Independent Assessment Prequalification Scheme - SCM4721
Community and social services
- RFT Type
- Scheme Invitation
- Agency
- NSW Procurement
- Closes
- 28-Feb-2021 12:00pm
- Publish date
- 5-Jul-2016