Blog Section - JS + CSS

Blog Section

Contoh Penggunaan

Kumpulan Informasi dan Perkembangan Terbaru Terkait INA DIGITAL

Jelajahi berita terbaru, inovasi terkini, dan wawasan menarik. Temukan informasi yang Anda butuhkan disini.

"Perkuat Birokrasi, Pemerintah Lanjutkan Pengembangan Keterpaduan Layanan Digital Nasional"

"Percepatan transformasi digital dan keterpaduan layanan digital nasional melalui penyelenggaraan Aplikasi Sistem Pemerintahan Berbasis Elektronik (SPBE) Prioritas terus disempurnakan."

"Wujudkan Indonesia Terintegrasi, Tiga Produk Inovasi INA DIGITAL Mulai Dirilis Secara Terbatas"

"Pemerintah memulai Rilis Terbatas Tahap Pertama produk INA DIGITAL sebagai bagian dari integrasi layanan digital pemerintah Indonesia."

"INA Digital Jadi Tol Layanan Publik, Begini Tahapannya"

"Govtech sendiri merupakan bentuk keterpaduan layanan pemerintah."

<div class="flex flex-col gap-4 lg:gap-6 p-4 w-full">
  <div class="space-y-1 md:space-y-2">
    <h1 class="text-sm md:text-base lg:text-lg font-semibold">
      Kumpulan Informasi dan Perkembangan Terbaru Terkait INA DIGITAL
    </h1>
    <p class="text-xs">
      Jelajahi berita terbaru, inovasi terkini, dan wawasan menarik. Temukan informasi yang Anda
      butuhkan disini.
    </p>
  </div>
  <div class="flex flex-col sm:flex-row gap-2 lg:gap-3 text-xs">
    <!-- Card 1 -->
    <div class="ina-card ina-card--variant-basic ina-card--media-top">
      <div class="ina-card__media">
        <img src={illustrasiImage1} alt="Card media" />
      </div>
      <div class="ina-card__content">
        <div>
          <h3 class="ina-card__title text-sm font-semibold line-clamp-2">
            "Perkuat Birokrasi, Pemerintah Lanjutkan Pengembangan Keterpaduan Layanan Digital
            Nasional"
          </h3>
          <p class="ina-card__description text-xs">
            "Percepatan transformasi digital dan keterpaduan layanan digital nasional melalui
            penyelenggaraan Aplikasi Sistem Pemerintahan Berbasis Elektronik (SPBE) Prioritas terus
            disempurnakan."
          </p>
        </div>
        <div class="ina-card__button">
          <button class="ina-button ina-button--primary ina-button--md">Button CTA</button>
        </div>
      </div>
    </div>

    <!-- Card 2 -->
    <div class="ina-card ina-card--variant-basic ina-card--media-top">
      <div class="ina-card__media">
        <img src={illustrasiImage2} alt="Card media" />
      </div>
      <div class="ina-card__content">
        <div>
          <h3 class="ina-card__title text-sm font-semibold line-clamp-2">
            "Wujudkan Indonesia Terintegrasi, Tiga Produk Inovasi INA DIGITAL Mulai Dirilis Secara
            Terbatas"
          </h3>
          <p class="ina-card__description text-xs">
            "Pemerintah memulai Rilis Terbatas Tahap Pertama produk INA DIGITAL sebagai bagian dari
            integrasi layanan digital pemerintah Indonesia."
          </p>
        </div>
        <div class="ina-card__button">
          <button class="ina-button ina-button--primary ina-button--md">Button CTA</button>
        </div>
      </div>
    </div>

    <!-- Card 3 -->
    <div class="ina-card ina-card--variant-basic ina-card--media-top">
      <div class="ina-card__media">
        <img src={illustrasiImage3} alt="Card media" />
      </div>
      <div class="ina-card__content">
        <div>
          <h3 class="ina-card__title text-sm font-semibold line-clamp-2">
            "INA Digital Jadi Tol Layanan Publik, Begini Tahapannya"
          </h3>
          <p class="ina-card__description text-xs">
            "Govtech sendiri merupakan bentuk keterpaduan layanan pemerintah."
          </p>
        </div>
        <div class="ina-card__button">
          <button class="ina-button ina-button--primary ina-button--md">Button CTA</button>
        </div>
      </div>
    </div>
  </div>
  <div>
    <button type="button" class="ina-button ina-button--primary ina-button--md">
      Lihat Semua
    </button>
  </div>
</div>