ul_cards:
  label: UnLondon Cards
  namespace: Organisms/TM - UnLondon
  use: '@organisms/tm-ul/ul-cards/ul-cards.twig'
  description: UnLondon Cards
  libraries:
    - ul_cards_lib:
        css:
          component:
            ../styles/ul-cards.css: {}
  fields:
    block_title:
      type: text
      label: Block title
      preview:
        faker: lorem.words
    block_intro:
      type: text
      label: Block intro
      preview:
        faker: lorem.paragraph
    cards_class:
      type: text
      label: Cards class
    cards:
      type: object
      label: Cards
      preview:
        - |
          <a class="ul-card" href="https://test.com">
            <img src="https://picsum.photos/500/500">
            <div class="ul-card-overlay">
              <h3>veniam vitae exercitationem</h3>
              <p>Lorem ipsum dolor sit</p>
            </div>
          </a>
        - |
          <a class="ul-card" href="https://test.com">
            <img src="https://picsum.photos/500/500">
            <div class="ul-card-overlay">
              <h3>veniam vitae exercitationem</h3>
              <p>Lorem ipsum dolor sit</p>
            </div>
          </a>
        - |
          <a class="ul-card" href="https://test.com">
            <img src="https://picsum.photos/500/500">
            <div class="ul-card-overlay">
              <h3>veniam vitae exercitationem</h3>
              <p>Lorem ipsum dolor sit</p>
            </div>
          </a>
        - |
          <a class="ul-card" href="https://test.com">
            <img src="https://picsum.photos/500/500">
            <div class="ul-card-overlay">
              <h3>veniam vitae exercitationem</h3>
              <p>Lorem ipsum dolor sit</p>
            </div>
          </a>
        - |
          <a class="ul-card" href="https://test.com">
            <img src="https://picsum.photos/500/500">
            <div class="ul-card-overlay">
              <h3>veniam vitae exercitationem</h3>
              <p>Lorem ipsum dolor sit</p>
            </div>
          </a>
        - |
          <a class="ul-card" href="https://test.com">
            <img src="https://picsum.photos/500/500">
            <div class="ul-card-overlay">
              <h3>veniam vitae exercitationem</h3>
              <p>Lorem ipsum dolor sit</p>
            </div>
          </a>
        - |
          <a class="ul-card" href="https://test.com">
            <img src="https://picsum.photos/500/500">
            <div class="ul-card-overlay">
              <h3>veniam vitae exercitationem</h3>
              <p>Lorem ipsum dolor sit</p>
            </div>
          </a>
        - |
          <a class="ul-card" href="https://test.com">
            <img src="https://picsum.photos/500/500">
            <div class="ul-card-overlay">
              <h3>veniam vitae exercitationem</h3>
              <p>Lorem ipsum dolor sit</p>
            </div>
          </a>
  settings:
    num_cols:
      type: select
      label: Number of columns
      preview: 4
      options:
        3: 3
        4: 4
    num_cols_md:
      type: select
      label: Number of columns, medium override
      options:
        2: 2
        3: 3
    num_rows:
      type: select
      label: Number of rows
      preview: 1
      options:
        1: 1
        2: 2
    coloured_bg:
      type: boolean
      label: Coloured background
      preview: false

