Book

<template>
  <PBook title="The user experience of the Frontend Cloud" />
</template>

<template>
  <PStack gap="8">
    <PBook
      title="The user experience of the Frontend Cloud"
      variant="simple"
    />
    <PBook
      title="The user experience of the Frontend Cloud"
      variant="stripe"
    />
  </PStack>
</template>

<template>
  <PStack gap="8">
    <PBook
      color="#9D2127"
      title="How Vercel improves your website's search engine ranking"
    />
    <PBook
      color="#7DC1C1"
      title="Design Engineering at Vercel"
      class="text-white"
      variant="simple"
    />
    <PBook
      color="#FED954"
      title="The user experience of the Frontend Cloud"
    />
  </PStack>
</template>

<script setup>
import Alpha from '@gdsicon/vue/alpha'
</script>

<template>
  <PStack gap="8">
    <PBook
      color="#9D2127"
      title="The user experience of the Frontend Cloud"
    >
      <template #icon>
        <svg fill="none" viewBox="0 0 197 149" width="197" height="149" xmlns="http://www.w3.org/2000/svg"><rect fill="#FED954" height="149" width="197"></rect><path d="M147 48.4995H172C185.531 48.4995 196.5 59.4685 196.5 72.9995V148.427" stroke="#ECAF14"></path><path d="M0 48.5H24.5C38.031 48.5 49 37.531 49 24V0" stroke="#ECAF14"></path><path d="M147.5 48.5H172C185.531 48.5 196.5 37.531 196.5 24V0" stroke="#ECAF14"></path><path d="M0 48.5H24.5C38.031 48.5 49 59.469 49 73V98" stroke="#ECAF14"></path><path d="M146 48.5H73.5C59.969 48.5 49 37.531 49 24V0" stroke="#ECAF14"></path><path d="M196 48.5H122.5C108.969 48.5 98 37.531 98 24V0" stroke="#ECAF14"></path><path d="M97 48.5H73.5C59.969 48.5 49 59.469 49 73V99.5" stroke="#ECAF14"></path><path d="M98 132.5H122.5C136.031 132.5 147 121.531 147 108V98.9512" stroke="#ECAF14"></path><path d="M196 132.5H171.5C157.969 132.5 147 121.531 147 108V48.5" stroke="#ECAF14"></path><path d="M147 48.5H122.5C108.969 48.5 98 59.469 98 73V132" stroke="#ECAF14"></path><path d="M98 132.5H73.5C59.969 132.5 49 121.531 49 108V98.9512" stroke="#ECAF14"></path></svg>
      </template>
    </PBook>
    <PBook
      color="#7DC1C1"
      title="Design Engineering at Vercel"
      class="text-white"
      variant="simple"
    >
      <template #icon>
        <Alpha class="text-2xl" />
      </template>
    </PBook>
  </PStack>
</template>

<template>
  <PBook
    title="The user experience of the Frontend Cloud"
    :width="{ sm: 150, md: 220 }"
  />
</template>

<template>
  <PStack gap="8" align="end">
    <PBook
      title="The user experience of the Frontend Cloud"
      width="300"
    />
    <PBook
      title="The user experience of the Frontend Cloud"
      width="200"
    />
    <PBook
      title="The user experience of the Frontend Cloud"
      width="150"
    />
  </PStack>
</template>

<template>
  <PStack gap="8">
    <PBook
      title="The user experience of the Frontend Cloud"
      variant="simple"
      textured
    />
    <PBook
      title="The user experience of the Frontend Cloud"
      variant="stripe"
      textured
    />
  </PStack>
</template>