Design System

Design System
v2.36.2 Download

Changelog

Stay up-to-date with the latest improvements and updates to our design system

2.36.2 (2024-10-24)

  • Fix NPM packages release v2

2.36.1 (2024-10-24)

  • Fix NPM packages release

2.36.0 (2024-10-24)

  • Add RTL support for Pashto (“sf”) and Persian (“fa”)
  • Project list page: Add abstract under title
  • Card component: Add .card-hide-title class on the card wrapper to hide the title

2.35.0 (17-09-2024)

  • Added “Primary Heading” as an H1 in typography

2.34.1 (21-05-2024)

  • Categories list in all list views (with deploy fix)

2.34.0 (21-05-2024)

  • Categories list in all list views

2.33.1 (12-03-2024)

  • Story corporate image no ratio

2.33.0 (12-03-2024)

  • Story detail 2 images arab fix
  • Story header shadow
  • SDG default english for other languages

2.32.2 (28-02-2024)

  • Card Overlay Arabic fix

2.32.1 (28-02-2024)

  • Arabic fix for blockquote
  • SDG small margin

2.32.0 (26-02-2024)

FAO Theme
  • Story tag arabic fix
  • Card story title size fix
  • D-list position relative fix, and several improvements
  • Removed duplication “bold element” in article, elearning and speeches
  • Dynamic search arabic fix
  • Blockquote fix in stories and default
DS - Docs and functionality
  • Update XD file in download page

2.31.2 (20-02-2024)

  • Embed video player fix
  • Restored link around image in video and audio list

2.31.1 (19-02-2024)

FAO Theme
  • All the details now have the

    tag to wrap the title for SEO purposes

International Year
  • “bg-gray-dark” child element now are in the right contrast (white)
World Food Day
  • Food Heroes “detail-title” class is now “wfd-detail-title”

2.31.0 (14-02-2024)

FAO Theme
  • Tags white-space changed to “white-space: normal”
  • Created an example of a website with custom subheader
  • Added blockquote element in typography
  • Card stories background darker and animation
  • Story list refinements
DS - Docs and functionality
  • “Hero” item in DS sidenav changed to “Hero Banner”

2.30.1 (06-02-2024)

FAO Theme
  • Exception for title-link in the lists (dynamic-list-row version)
  • Update Speech details markup and CSS

2.30.0 (06-02-2024)

  • Exception for title-link in the lists (dynamic-list-row version)
  • Update Speech details markup and CSS

2.29.1 (26-01-2024)

FAO Theme
  • Add CSS fix for d-list

2.29.0 (25-01-2024)

FAO Theme
DS - Docs and functionality

2.28.0 (19-01-2024)

FAO Theme
  • International Year V2 CSS clean up, fixes
DS - Docs and functionality

2.27.2 (09-01-2024)

DS - Docs and functionality
  • Add Emoji page under styles

2.27.1 (19-12-2023)

DS - Docs and functionality
  • Delete side navigation page

2.27.0 (19-12-2023)

FAO Theme

2.26.3 (07-12-2023)

  • Headings margin fixes

2.26.2 (07-12-2023)

FAO Theme
  • Anchors in tables no text underline
  • Headings margin bottom
  • Headings in content background color fix
  • Buttons margin bottom (1.5rem)

2.26.1 (29-11-2023)

  • IY css improvements

2.26.0 (22-11-2023)

  • Fix import International Year v2
  • Removed margin bottom from “sfContentBlock”
  • bi-twitter always with “X” icons
  • title-highlight margin-bottom
  • Navbar subsite vertical align fix
  • IY new template CSS

2.25.0 (22-11-2023)

  • Removed margin bottom from “sfContentBlock”
  • bi-twitter always with “X” icons
  • title-highlight margin-bottom
  • Navbar subsite vertical align fix
  • IY new template CSS

2.24.0 (13-11-2023)

FAO Theme
  • Add side navigation for website Side Navigation
  • Fixed Card Horizontal CSS related to bg-caption color instead of the card itself
  • Arabic d-list CSS fix

2.23.0 (17-10-2023)

FAO Theme
  • card-twitter change CSS rule to target direcly the .bi-twitter class to avoid selector problems
FAO Home
  • Arabic lang: Changed direction of the black gradient of the hero banner

2.22.0 (10-10-2023)

  • Different size for logo swap in story header
  • Horizontal background caption card fix (was not applying style)
  • Card twitter “X” logo updated
  • Footer X icon added in DS
  • Story detail update (added 2 share button sets and tag in FAO feature story)

2.21.0 (22-09-2023)

FAO Theme
  • Invert date from japanese from DD-MM-YYYY to YYYY-MM-DD
  • Header stories style added
DS - Docs and functionality

2.20.0 (13-09-2023)

FAO Theme
  • Icons Update bootstrap-icons to v1.11.0
  • Icons Update Twitter icon with X icon
DS - Docs and functionality

2.19.0 (11-08-2023)

FAO Theme
  • Events list add spans dateday and daymonth to be able to invert position of date when necessary
  • Events list add styles for Japanese lang to invert date and month order

2.18.0 (31-07-2023)

FAO Theme
  • Speeches detail change banner text color to white
  • Cards Static - Live event change class to trigger live events styles on static cards from “on” to “event-live” and add Styles and h6 “card-event-live”
DS - Docs and functionality

2.17.1 (07-07-2023)

  • Fix title color for multimedia details

2.17.0 (21-06-2023)

  • Update Bootstrap icons version to v1.10.5

2.16.5 (13-06-2023)

  • Activate card-calendar old styles to support old markup

2.16.4 (13-06-2023)

2.16.3 (08-06-2023)

  • Story detail back to subsite version
  • Improvements in @container

2.16.2 (23-05-2023)

  • Active item breadcrumbs alignment fix
  • All examples view updated with new content icons

2.16.1 (19-05-2023)

  • Improve minification mechanism of CSS.

2.16.0 (19-05-2023)

  • Fix @container queries minification bug by overriding the version of the minification package subdependency.
  • Normalized all font weights (Open Sans 400 was not imported)
  • Pagination and breadcrumbs css variables
  • Breadcrumbs and Login/register button demo page
  • Breadcrumbs text-overflow: ellipsis and font size
  • Audio/visual page demo
  • Add printing @media CSS at-rules, improving the quality and layout of printed webpages and print preview mode.
  • Add the 17 SDGs indicators in all languages. Two sizes available: “small” (number only) with CSS class sdg-small sdg-[number] and default sdg sdg-[number].
  • Update Sdgs images exmaple, logged in users can switch HTML language to preview all SVGs.

2.15.1 (04-05-2023)

2.15.0 (28-04-2023)

FAO Theme
  • Update Boostrap Icons to v1.10.5
  • Add icon codes for WeChat and sina Weibo
  • Change List Article markup and styles
  • Change List Audio markup and styles
  • Change List Blog markup and styles
  • Change List E-Learning markup and styles
  • Change List Events markup and styles
  • Change List News markup and styles
  • Change List Partners markup and styles
  • Change List Publication markup and styles
  • Change List Speeches markup and styles
  • Change List Story markup and styles
  • Change List Video markup and styles

2.14.0 (17-04-2023)

FAO Theme
  • Add Breadcrumb component
  • Update Subsite navigation styles
  • Update icon position when 3rd level is active
  • Add utility class .dropdown-nowrap to wrap the text in the menu items when is too long
FAO Home
  • Russian lang: Update width of the content of the Hero Banner in the fao homepage for Desktop

2.13.0 (28-03-2023)

FAO Theme
International Year
  • Fixed accordion CSS to bootstrap 5 markup
World Food Day
  • Food heroes card is now width instead of max-width

2.12.0 (06-03-2023)

FAO Theme
  • Remove display flex from Event Card body
  • Add Button Link with Icon in the Button page
  • Add styles for the arabic version of the Timeline
DS - Docs and functionality

2.11.1 (27-02-2023)

FAO Theme
  • Update margin bottom for the accordion in the side navigation

2.11.0 (22-02-2023)

FAO Theme
  • Hero banner mobile less high
DS - Docs and functionality
  • Rollback Accordion with Bootstrap accordion

2.10.0 (17-02-2023)

FAO Theme
  • Hero banner mobile size
  • Corporate version of the story detail
DS - Docs and functionality
  • Fix 21:9 example in image section
  • Add Showcode only for authenticated users

2.9.3 (14-02-2023)

DS - Docs and functionality
  • Update documentation

2.9.2 (14-02-2023)

DS - Docs and functionality

2.9.1 (09-02-2023)

FAO Theme
DS - Docs and functionality
  • Split Cards code in different components
  • Replace All Cards in Sitefinity Views
  • Replace the link in the Card component with the Link component

2.9.0 (07-02-2023)

FAO Theme
DS - Docs and functionality
  • Update Footer data

2.8.0 (27-01-2023)

FAO Theme
DS - Docs and functionality
International Year
  • Remove Nav links text-decoration: underline

2.7.2 (09-01-2023)

DS - Docs and functionality

2.7.1 (09-01-2023)

DS - Docs and functionality
  • Fix download URL for Design resources

2.7.0 (09-01-2023)

FAO Theme
  • Change Accordion markup and styles
  • Add CSS classes to the close button of the Modal component
DS - Docs and functionality
  • Add Download Figma and Adobe Xd design files download buttons in the Download page
  • Add Example page
  • Replace example text with placeholder text for documentation of all components
  • Small style inprovments to the top navbar

2.6.6 (14-12-2022)

FAO Theme
  • Change spacing on the social icons and the download icons for the arabic version of the Footer
  • Change spacing for the Subsite Header discovery menu

2.6.5 (13-12-2022)

FAO Theme
  • Fix target for Arabic styles
  • The cards inside the Swiper component will get 100% height
FAO Home
  • Add styles for the Multimedia section

2.6.4 (12-12-2022)

FAO Theme

2.6.3 (09-12-2022)

FAO Theme
DS - Docs and functionality
  • Add Story detail page
  • New home page UI
  • Content has been rename in ‘Sitefinity’

2.6.2 (06-12-2022)

FAO Theme

2.6.1 (06-12-2022)

FAO Theme
DS - Docs and functionality
  • Left hand menu is now sorted alphabetically
  • Remove style attributes from Show Code HTML

2.6.0 (23-11-2022)

FAO Theme
  • Paragraph in Hero Banner are now same size of all the others
  • Publication list and card aligned with OCCP design (BE CAREFUL: MARKUP CHANGED)
  • Margin bottom in logos custom subheader, z-index hero caption (video fix)
  • Update Accordion text item color
DS - Docs and functionality
  • SCSS structure changed
  • Add checkbox to open all accordions at the same time in the Changelog Page
  • Remove Google Analytics trackers in all ENVs except Production

2.5.4 (16-11-2022)

FAO Theme
  • Change Flags default min-height and add flag-small class if needed
  • Add styles for the Side Navigation accordion
DS - Docs and functionality

2.5.3 (15-11-2022)

FAO Theme
  • Tag list style and hover style
  • Changed markup in taglist (new BS5 default class)

2.5.2 (14-11-2022)

FAO Theme
  • Remove rule that applies direction: rtl to the backend editor of SF
DS - Docs and functionality

2.5.1 (11-11-2022)

FAO Theme
  • Change links text-decoration
DS - Docs and functionality
  • Remove old card examples documentation
  • Improve documentation components structure

2.5.0 (10-11-2022)

FAO Theme
  • Fix problem with links text-decoration on titles
DS - Docs and functionality
  • Add Download page and documentation
  • Add zip and tgz downloadable packages for CSS
  • Fix home Search results links
  • Fix release npm / yarn packages

2.4.1 (09-11-2022)

  • Drop dependencies and dev dependencies in npm release packages

2.4.0 (09-11-2022)

FAO Theme
  • Fix Tabbed content component spacing and link color:
  • Add class pt-3 on the tab-content div
  • Change nav-link color to $primary
  • Fix issue with Button border color on hover and visited
  • Fix issue with image size width (Bootstrap 5), add 100% max-width on all images
  • Set default height for Soundcloud player in dynamic list
DS - Docs and functionality
  • Add search feature on the DS home page
  • Move Application layout from the component section to the styles section of the DS
  • Move SDG Imges from the component section to the styles section of the DS
  • Add CHANGELOG page to the DS, the new page is available from the Header of the DS

2.3.0 (31-10-2022)

FAO Theme
DS - Docs and functionality
  • Add Flags documentation
  • Update React to version 18.2.0

2.2.1 (17-10-2022)

DS - Docs and functionality
  • Add FAO Logo documentation page under the Styles section
  • Add Toc content side navigation for DS documentation
  • DS Search improvments

2.1.1 (07-10-2022)

FAO Theme
  • Colors:
  • Add color UN blue
  • Header Application:
  • Add title
  • Add Login and Sign-Up buttons
  • Add search button and modal
  • Add language navigation
  • Improve responsive
DS - Docs and functionality

2.1.0 (22-09-2022)

FAO Theme
  • Add map component
  • Add accessibility attributes in application layout
DS - Docs and functionality
  • Custom subheader example color change
  • Add map page and documentation

2.0.2 (15-09-2022)

FAO Theme
DS - Docs and functionality

2.0.1 (08-09-2022)

FAO Theme
  • add class ratio-3x2, we decided to use this class for all cards, lists, and embed
  • fix text-decoration on links for all the components

2.0.0 (02-09-2022)

FAO Theme

©FAO 2024