Generic sample pages showcase the design of the components, their flexibility in colour treatment and layout, and some possible ways components can be combined on a page to achieve different results. They do not show all possibilities of how the components can be used within a page layout—only some possibilities are illustrated.

See the Components section for details on how each component can be used and the flexibility it has.

<aside> <img src="https://img.icons8.com/ios/250/000000/info.png" alt="https://img.icons8.com/ios/250/000000/info.png" width="40px" /> Sample pages are meant to help GS1 Member Organisations (MOs) visualise the way components can look when placed near one another and are not page templates or recommendations for how to optimise the UX of any specific page or the site structure overall. Each MO will determine the best way to construct their pages based on local user needs.

</aside>

Home page examples

The home page examples all have the same components in the same layout, with the same amount of content. They show variations in colour and image treatment.

Download the Sketch file below to inspect design specifications for the page.

gs1-sample-page-home.sketch

Components shown:

  1. Global navigation
  2. Feature banner
  3. Button
  4. Carousel
  5. Testimonial
  6. Card
  7. Footer

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/9161903f-2b4f-47d8-a139-352cc21d119c/home-1.png

Industry landing page examples

The industry landing page examples all have the same components in the same layout, with the same amount of content. They show variations in colour and image treatment.

Download the Sketch file below to inspect design specifications for the page.

gs1-sample-page-industry-lp.sketch

Components shown:

  1. Global navigation
  2. Breadcrumb
  3. Feature banner
  4. Button
  5. Local navigation
  6. Text with graphic
  7. Link
  8. List group
  9. Card
  10. Badge
  11. Footer

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/030c31c4-42df-4f66-aa0c-6c2511983e22/industry-lp-1.png

Topic landing page examples

The topic landing pages are examples of what a high-level topic page could look like, for example one on blockchain or traceability. Each example uses different components in different configurations.

Download the Sketch file below to inspect design specifications for the page.

gs1-sample-page-topic-lp.sketch

Components shown:

  1. Global navigation
  2. Feature banner
  3. Social share
  4. Progress bar
  5. Card
  6. Form element
  7. Modal
  8. Footer

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/91e1ad7a-9b95-4631-badc-09c597302069/topic-lp-1.png

Content page examples

The content page examples demonstrate the components likely to be used on lower-level pages or those with more technical information. Each example uses different components in different configurations.

Download the Sketch file below to inspect design specifications for the page.

gs1-sample-page-content.sketch

Components shown:

  1. Global navigation
  2. Button
  3. Local navigation
  4. Testimonial
  5. Carousel
  6. Tabs
  7. Card
  8. Structured list
  9. Statistic tile
  10. Image with caption
  11. Icon button
  12. Accordion
  13. Footer

https://s3-us-west-2.amazonaws.com/secure.notion-static.com/ebf32cb0-3a1f-49f4-8746-f320ca4199ca/content-1.png

Transactional page examples