Card Content - JS + CSS

Card Content

Struktur HTML


<div class="ina-card ina-card--variant-basic ina-card--media-bottom">
  <div class="ina-card__content">
    <div class="ina-card__avatar">AA</div>
    <div>
      <h3 class="ina-card__title">Title</h3>
      <p class="ina-card__description">
        This is a placeholder title for demonstration purposes.
      </p>
    </div>
    <div class="ina-card__button">
      <button class="ina-button ina-button--primary ina-button--md">Button CTA</button>
    </div>
  </div>
  <div class="ina-card__media">Card Media</div>
</div>

Contoh Penggunaan

Contoh 1 - Basic Card

Title

This is a placeholder title for demonstration purposes.

<div style="display: flex; flex-wrap: wrap; gap: 16px">
  <div class="ina-card ina-card--variant-basic ina-card--media-bottom">
    <div class="ina-card__content">
      <div class="ina-card__avatar">
        <img src={avatarImage} alt="Avatar" />
      </div>
      <div>
        <h3 class="ina-card__title">Title</h3>
        <p class="ina-card__description">This is a placeholder title for demonstration purposes.</p>
      </div>
      <div class="ina-card__button">
        <button class="ina-button ina-button--primary ina-button--md">Button CTA</button>
      </div>
    </div>
    <div class="ina-card__media">
      <img src={contohMedia} alt="Card media" />
    </div>
  </div>
</div>

Contoh 2 - Horizontal Card

Title

Please provide a title that accurately reflects the content, along with a detailed description.

<div style="display: flex; flex-wrap: wrap; gap: 16px">
  <div class="ina-card ina-card--variant-horizontal ina-card--media-right">
    <div class="ina-card__content">
      <div class="ina-card__avatar">
        <img src={avatarImage} alt="Avatar" />
      </div>
      <div>
        <h3 class="ina-card__title">Title</h3>
        <p class="ina-card__description">
          Please provide a title that accurately reflects the content, along with a detailed
          description.
        </p>
      </div>
      <div class="ina-card__button">
        <button class="ina-button ina-button--primary ina-button--md">Button CTA</button>
      </div>
    </div>
    <div class="ina-card__media">
      <img src={contohMedia} alt="Card media" />
    </div>
  </div>
</div>

Contoh 3 - Overlay Card

Title

This is a placeholder title for demonstration purposes.

<div style="display: flex; flex-wrap: wrap; gap: 16px">
  <div class="ina-card ina-card--variant-overlay ina-card--media-top">
    <div class="ina-card__media">
      <img src={contohMedia} alt="Card media" />
    </div>
    <div class="ina-card__content">
      <div class="ina-card__avatar">
        <img src={avatarImage} alt="Avatar" />
      </div>
      <div>
        <h3 class="ina-card__title">Title</h3>
        <p class="ina-card__description">This is a placeholder title for demonstration purposes.</p>
      </div>
      <div class="ina-card__button">
        <button class="ina-button ina-button--primary ina-button--md">Button CTA</button>
      </div>
    </div>
  </div>
</div>

Contoh 4 - Card Plain

CardPlain Title

This is a custom content block inside a CardPlain component. It provides a simple bordered container with a radius, letting you structure the content however you want.

<div class="ina-card-plain">
  <div class="flex flex-col gap-2">
    <h3 class="text-xl font-semibold text-content-primary m-0">CardPlain Title</h3>
    <p class="text-base text-content-secondary m-0">
      This is a custom content block inside a CardPlain component. It provides a simple bordered
      container with a radius, letting you structure the content however you want.
    </p>
  </div>
</div>