Lists
Structured content presentation for enhanced user experience
Overview
Lists in the FAO Design System are specifically designed to display various types of content found on fao.org. Each list type is tailored to present information in a structured and consistent manner, catering to different content categories such as articles, news, events, and more. These specialized lists ensure that content is displayed appropriately and effectively across the FAO website, enhancing user experience and information accessibility.
Article
Item title
Rome, Italy 26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
WEBSITE: FAO - Food and Agriculture Organization
Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,
Audio
Item title
Rome, Italy 26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,
Item title
Rome, Italy 26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,
Blog
Blog label
Item title
ROME (ITALY) - 26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,
E-learning
Item title
Rome, Italy 26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,
Event
From / To
22/ 5
2021
26/ 5
2022
Item title
ROME (ITALY), 22/05/2021 - 26/05/2022
Some quick example text to build on the card title and make up the bulk of the card's content.
Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,
From only
22/ 5
2021
Item title
ROME (ITALY), 22/05/2021
Some quick example text to build on the card title and make up the bulk of the card's content.
Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,
Forum
| Forum title | Threads | Post/Replies | LastPost |
|---|---|---|---|
| Lorem ipsum dolor sit amet consectetur adipisicing elit. | 1 | 1 | 16/08/2023, 06:37:57 |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. | 1 | 1 | 16/08/2023, 06:37:57 |
| Lorem ipsum dolor sit amet consectetur adipisicing elit. | 1 | 1 | 16/08/2023, 06:37:57 |
Meeting Documents
| Number | Title | Category |
|---|---|---|
| C 2023/1 | Lorem ipsum dolor sit amet consectetur adipisicing elit. | NL350 |
| C 2023/1 | Lorem ipsum dolor sit amet consectetur adipisicing elit. | NL350 |
| C 2023/1 | Lorem ipsum dolor sit amet consectetur adipisicing elit. | NL350 |
News
Item title
Rome (Italy) 26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,
Partners
Item title
Some quick example text to build on the card title and make up the bulk of the card's content.
IN PARTNERSHIP SINCE: 2013
COUNTRY: Italy
AREAS OF COLLABORATION: Lorem, Lorem Ipsum
Resources: Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,
Photo Gallery
Item title
Rome, Italy 26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,
Project
Normal
| Title | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet deserunt officia fugiat. |
|---|---|
| Abstract | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet deserunt officia fugiat. |
| Start Date | 02/06/2022 |
| End Date | 04/06/2022 |
| Recipient/Target areas | Lorem, Ipsum, Lorem, Ipsum |
| Budget | 99999 |
| Donor | Lorem ipsum |
| Project code | LOREM/IPS/UM |
Minimal
| Title | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet deserunt officia fugiat. |
|---|---|
| Budget | 99999 |
| Donor | Lorem ipsum |
Minimal Horizontal
| Symbol | Title | From | to | Total Budget |
|---|---|---|---|---|
| LOREM/IPS/UM | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet deserunt officia fugiat. | 2021 | 2023 | 300,000$ |
| LOREM/IPS/UM | Lorem ipsum dolor sit amet consectetur, adipisicing elit. Amet deserunt officia fugiat. | 2021 | 2023 | 300,000$ |
Publication
Item title
Rome, Italy 26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,
Speech
Item title
Rome, Italy 26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,
Story
Video
Item title
Rome, Italy 26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,
Item title
Rome, Italy 26/06/2020
Some quick example text to build on the card title and make up the bulk of the card's content.
Categories: Lorem, Ipsum, Lorem ipsum, Lorem, Ipsum,