Nmorph UI Kit

Card

Defines the shadow type for the card.

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque culpa assumenda, earum repellendus blanditiis explicabo laborum ipsam quia reiciendis autem hic cupiditate, illum incidunt quod voluptate, sequi accusamus ipsa quis.

<script setup lang="ts">
import { NmorphCard, NmorphImage } from "@nmorph/nmorph-ui-kit";
import { Summer } from "~/assets/images";
</script>

<template>
  <div class="card-shadow-type-overview">
    <div class="card-shadow-type-overview__element">
      <NmorphCard :paper="3">
        <template #header>Lorem ipsum</template>

<template #default>
          <p>
            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque
            culpa assumenda, earum repellendus blanditiis explicabo laborum
            ipsam quia reiciendis autem hic cupiditate, illum incidunt quod
            voluptate, sequi accusamus ipsa quis.
          </p>
        </template>

<template #footer
          >&copy; {{ new Date().getFullYear() }} NMORPH. All rights
          reserved.</template
        >
      </NmorphCard>
    </div>
    <div class="card-shadow-type-overview__element">
      <NmorphCard shadow-type="combined" :paper="3">
        <p>
          Lorem, ipsum dolor sit amet consectetur adipisicing elit. Neque
          culpa assumenda, earum repellendus blanditiis explicabo laborum
          ipsam quia reiciendis autem hic cupiditate, illum incidunt quod
          voluptate, sequi accusamus ipsa quis.
        </p>
      </NmorphCard>
    </div>
    <div class="card-shadow-type-overview__element">
      <NmorphCard shadow-type="inset" :paper="3">
        <template #header>Summer</template>

<template #default>
          <NmorphImage :src="Summer" />
        </template>

Sets the card padding.

Compact padding

Numeric padding

Token padding

<script setup lang="ts">
import { NmorphCard } from "@nmorph/nmorph-ui-kit";
</script>

<template>
  <div class="card-padding-overview">
    <NmorphCard card-padding="8px" :paper="3">Compact padding</NmorphCard>
    <NmorphCard :card-padding="24" :paper="3">Numeric padding</NmorphCard>
    <NmorphCard card-padding="var(--indentation-06)" :paper="3">Token padding</NmorphCard>
  </div>
</template>

Adds a subtle paper texture. Use 0 to disable it, then increase the value for a stronger effect.

Paper 0

Paper 2

Paper 5

<script setup lang="ts">
import { NmorphCard } from "@nmorph/nmorph-ui-kit";
</script>

<template>
  <div class="card-paper-overview">
    <NmorphCard :paper="0">
      <span>Paper 0</span>
    </NmorphCard>
    <NmorphCard :paper="2">
      <span>Paper 2</span>
    </NmorphCard>
    <NmorphCard :paper="5">
      <span>Paper 5</span>
    </NmorphCard>
  </div>
</template>

Controls whether the card stretches to the available width or fits its content.

Takes the available width.

Width follows the content.

<script setup lang="ts">
import { NmorphCard } from "@nmorph/nmorph-ui-kit";
</script>

<template>
  <div class="card-fill-overview">
    <NmorphCard :paper="3">
      <template #header>Fill</template>

<template #header>Fit content</template>

Changes the HTML tag used for the card root element.

Semantic card root rendered as article.

Semantic card root rendered as section.

<script setup lang="ts">
import { NmorphCard } from "@nmorph/nmorph-ui-kit";
</script>

<template>
  <div class="card-tag-overview">
    <NmorphCard tag="article" :paper="3">
      <template #header>Article</template>

<template #header>Section</template>

Shadow Type

Card Padding

Paper

Fill

Tag

NmorphCard Api

Attributes

Slots

Resolution is not supported