Components
Pages of a Network site are composed from the components listed below and from plain prose. A site does not write its own components, and does not alter the appearance of the shared ones. Every component takes plain strings and arrays as its properties, so that the content of a page can be read in its source without reference to how it is rendered.
The components fall into eight groups. The group determines where a component may appear: layout components render once in the shell, heroes and sections on home pages, lists and content within a prose column, newsroom components in a newsroom or register, forms on a form page, and motion wrappers only within other components. The Page Patterns page records the arrangements in which they are used.
- Layout
- The shell around every page and the pieces it is made of. A site renders the shell once, in its root layout, and never composes these components itself.
- Heroes
- The opening block of a home page: a title block for a service, or the newest press release for a department. One hero per site, on the home page only.
- Sections
- Full-width bands and grids that divide a home page into parts. Each carries a small accent heading and, where useful, a link to the page that says more.
- Lists
- Structured content within a prose column: definitions, procedures, chronologies, figures and questions. At most two on a page, each for a different purpose.
- Content
- The standard page, the table and the email link. Most pages of a site are a standard page with prose and, where the content calls for it, a table.
- Newsroom
- The press release index, article, featured story and teaser. The same four components render every newsroom and register of the Network.
- Forms
- The primitives and the application form. Forms on Network sites send nothing; on submission they show a notice.
- Motion
- Two wrappers that other components use to reveal content on scroll and to open a disclosure panel. Their durations are fixed and both are disabled under reduced motion.
The components. All forty-three components of the shared package are listed with their purpose and group; the six form primitives, the five standard page bodies and the two motion wrappers share a row each. Components run on the server except the government banner, the navigation bar, the accordion, the motion wrappers and the forms, which run in the browser because they respond to the visitor.
| Component | Purpose | Group |
|---|---|---|
| SiteShell | Government banner, masthead, navigation bar, main region and footer around every page. | Layout |
| SiteHeader | Masthead with the wordmark, utility row and, by default, the full-width navigation bar. | Layout |
| NavBar | Uppercase navigation items with submenus that open on request and close on escape. | Layout |
| SiteFooter | Wordmark, contact, this site's pages, the departments and services of the Network, policy links. | Layout |
| GovBanner | The thin line above the masthead stating that this is an official website of the Network, with an explanation that opens on request. | Layout |
| Wordmark | Text-only logotype used in the masthead and footer. | Layout |
| SkipLink | The first focusable element on every page, leading to the main region. | Layout |
| SocialLinks | The email mark and link in the utility row of the masthead. | Layout |
| Container | Centred column of the site width with the standard side margins. | Layout |
| PageHero | Title block of a service home page, with an optional call to action and photograph. | Heroes |
| FeaturedStory | Lead press release on the home page of a department, in split or stacked layout. | Heroes |
| Section | Container, small accent heading, optional link and content, revealed on scroll. | Sections |
| SectionHeading | The small uppercase heading with a short accent rule, used within sections and bands. | Sections |
| IntroBand | Light full-width band with a heading beside prose. | Sections |
| ImageBand | Photograph beside a heading and prose; the photograph may sit on either side. | Sections |
| LinkGrid | Two or three column grid of titled links with a line of description. | Sections |
| ImageGrid | Cards with an optional photograph, small label, title and description. | Sections |
| NewsGrid | Three column grid of the latest press releases with optional photographs. | Sections |
| ItemList | Definition-style list of titled entries with optional text, link and meta line. | Lists |
| Steps | Numbered procedure with a title and optional text on each step. | Lists |
| Timeline | Dated events down a hairline in the brand colour. | Lists |
| Figures | Row of key figures: a large number above a short label. | Lists |
| Accordion | Expandable question-and-answer list, one item open at a time. | Lists |
| DataTable | Plain table with hairline rules, a header rule in the brand colour and an optional caption. | Content |
| StandardPage | Serif page title above a prose column. | Content |
| ContactPage, PrivacyPolicyPage, AccessibilityPage, CopyrightPage, NotFoundPage | Bodies of the standard pages, taking the site's name, domain, email address and photographers from its configuration. | Content |
| EmailLink | A mail link rendering the address as its own text. | Content |
| PressReleaseList | Dated index of press releases or notices, with summary and issuing office. | Newsroom |
| PressReleaseArticle | A single press release with its office, date, optional photograph and body. | Newsroom |
| NewsroomTeaser | Compact list of the latest releases for a home page. | Newsroom |
| ApplicationForm | Generic form with a chooser and dependent questions; shows a confirmation and sends nothing. | Forms |
| Field, TextInput, Select, Textarea, Button, Notice | Form primitives. | Forms |
| Reveal, Collapse | Motion wrappers used within other components; disabled under reduced motion. | Motion |
Choosing a list component. Six components carry structured content within a prose column. Each suits one shape of content; the table pairs each with the shape it is for and a page of this site that uses it.
| Component | Suits | Example on this site |
|---|---|---|
| ItemList | Titled entries with a sentence or two each: services, responsibilities, rules. | Typography |
| Steps | A procedure whose order matters. | Adopting the System |
| Timeline | Events with dates, oldest first. | History |
| Figures | A few numbers that summarise, each with a label. | Home page |
| Accordion | Questions with answers of a paragraph each. | Questions |
| DataTable | Records that share the same fields: registers, schedules, tokens. | Colours |
Forms. The form primitives are shown below as they render on a site. Forms on Network sites do not send anything; on submission they show a notice. The application form, which composes these primitives, appears on the careers and immigration sites of the Network.
The colour, type and layout values the components draw on are recorded in the register of Design Tokens. Changes to the components are recorded in the Release Notes, and a site is set up to use them as described in Adopting the System. A component that does not meet a site's need is the subject of a proposal to contact@design.gov.vin, not of a local variation.