ECL Fact and figures component

npm package: @ecl/fact-figures

npm install --save @ecl/fact-figures

Parameters:

• "color_mode" (string) (default: '') Name of the color mode
• "column" (integer) (default: 3): Number of columns (1 to 4)
• "centered" (boolean) (default: false)
• "font_size" (string) (default: 'l') Size of the value (can be 'm', 'l')
• "items" (array) (default: []):
  • "icon" (associate array) (default: { size: 'm' })
  • "value" (string) (default: '')
  • "title" (string) (default: '')
  • "description" (string) (default:'')
  • "sources_label" (string) (default: '') Label displayed before the individual sources list; uses global sources label if not provided
  • "sources" (array) (default: []) Array of individual source references (ECL link objects or plain strings)
    • "link" (object): ECL link object
      • "label" (string) (default: '') Link label
      • "path" (string) (default: '') Link URL or
    • "name" (string) (default: '') Plain text source
• "view_all" (optional) (associative array) (default: {})
  • "link" (associative array)
    • "label" (string) (default: ''),
    • "path" (string) (default: '')
• "display_icons" (boolean) (default: true)
• "icon_size" (string) (default: 'l') (l or 2xl)
• "sources_label" (string) (default: '') Label displayed before the global sources list
• "sources" (array) (default: []) Array of global source references (ECL link objects or plain strings)
  • "link" (object): ECL link object
    • "label" (string) (default: '') Link label
    • "path" (string) (default: '') Link URL or
  • "name" (string) (default: '') Plain text source
• "extra_classes" (optional) (string) (default: '') Extra classes (space separated)
• "extra_attributes" (optional) (array) (default: []) Extra attributes
  • "name" (string) Attribute name, eg. 'data-test'
  • "value" (string) Attribute value, eg: 'data-test-1'

Example:

{% include '@ecl/fact-figures/fact-figures.html.twig' with { 
  column: 3, 
  display_icons, true, 
  icon_size: 'l', 
  items: [ 
    { 
      icon: { 
        name: 'chart-bar',
        family: 'phosphor',
      }, 
      value: "00.0 million", 
      title: "Lorem ipsum", 
      description: "Nunc condimentum sapien ut nibh finibus suscipit vitae at justo." 
    }, 
    { 
      icon: { 
        name: 'chart-bar',
        family: 'phosphor',
      }, 
      value: "00.0 million", 
      title: "Sed hendrerit", 
      description: "Turpis varius congue venenatis, erat dui feugiat felis." 
    }, 
  ],
  sources_label: 'Sources:',
  sources: [
    {
      link: {
        label: 'Eurostat',
        path: exampleLink,
      },
    },
  ],
  view_all: { 
    link: { 
      label: "View all", 
      path: "/example" 
    },
  } 
} %}