How to make a component take html as a prop value?

[gleaming hedge]

I cant think of any other way to navigate this. I am using this hero component on every page which have a hero but I want to have custom styling to the tagline like I have done in the else case. Is there a better way to implement this?

---
interface Props {
  title: string;
  tagline: string;
  align?: "start" | "center";
}

const { align = "center", title, tagline } = Astro.props;
---

<header class:list={["hero stack gap-4", align]}>
  <div
    class="prose mt-10 flex flex-col items-start space-y-5 md:mt-32 md:space-y-7 md:px-5 lg:mt-32">
    <h1 class="py-0 my-0 text-black">{title}</h1>
    {
      tagline ? (
        <p class="tracking-[0.4px] font-medium my-0 text-gray-500 leading-6">
          {tagline}
        </p>
      ) : (
        <p class="tracking-[0.4px] font-medium my-0 text-gray-500 leading-6">
          I create{" "}
          <span class="font-semibold text-black">
            polished, profitable and performant
          </span>{" "}
          websites that{" "}
          <span class="font-semibold text-black">deliver robust ROI</span> for{" "}
          <span class="font-semibold">
            busines owners, startups, and ambitious individuals
          </span>{" "}
          seeking to{" "}
          <span class="font-semibold text-black">
            boost their online presence
          </span>
          .
        </p>
      )
    }
  </div>
  <slot />
</header>```

<@&1129102257422610512>

[weak hare]

Are you sure you don’t just want to put the HTML in the slot? Why a prop?

[vocal wraith]

Hello @olive hemlock, like @weak hare said I'd go with slots https://docs.astro.build/en/core-concepts/astro-components/#slots or creating your custom web component with custom elements https://docs.astro.build/en/guides/client-side-scripts/#web-components-with-custom-elements

[cedar pilot]

<div
    class="prose mt-10 flex flex-col items-start space-y-5 md:mt-32 md:space-y-7 md:px-5 lg:mt-32">
    <h1 class="py-0 my-0 text-black">{title}</h1>
    
    <slot name="tagline">
      <p class="tracking-[0.4px] font-medium my-0 text-gray-500 leading-6">
        {tagline ?? (
          <>
            I create{" "}
            <span class="font-semibold text-black">
              polished, profitable and performant
            </span>{" "}
            websites that{" "}
            <span class="font-semibold text-black">deliver robust ROI</span> for{" "}
            <span class="font-semibold">
              busines owners, startups, and ambitious individuals
            </span>{" "}
            seeking to{" "}
            <span class="font-semibold text-black">
              boost their online presence
            </span>
            .
          </>
        )}
      </p>
   </slot>
</div>

i use this pattern a lot for my hero/generic blocs

it's a bit messy bc there's no correlation between prop name and slot name. i've been opening a discussion about it in the roadmap, but no answer so far https://github.com/withastro/roadmap/discussions/652