Skip to content

Build a Component for Rounded Containers with Rich Content #316

Description

@matthias-eb
  • Component or Package Name: jsx-email
  • Component or Package Version: 2.7.0

Feature Use Case

I have a Button that has rich content and rounded corners. This renders perfectly fine for modern Clients but does not work with Outlook: It generates a roundrect vml that displays a rounded button, but the rich content is not inside that button but rendered below.

There is a hack for this using shapes in the corners with additional table cells:
https://kontent.ai/blog/emails-outlook-containers-rounded-courners/

I can write this using the <Raw /> and <Conditional /> component, but this is tedious.

Feature Proposal

I would like to have a Component or option in existing components that does this automatically. For example, when using a <Container />, it should optimally recognize the Tailwind "rounded" class and add the vml comments from the article above. I don't know if that already happens, otherwise this sounds like a lot of work. Alternatively a simple <RoundRichContainer /> which always places these would also suffice.

Thank you in advance for considering it.

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions