title: Pass HTML into custom Component
body: <p>I've created a custom component to simply layout content inside IonCardContent. This works great for my needs so far:</p>
  <pre><code>interface ContainerProps {
      position?: string;
      content?: string,
      colour?: string;
      custClass?: string;
  }
  
  const CardContainer: React.FC&lt;ContainerProps&gt; = ({ position = &quot;right&quot;, content = &quot;n/a&quot;, colour = &quot;&quot;, custClass = &quot;&quot; }) =&gt; {
      
      if ( position.trim().toLowerCase() === &quot;right&quot; ) {
          return &lt;&gt;&lt;div className={&quot;ion-float-right &quot; + custClass} &gt;{content}&lt;/div&gt;&lt;div className=&quot;clear-right&quot;&gt;&lt;/div&gt;&lt;/&gt;
      } else if ( position.trim().toLowerCase() === &quot;left&quot; ) {
          return &lt;div className={&quot;ion-float-left &quot; + custClass}&gt;{content}&lt;/div&gt; 
      } else if ( position.trim().toLowerCase() === &quot;full&quot; ) {
          return &lt;div className={&quot;&quot;  + custClass}&gt;{content}&lt;/div&gt;
      } else if ( position.trim().toLowerCase() === &quot;empty&quot; ) { 
          return &lt;div className={&quot;&quot;  + custClass}&gt;&amp;nbsp;&lt;/div&gt; 
      } else {
          return null
      }  
  };
  
  export default CardContainer;
  </code></pre>
  <p>However, I'd now like to start passing in some html elements to the component so I can do things like highlight sections of text by making it bold or by wrapping part of the string in a span and adding a css class to it.</p>
  <p>At present, adding html to the content attribute just results in this being displayed as a literal string. This is obviously due to &quot;content&quot; being declared as a string.</p>
  <p>Is the solution to displaying html simply changing the type declaration in the Interface? If so, what to? Or is a more complex solution required?</p>
  <p>Thanks.</p>