PubCard

This is a card component that can be used to display content in a card. It provides various options for customizing the card, such as adding a border, shadow, and rounded corners.

Default Card

AI Chipmakers Race to Ship Faster On-Device Models

A new wave of AI accelerator announcements is pushing laptop and edge devices toward real-time inference, reducing reliance on cloud compute for everyday tasks. Several vendors claim major gains in energy efficiency by pairing updated tensor cores with smarter memory hierarchies, enabling larger models to run locally with lower latency.

<template>
  <pub-card
    href="#"
    class="w-sm"
  >
    <div class="p-5">
      <h5 class="mb-2 text-2xl font-bold tracking-tight text-grey-900">
        AI Chipmakers Race to Ship Faster On-Device Models
      </h5>
      <p class="font-normal text-grey-700">
        A new wave of AI accelerator announcements is pushing laptop and edge devices toward real-time
        inference, reducing reliance on cloud compute for everyday tasks. Several vendors claim major gains in
        energy efficiency by pairing updated tensor cores with smarter memory hierarchies, enabling larger
        models to run locally with lower latency.
      </p>
    </div>
  </pub-card>
</template>

<script lang="ts" setup>
import { PubCard } from 'vuelicity'
</script>

Card with image

AI Chipmakers Race to Ship Faster On-Device Models

A new wave of AI accelerator announcements is pushing laptop and edge devices toward real-time inference, reducing reliance on cloud compute for everyday tasks. Several vendors claim major gains in energy efficiency by pairing updated tensor cores with smarter memory hierarchies, enabling larger models to run locally with lower latency.

<template>
  <pub-card
    img-alt="Desk"
    img-src="/images/image003.jpg"
    variant="image"
    class="w-md"
  >
    <div class="p-5">
      <h5 class="mb-2 text-2xl font-bold tracking-tight text-grey-900">
        AI Chipmakers Race to Ship Faster On-Device Models
      </h5>
      <p class="font-normal text-grey-700">
        A new wave of AI accelerator announcements is pushing laptop and edge devices toward real-time
        inference, reducing reliance on cloud compute for everyday tasks. Several vendors claim major gains in
        energy efficiency by pairing updated tensor cores with smarter memory hierarchies, enabling larger
        models to run locally with lower latency.
      </p>
    </div>
  </pub-card>
</template>

<script lang="ts" setup>
import { PubCard } from 'vuelicity'
</script>

Horizontal Card

AI Chipmakers Race to Ship Faster On-Device Models

A new wave of AI accelerator announcements is pushing laptop and edge devices toward real-time inference, reducing reliance on cloud compute for everyday tasks. Several vendors claim major gains in ...

<template>
  <pub-card
    img-alt="Desk"
    img-src="/images/image001.jpg"
    variant="horizontal"
    class="w-lg"
  >
    <div class="p-5">
      <h5 class="mb-2 text-2xl font-bold tracking-tight text-grey-900">
        AI Chipmakers Race to Ship Faster On-Device Models
      </h5>
      <p class="font-normal text-grey-700">
        A new wave of AI accelerator announcements is pushing laptop and edge devices toward real-time
        inference, reducing reliance on cloud compute for everyday tasks. Several vendors claim major gains in
        ...
      </p>
    </div>
  </pub-card>
</template>

<script lang="ts" setup>
import { PubCard } from 'vuelicity'
</script>

Reference

Properties

Name	Type	Default	Description	Options
href	String	''	The URL to navigate to when the card is clicked.
imgAlt	String	''	The alternative text for the image.
imgSrc	String	''	The URL of the image.
variant	String	'default'	The variant of the card.	'default', 'image', 'horizontal'
class	String	''	Additional CSS classes to apply.

Slots

Name	Description
default	Default slot