[Req] Having a feature image

[nisrulz]

Is your feature request related to a problem? Please describe.

I am just exploring the project. I have been looking for an alternative way to setup the features section. Currently, the section takes in a way to specify an icon but that means the icon is limited to small size version.

Below is the snippet from the docs

---
layout: home

features:
  - icon: 🛠️
    title: Simple and minimal, always
    details: Lorem ipsum...
  - icon:
      src: /cool-feature-icon.svg
    title: Another cool feature
    details: Lorem ipsum...
  - icon:
      dark: /dark-feature-icon.svg
      light: /light-feature-icon.svg
    title: Another cool feature
    details: Lorem ipsum...
---

and looks like this:

Describe the solution you'd like

I am mostly looking to create a feature section that looks like below:

Markdown might looks like below:

---
layout: home

features:
  - img:
      src: /cool-feature-image.png
    title: Another cool feature
    details: Lorem ipsum...
    link:
       title: Link 1
       url: www.some-cool-url.com
    link:
       title: Link 2
       url: www.some-cool-url-for-project.com

---

where the img is not bound by css such as one for setting a small icon. It acts as an feature/banner image in the card. This is a common pattern in Blogs to setup feature cards.

Additionally, having only the image be full bleed at the top of the card like below will blend in well with the design asthetics. This I believe is achievable by setting the image as a background to a div component instead of adding an image component as I suggested above.

Here is how it should look:

---

Here is a diff of components I changed in order to achieve this using "Inspect" in chrome. I simply changed h2 tag to img tag and added a atag for link inside the generated feature block.

Describe alternatives you've considered

Closest thing I came across in the docs was Teams Page, but they are for a specific usecase and has circular profile image section.

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Read the docs.
• [X] Read the Contributing Guidelines.
• [X] Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[nisrulz]

I am not a web dev, however I would like to help with code. I might need some pointers I believe with maybe some PR example to understand how you expect the code to look like/patterns you follow.

[nisrulz]

I believe this is where I need to change code so it allows using a VPImage without applying icon constraints.

[nisrulz]

Looking at the code now, I think I can do it without requiring a feature request. I was able to achieve this using the below markdown:

layout: home

features:
  - icon:
      src: 'assets/feature/f_1.png'
      alt: 'Feature Image 1'
      height: 100%
      width: 100%
    title: Some title
    details: Lorem ipsum dolor sit amet, consectetur adipiscing elit
    link: https://www.google.com

and

---

I can't add another link, as the page breaks but it is not a dealbreaker. More like a nice to have 😄

[nisrulz]

Closing this now. Maybe someone else is looking for something similar and this issues helps them out. The docs can be improved to cover this use case.

Thank you 🎉