oe_theme/templates/patterns/page_header/page_header.ui_patterns.yml at 5.x · openeuropa/oe_theme · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
page_header:
  label: "Page header"
  description: "Default implementation of the page header, contains the page title, breadcrumbs and additional page details."
  fields:
    title:
      type: "text"
      label: "Title"
      description: "The title of the page."
      preview: "Business, Economy, Euro"
    thumbnail:
      type: "ImageValueObject"
      label: "Thumbnail"
      description: "Thumbnail displayed alongside the description."
      preview:
        src: "https://loremflickr.com/1000/500/arch"
        alt: "Alternative text for thumbnail"
    introduction:
      type: "text"
      label: "Introduction"
      description: "A small introduction of the page content."
      preview: "EU economy, finance and the euro, and practical information for EU businesses and entrepreneurs on product safety, environmental regulations, trade with non-EU countries and competition rules."
    introduction_position:
      type: "text"
      label: "Introduction position"
      description: "The position of the introduction text. Can be \"top\" or \"bottom\" (default: \"top\")."
      preview: "bottom"
    metas:
      type: "array"
      label: "Metas"
      description: "A collection of page meta information."
      preview:
        - "News article"
        - "6 July 2015"
        - "Brussels"
    breadcrumb:
      type: "array"
      label: "Breadcrumb"
      description: "A list of links that represent the location of the current page in the website."
      preview:
        - href: "#"
          label: "European Commission"
        - href: "#"
          label: "Announcements"
        - href: "#"
          label: "About the European Commission"
        - href: "#"
          label: "Organisational structure"
        - href: "#"
          label: "How the Commission is organised"
        - href: "#"
          label: "News"
    background_image_url:
      type: "array"
      label: "Background image URL"
      description: "Background image URL, only displayed when the theme ECL branding is set to 'Core'."
      preview: "page-header-pattern-background-preview.jpeg"
    sources:
      type: "array"
      label: "Image sources"
      description: "Array containing different sized image for multiple screen sizes."
      preview:
        - src: "https://inno-ecl.s3.amazonaws.com/media/examples/example-image.jpg"
          media: '(min-width: 1368px)'
        - src: "https://loremflickr.com/768/256/dog"
          media: '(min-width: 480px)'
        - src: "https://loremflickr.com/480/160/arch"
          media: ''
    background_image_position:
      type: "text"
      label: "Background image position"
      description: "The position of the background image. Can be \"top\", \"beside\" or \"bottom\" (default: \"top\")."
      preview: "beside"
    overlay:
      type: "text"
      label: "Overlay - Deprecated and will be removed in 5.x stable version."
      description: "Optional overlay on top of background image (can be 'light', 'dark'). Not used in ECL 5.x anymore."
      preview: "dark"
    hide_title:
      type: "boolean"
      label: "Hide title"
      description: "Hide the h1 title, for screen reader only. Defaults to 'false'"
      preview: false
    header_message:
      type: "array"
      label: "Header message"
      description: "A header message displayed at the top of the page header in an expandable banner."
      preview:
        toggle_label: "expandable button"
        header_content:
          '#markup': 'Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed cursus turpis vitae tortor.'
        panel_content:
          '#markup': 'Duis arcu tortor, suscipit eget, imperdiet nec, imperdiet iaculis, ipsum. Sed cursus turpis vitae tortor. <strong>Aliquam eu nunc.</strong> Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Fusce egestas elit eget lorem.'
    color_mode:
      type: "text"
      label: "Color mode"
      description: "Name of the color mode. It's applied only when the page header has a background color."
      preview: "green-dark"
    has_background:
      type: "boolean"
      label: "Has background"
      description: "Whether the page header should have a background color or not. Defaults to 'false'"
      preview: true
      escape: false
    extra_classes:
      type: 'text'
      label: 'Extra classes string'
      description: 'Extra classes string'
      preview: 'oe-theme-extra-class'