notes.web/codex-ui/dev/pages/components/Card.vue at 9f149c197d6d82a556a9f82aa85e0d73c44daa6e · codex-team/notes.web · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<template>
  <PageHeader>
    Card
    <template #description>
      Display entity with a title, description, picture and actions
    </template>
  </PageHeader>

  <Heading :level="2">
    Horizontal card
  </Heading>

  <Card
    title="Card title"
    subtitle="Card description"
    orientation="horizontal"
    src="https://via.placeholder.com/150"
  >
    <Button icon="Plus" />
  </Card>

  <Heading :level="2">
    Vertical card
  </Heading>

  <Card
    title="Card title"
    subtitle="Card description"
    orientation="vertical"
    src="https://via.placeholder.com/150"
  >
    <Button icon="Plus" />
  </Card>
</template>

<script setup lang="ts">
import PageHeader from '../../components/PageHeader.vue';
import { Card, Heading, Button } from '../../../src/vue';

</script>

<style scoped>
</style>