{ "name": "Tables", "component": "tables", "fixtures": [ { "name": "default", "context": { "caption": "Impetigo can look similar to other skin conditions", "captionSize": "m", "head": [ { "text": "Skin symptoms" }, { "text": "Possible cause" } ], "rows": [ [ { "text": "Blisters on lips or around the mouth" }, { "text": "Cold sores" } ], [ { "text": "Itchy, dry, cracked, sore" }, { "text": "Eczema" } ], [ { "text": "Itchy blisters" }, { "text": "Shingles, chickenpox" } ] ] }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": { "layout": "background-white" }, "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Impetigo can look similar to other skin conditions\n
\n Skin symptoms\n \n Possible cause\n
\n Blisters on lips or around the mouth\n \n Cold sores\n
\n Itchy, dry, cracked, sore\n \n Eczema\n
\n Itchy blisters\n \n Shingles, chickenpox\n
" }, { "name": "default", "description": "reverse", "context": { "caption": "Impetigo can look similar to other skin conditions", "captionSize": "m", "head": [ { "text": "Skin symptoms" }, { "text": "Possible cause" } ], "rows": [ [ { "text": "Blisters on lips or around the mouth" }, { "text": "Cold sores" } ], [ { "text": "Itchy, dry, cracked, sore" }, { "text": "Eczema" } ], [ { "text": "Itchy blisters" }, { "text": "Shingles, chickenpox" } ] ], "variant": "reverse" }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": { "layout": "background-blue" }, "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Impetigo can look similar to other skin conditions\n
\n Skin symptoms\n \n Possible cause\n
\n Blisters on lips or around the mouth\n \n Cold sores\n
\n Itchy, dry, cracked, sore\n \n Eczema\n
\n Itchy blisters\n \n Shingles, chickenpox\n
" }, { "name": "responsive", "context": { "caption": "Ibuprofen syrup dosages for children", "captionSize": "m", "responsive": true, "head": [ { "text": "Age", "classes": "nhsuk-u-width-one-half" }, { "text": "How much?", "classes": "nhsuk-u-width-one-quarter" }, { "text": "How often?", "classes": "nhsuk-u-width-one-quarter" } ], "rows": [ [ { "header": "Age", "text": "3 to 5 months (weighing more than 5kg)" }, { "header": "How much?", "text": "2.5ml" }, { "header": "How often?", "text": "Max 3 times in 24 hours" } ], [ { "header": "Age", "text": "6 to 11 months" }, { "header": "How much?", "text": "2.5ml" }, { "header": "How often?", "text": "Max 3 to 4 times in 24 hours" } ], [ { "header": "Age", "text": "1 to 3 years" }, { "header": "How much?", "text": "5ml" }, { "header": "How often?", "text": "Max 3 times in 24 hours" } ], [ { "header": "Age", "text": "4 to 6 years" }, { "header": "How much?", "text": "7.5ml" }, { "header": "How often?", "text": "Max 3 times in 24 hours" } ], [ { "header": "Age", "text": "7 to 9 years" }, { "header": "How much?", "text": "10ml" }, { "header": "How often?", "text": "Max 3 times in 24 hours" } ], [ { "header": "Age", "text": "10 to 11 years" }, { "header": "How much?", "text": "15ml" }, { "header": "How often?", "text": "Max 3 times in 24 hours" } ], [ { "header": "Age", "text": "12 to 17 years" }, { "header": "How much?", "text": "15ml to 20ml" }, { "header": "How often?", "text": "Max 3 to 4 times in 24 hours" } ] ] }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": { "layout": "background-white" }, "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Ibuprofen syrup dosages for children\n
\n Age\n \n How much?\n \n How often?\n
\n Age 3 to 5 months (weighing more than 5kg)\n \n How much? 2.5ml\n \n How often? Max 3 times in 24 hours\n
\n Age 6 to 11 months\n \n How much? 2.5ml\n \n How often? Max 3 to 4 times in 24 hours\n
\n Age 1 to 3 years\n \n How much? 5ml\n \n How often? Max 3 times in 24 hours\n
\n Age 4 to 6 years\n \n How much? 7.5ml\n \n How often? Max 3 times in 24 hours\n
\n Age 7 to 9 years\n \n How much? 10ml\n \n How often? Max 3 times in 24 hours\n
\n Age 10 to 11 years\n \n How much? 15ml\n \n How often? Max 3 times in 24 hours\n
\n Age 12 to 17 years\n \n How much? 15ml to 20ml\n \n How often? Max 3 to 4 times in 24 hours\n
" }, { "name": "responsive", "description": "reverse", "context": { "caption": "Ibuprofen syrup dosages for children", "captionSize": "m", "responsive": true, "head": [ { "text": "Age", "classes": "nhsuk-u-width-one-half" }, { "text": "How much?", "classes": "nhsuk-u-width-one-quarter" }, { "text": "How often?", "classes": "nhsuk-u-width-one-quarter" } ], "rows": [ [ { "header": "Age", "text": "3 to 5 months (weighing more than 5kg)" }, { "header": "How much?", "text": "2.5ml" }, { "header": "How often?", "text": "Max 3 times in 24 hours" } ], [ { "header": "Age", "text": "6 to 11 months" }, { "header": "How much?", "text": "2.5ml" }, { "header": "How often?", "text": "Max 3 to 4 times in 24 hours" } ], [ { "header": "Age", "text": "1 to 3 years" }, { "header": "How much?", "text": "5ml" }, { "header": "How often?", "text": "Max 3 times in 24 hours" } ], [ { "header": "Age", "text": "4 to 6 years" }, { "header": "How much?", "text": "7.5ml" }, { "header": "How often?", "text": "Max 3 times in 24 hours" } ], [ { "header": "Age", "text": "7 to 9 years" }, { "header": "How much?", "text": "10ml" }, { "header": "How often?", "text": "Max 3 times in 24 hours" } ], [ { "header": "Age", "text": "10 to 11 years" }, { "header": "How much?", "text": "15ml" }, { "header": "How often?", "text": "Max 3 times in 24 hours" } ], [ { "header": "Age", "text": "12 to 17 years" }, { "header": "How much?", "text": "15ml to 20ml" }, { "header": "How often?", "text": "Max 3 to 4 times in 24 hours" } ] ], "variant": "reverse" }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": { "layout": "background-blue" }, "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Ibuprofen syrup dosages for children\n
\n Age\n \n How much?\n \n How often?\n
\n Age 3 to 5 months (weighing more than 5kg)\n \n How much? 2.5ml\n \n How often? Max 3 times in 24 hours\n
\n Age 6 to 11 months\n \n How much? 2.5ml\n \n How often? Max 3 to 4 times in 24 hours\n
\n Age 1 to 3 years\n \n How much? 5ml\n \n How often? Max 3 times in 24 hours\n
\n Age 4 to 6 years\n \n How much? 7.5ml\n \n How often? Max 3 times in 24 hours\n
\n Age 7 to 9 years\n \n How much? 10ml\n \n How often? Max 3 times in 24 hours\n
\n Age 10 to 11 years\n \n How much? 15ml\n \n How often? Max 3 times in 24 hours\n
\n Age 12 to 17 years\n \n How much? 15ml to 20ml\n \n How often? Max 3 to 4 times in 24 hours\n
" }, { "name": "responsive and custom HTML", "context": { "caption": "Nunjucks macro options", "firstCellIsHeader": true, "responsive": true, "head": [ { "text": "Name" }, { "text": "Type" }, { "text": "Description" } ], "rows": [ [ { "header": "Name", "text": "id" }, { "header": "Type", "text": "string" }, { "header": "Description", "text": "The ID of the table." } ], [ { "header": "Name", "text": "rows" }, { "header": "Type", "text": "array" }, { "header": "Description", "html": "Required. The rows within the table component.\nSee macro options for rows." } ], [ { "header": "Name", "text": "head" }, { "header": "Type", "text": "array" }, { "header": "Description", "html": "Can be used to add a row of table header cells (<th>) at the top of the table component.\nSee macro options for head." } ], [ { "header": "Name", "text": "caption" }, { "header": "Type", "text": "string" }, { "header": "Description", "text": "Caption text." } ], [ { "header": "Name", "text": "captionClasses" }, { "header": "Type", "text": "string" }, { "header": "Description", "text": "Classes for caption text size. Classes should correspond to the available typography heading classes." } ], [ { "header": "Name", "text": "firstCellIsHeader" }, { "header": "Type", "text": "string" }, { "header": "Description", "html": "If set to true, the first cell in each row will be a table header (<th>)." } ], [ { "header": "Name", "text": "classes" }, { "header": "Type", "text": "string" }, { "header": "Description", "text": "Classes to add to the table container." } ], [ { "header": "Name", "text": "attributes" }, { "header": "Type", "text": "object" }, { "header": "Description", "text": "\tHTML attributes (for example data attributes) to add to the table container." } ] ] }, "screenshot": false, "options": {}, "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Nunjucks macro options\n
\n Name\n \n Type\n \n Description\n
\n Name id\n \n Type string\n \n Description The ID of the table.\n
\n Name rows\n \n Type array\n \n Description Required. The rows within the table component.\n See macro options for rows.\n
\n Name head\n \n Type array\n \n Description Can be used to add a row of table header cells (<th>) at the top of the table component.\n See macro options for head.\n
\n Name caption\n \n Type string\n \n Description Caption text.\n
\n Name captionClasses\n \n Type string\n \n Description Classes for caption text size. Classes should correspond to the available typography heading classes.\n
\n Name firstCellIsHeader\n \n Type string\n \n Description If set to true, the first cell in each row will be a table header (<th>).\n
\n Name classes\n \n Type string\n \n Description Classes to add to the table container.\n
\n Name attributes\n \n Type object\n \n Description \tHTML attributes (for example data attributes) to add to the table container.\n
" }, { "name": "with empty items", "context": { "caption": "Vaccinations given", "captionSize": "m", "head": [ { "text": "Date" }, { "text": "Vaccine" }, false ], "rows": [ [ { "text": "10 July 2024" }, { "text": "RSV" }, false ], false ] }, "screenshot": false, "options": {}, "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Vaccinations given\n
\n Date\n \n Vaccine\n
\n 10 July 2024\n \n RSV\n
" }, { "name": "with first cell as header", "context": { "firstCellIsHeader": true, "head": [ { "text": "Day of the week" }, { "text": "Opening hours" } ], "rows": [ [ { "text": "Monday" }, { "text": "9am to 6pm" } ], [ { "text": "Tuesday" }, { "text": "9am to 6pm" } ], [ { "text": "Wednesday" }, { "text": "9am to 6pm" } ], [ { "text": "Thursday" }, { "text": "9am to 6pm" } ], [ { "text": "Friday" }, { "text": "9am to 6pm" } ], [ { "text": "Saturday" }, { "text": "9am to 1pm" } ], [ { "text": "Sunday" }, { "text": "Closed" } ] ] }, "screenshot": false, "options": {}, "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Day of the week\n \n Opening hours\n
\n Monday\n \n 9am to 6pm\n
\n Tuesday\n \n 9am to 6pm\n
\n Wednesday\n \n 9am to 6pm\n
\n Thursday\n \n 9am to 6pm\n
\n Friday\n \n 9am to 6pm\n
\n Saturday\n \n 9am to 1pm\n
\n Sunday\n \n Closed\n
" }, { "name": "with missing data", "context": { "caption": "Vaccinations given", "captionSize": "m", "head": [ { "text": "Date" }, { "text": "Vaccine" }, { "text": "Product" } ], "rows": [ [ { "text": "10 July 2024" }, { "text": "RSV" }, { "text": "Abrysvo" } ], [ { "text": "6 September 2023" }, { "text": "Flu" }, { "text": "No data", "classes": "nhsuk-u-secondary-text-colour" } ] ] }, "screenshot": false, "options": {}, "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Vaccinations given\n
\n Date\n \n Vaccine\n \n Product\n
\n 10 July 2024\n \n RSV\n \n Abrysvo\n
\n 6 September 2023\n \n Flu\n \n No data\n
" }, { "name": "with numeric data", "context": { "caption": "Prescription prepayment certificate (PPC) charges", "captionSize": "m", "head": [ { "text": "Item" }, { "text": "Current charge", "format": "numeric" }, { "text": "New charge", "format": "numeric" } ], "rows": [ [ { "text": "3-month" }, { "text": "£31.25", "format": "numeric" }, { "text": "£32.05", "format": "numeric" } ], [ { "text": "12-month" }, { "text": "£111.60", "format": "numeric" }, { "text": "£114.50", "format": "numeric" } ], [ { "text": "HRT" }, { "text": "£19.30", "format": "numeric" }, { "text": "£19.80", "format": "numeric" } ] ] }, "screenshot": false, "options": {}, "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Prescription prepayment certificate (PPC) charges\n
\n Item\n \n Current charge\n \n New charge\n
\n 3-month\n \n £31.25\n \n £32.05\n
\n 12-month\n \n £111.60\n \n £114.50\n
\n HRT\n \n £19.30\n \n £19.80\n
" }, { "name": "with numeric data (full width, past day)", "context": { "caption": "Past day", "head": [ { "text": "Case manager" }, { "text": "Cases opened", "format": "numeric" }, { "text": "Cases closed", "format": "numeric" } ], "rows": [ [ { "text": "David Francis" }, { "text": "3", "format": "numeric" }, { "text": "0", "format": "numeric" } ], [ { "text": "Paul Farmer" }, { "text": "1", "format": "numeric" }, { "text": "0", "format": "numeric" } ], [ { "text": "Rita Patel" }, { "text": "2", "format": "numeric" }, { "text": "0", "format": "numeric" } ] ] }, "screenshot": false, "options": { "width": "full" }, "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Past day\n
\n Case manager\n \n Cases opened\n \n Cases closed\n
\n David Francis\n \n 3\n \n 0\n
\n Paul Farmer\n \n 1\n \n 0\n
\n Rita Patel\n \n 2\n \n 0\n
" }, { "name": "with numeric data (full width, past month)", "context": { "caption": "Past month", "head": [ { "text": "Case manager" }, { "text": "Cases opened", "format": "numeric" }, { "text": "Cases closed", "format": "numeric" } ], "rows": [ [ { "text": "David Francis" }, { "text": "98", "format": "numeric" }, { "text": "95", "format": "numeric" } ], [ { "text": "Paul Farmer" }, { "text": "122", "format": "numeric" }, { "text": "131", "format": "numeric" } ], [ { "text": "Rita Patel" }, { "text": "126", "format": "numeric" }, { "text": "142", "format": "numeric" } ] ] }, "screenshot": false, "options": { "width": "full" }, "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Past month\n
\n Case manager\n \n Cases opened\n \n Cases closed\n
\n David Francis\n \n 98\n \n 95\n
\n Paul Farmer\n \n 122\n \n 131\n
\n Rita Patel\n \n 126\n \n 142\n
" }, { "name": "with numeric data (full width, past week)", "context": { "caption": "Past week", "head": [ { "text": "Case manager" }, { "text": "Cases opened", "format": "numeric" }, { "text": "Cases closed", "format": "numeric" } ], "rows": [ [ { "text": "David Francis" }, { "text": "24", "format": "numeric" }, { "text": "18", "format": "numeric" } ], [ { "text": "Paul Farmer" }, { "text": "16", "format": "numeric" }, { "text": "20", "format": "numeric" } ], [ { "text": "Rita Patel" }, { "text": "24", "format": "numeric" }, { "text": "27", "format": "numeric" } ] ] }, "screenshot": false, "options": { "width": "full" }, "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Past week\n
\n Case manager\n \n Cases opened\n \n Cases closed\n
\n David Francis\n \n 24\n \n 18\n
\n Paul Farmer\n \n 16\n \n 20\n
\n Rita Patel\n \n 24\n \n 27\n
" }, { "name": "with numeric data (full width, past year)", "context": { "caption": "Past year", "head": [ { "text": "Case manager" }, { "text": "Cases opened", "format": "numeric" }, { "text": "Cases closed", "format": "numeric" } ], "rows": [ [ { "text": "David Francis" }, { "text": "1380", "format": "numeric" }, { "text": "1472", "format": "numeric" } ], [ { "text": "Paul Farmer" }, { "text": "1129", "format": "numeric" }, { "text": "1083", "format": "numeric" } ], [ { "text": "Rita Patel" }, { "text": "1539", "format": "numeric" }, { "text": "1265", "format": "numeric" } ] ] }, "screenshot": false, "options": { "width": "full" }, "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Past year\n
\n Case manager\n \n Cases opened\n \n Cases closed\n
\n David Francis\n \n 1380\n \n 1472\n
\n Paul Farmer\n \n 1129\n \n 1083\n
\n Rita Patel\n \n 1539\n \n 1265\n
" }, { "name": "with word breaks", "context": { "caption": "Users", "captionSize": "m", "head": [ { "text": "Name" }, { "text": "Email address" }, { "text": "Status" }, { "html": "Actions" } ], "rows": [ [ { "text": "Stephanie Meyer", "classes": "nhsuk-u-text-break-word" }, { "text": "stephanie.meyer9@test.com", "classes": "nhsuk-u-text-break-word" }, { "html": "\n Active\n\n" } ], [ { "text": "Aleksandrina Featherstonehaugh-Whitehead", "classes": "nhsuk-u-text-break-word" }, { "text": "aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com", "classes": "nhsuk-u-text-break-word" }, { "html": "\n Inactive\n\n" } ] ] }, "screenshot": false, "options": {}, "html": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Users\n
\n Name\n \n Email address\n \n Status\n \n Actions\n
\n Stephanie Meyer\n \n stephanie.meyer9@test.com\n \n \n Active\n \n
\n Aleksandrina Featherstonehaugh-Whitehead\n \n aleksandrina.featherstonehaughwhitehead23@folkestonepharmacy.test.com\n \n \n Inactive\n \n
" }, { "name": "as a card", "context": { "card": true, "caption": "Impetigo can look similar to other skin conditions", "captionSize": "m", "head": [ { "text": "Skin symptoms" }, { "text": "Possible cause" } ], "rows": [ [ { "text": "Blisters on lips or around the mouth" }, { "text": "Cold sores" } ], [ { "text": "Itchy, dry, cracked, sore" }, { "text": "Eczema" } ], [ { "text": "Itchy blisters" }, { "text": "Shingles, chickenpox" } ] ] }, "screenshot": false, "options": {}, "html": "
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Impetigo can look similar to other skin conditions\n
\n Skin symptoms\n \n Possible cause\n
\n Blisters on lips or around the mouth\n \n Cold sores\n
\n Itchy, dry, cracked, sore\n \n Eczema\n
\n Itchy blisters\n \n Shingles, chickenpox\n
\n
\n
" }, { "name": "as a card (feature)", "context": { "card": { "heading": "Other conditions like impetigo", "headingSize": "m", "variant": "feature" }, "caption": "Impetigo can look similar to other skin conditions", "captionSize": "s", "head": [ { "text": "Skin symptoms" }, { "text": "Possible cause" } ], "rows": [ [ { "text": "Blisters on lips or around the mouth" }, { "text": "Cold sores" } ], [ { "text": "Itchy, dry, cracked, sore" }, { "text": "Eczema" } ], [ { "text": "Itchy blisters" }, { "text": "Shingles, chickenpox" } ] ] }, "screenshot": { "viewports": [ "mobile", "tablet", "desktop" ] }, "options": {}, "html": "
\n
\n

\n Other conditions like impetigo\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Impetigo can look similar to other skin conditions\n
\n Skin symptoms\n \n Possible cause\n
\n Blisters on lips or around the mouth\n \n Cold sores\n
\n Itchy, dry, cracked, sore\n \n Eczema\n
\n Itchy blisters\n \n Shingles, chickenpox\n
\n
\n
" }, { "name": "as a card (feature) responsive", "context": { "card": { "heading": "Other conditions like impetigo", "headingSize": "m", "variant": "feature" }, "caption": "Impetigo can look similar to other skin conditions", "captionSize": "s", "responsive": true, "head": [ { "text": "Skin symptoms" }, { "text": "Possible cause" } ], "rows": [ [ { "header": "Skin problems", "text": "Blisters on lips or around the mouth" }, { "header": "Possible cause", "text": "Cold sores" } ], [ { "header": "Skin problems", "text": "Itchy, dry, cracked, sore" }, { "header": "Possible cause", "text": "Eczema" } ], [ { "header": "Skin problems", "text": "Itchy blisters" }, { "header": "Possible cause", "text": "Shingles, chickenpox" } ] ] }, "screenshot": false, "options": {}, "html": "
\n
\n

\n Other conditions like impetigo\n

\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n \n
\n Impetigo can look similar to other skin conditions\n
\n Skin symptoms\n \n Possible cause\n
\n Skin problems Blisters on lips or around the mouth\n \n Possible cause Cold sores\n
\n Skin problems Itchy, dry, cracked, sore\n \n Possible cause Eczema\n
\n Skin problems Itchy blisters\n \n Possible cause Shingles, chickenpox\n
\n
\n
" } ] }