Custom component tile with image and text

Anvil Q&A
1

What I’m trying to do:
Create a custom component card with an image, headline, and sub-text. This can be then dropped multiple times on a landing page.

What I’ve tried and what’s not working:
I can create the custom component no problems. The problem is when I drop it onto the landing page. How can I load an image, its heading and its subtext into each component?

Clone link:
https://anvil.works/build#clone:GVO47M54HICNNKWT=BZES7TB3BSFFSNK3FVNYJXI5

2

You’ll need to add code to make those attributes functional. See https://anvil.works/docs/client/custom-components#custom-properties

1 Like
3

You could also just create a blank form with those components on it and then add it to what ever form you want. Check out this in the docs

https://anvil.works/docs/client/components/forms

1 Like
4

Thanks for your links to the documentation. That helped.
Answer:

  1. Create a form
  2. place the components in the form
  3. in the init() of this form:
  def __init__(self, **properties):
    self.headline_1.text = properties["headline"]
    self.image_1.source = properties["image"]
    self.label_1.text = properties["text"]
    # Set Form properties and Data Bindings.
    self.init_components(**properties)
  1. over at the left menu, click the arrow next to file name
  2. “Use as component”
  3. Check the box “Make this form available as components”
  4. Add properties that match the keys of properties in 4) NOTE: use ICON for the image
    Note: These are assigned during runtime
  5. drag this form into parent form
  6. in the design window, fill in the properties fields
  7. press “RUN”
1 Like