How to get the content into f7-card-content

Add-ons UIs
1

Dear Openhabians,

I guess this is an easy one, but I am trying for a day now and I think I have surpassed my thread-activation-threshold.

I am trying to generate the openhab representation of the f7 styled card example:

image
image1600Ă—641 249 KB

I got it this far:

component: f7-card
slots:
  default:
    - component: f7-card-header
      config:
        class:
          - no-border
        valign: bottom
        style:
          background-image: url(/static/widgets/storm.jpg)
          background-size: cover
    - component: f7-card-content

    - component: f7-card-footer
      slots:
        default:
          - component: f7-link
            config:
              text: Test

which gives me:
image

But for the love of yaml I can not figure out how to get text into the header or the f7-card-content.
Could someone give me a hint, or am I on the wrong track in general?

Thank you so much!

2

Hey @BobMiles

you’re definitely on the right track - theres just a missing height in your f7-card-header (which isn’t clear based of the example tbh)

image

YAML 
uid: f7-styled-card_example
component: f7-card
slots:
  default:
    - component: f7-card-header
      config:
        valign: bottom
        noBorder: true
        style:
          background-image: url(https://cdn.framework7.io/placeholder/nature-1000x600-3.jpg)
          background-size: cover
          background-position: center
          height: 200px
          --f7-card-header-text-color: rgba(255,255,255)
      slots:
        default:
          - component: Label
            config:
              text: Some generic headline
    - component: f7-card-content
      slots:
        default:
          - component: Label
            config:
              text: ='Posted on ' + dayjs().format('MMMM DD, YYYY')
              class:
                - padding-bottom
              style:
                color: rgba(0,0,0,.5)
          - component: Label
            config:
              text: Bacon ipsum dolor amet pork loin tri-tip picanha, beef ribs venison alcatra filet mignon tongue kevin jerky pastrami. Bacon capicola tenderloin meatball ham fatback. Tri-tip salami boudin kielbasa bresaola. Pastrami shoulder cow chislic sirloin salami.
    - component: f7-card-footer
      slots:
        default:
          - component: f7-link
            config:
              text: I ❤ OpenHAB
          - component: f7-link
            config:
              text: Read more
6 Likes
3

Rainer you made my day (once more)!

Thank you so much, I would’ve never figured that one out!
Hilarious lorem ipsum by the way :smiley:

1 Like