component-library | Claromentis Design

<cla-card-figure>

This component slots inside the cla-card-media component and allows an svg or icon to be displayed centrally inside.

Usage

<cla-card>
  <cla-card-media slot="card-top">
    <cla-card-figure>
      <cla-insignia colour="#c82333" size="x-small" width="110" shape="hexagon" type="outline">
        <cla-insignia-image size="x-small" source="https://uxwing.com/wp-content/themes/uxwing/download/sport-and-awards/trophy-icon.png"></cla-insignia-image>
      </cla-insignia>
    </cla-card-figure>
  </cla-card-media>
  <div>Generic card text</div>
</cla-card>

<cla-card>
  <cla-card-media slot="card-top">
    <cla-card-figure>
      <cla-insignia colour="#c82333" size="x-small" width="110" shape="hexagon" type="outline">
        <cla-insignia-image size="x-small" source="https://uxwing.com/wp-content/themes/uxwing/download/sport-and-awards/trophy-icon.png"></cla-insignia-image>
      </cla-insignia>
    </cla-card-figure>
  </cla-card-media>
  <div>Generic card text</div>
</cla-card>

Slots

Slot	Description
any	Holds the cla-insignia in place.

<cla-card-figure>

Usage

Slots

UI Components