Estoy usando Angular2 con la interfaz de usuario semántica como una biblioteca CSS. Tengo este pedazo de código:

<div class="ui three stakable cards">
   <a class="ui card"> ... </a>
   <a class="ui card"> ... </a>
   <a class="ui card"> ... </a>
</div>

las tarjetas se representan muy bien con un espacio entre ellas. Me gusta esto:consulte la sección de tarjetas en el enlace

Como las tarjetas representan algún tipo de vista, pensé en hacer un componente de ella, así que ahora el código es:

<div class="ui three stakable cards">
   <my-card-component></my-card-component>
   <my-card-component></my-card-component>
   <my-card-component></my-card-component>
</div>

pero ahora el estilo está roto, ya no hay espacio entre ellos.

¿Hay alguna buena manera de arreglar esto?

Lo primero que pensé hacer es esto:

my-card-component OLD template:
<a class="ui card">
    [some junk]
</a>

           |||
           VVV

my-card-component NEW template:
[some junk]

and instantiating like:
<my-card-component class="ui card"></my-card-component>
or like:
<a href="?" my-card-component></a>

pero esto no es satisfactorio ya que quiero poder pasar un objeto y el componente establecerá automáticamente el[href]=obj.link.

en AngularJS 1.0 había unreplace: true propiedad que hace exactamente lo que necesito,¿Hay algo similar en Angular2?