Cards

CardA

Most standard Card style

Inner Site Link

Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum.

External Link

Card with custom content.

Button

No Image

Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum.

1import { CardA } from '@hummingbot/hbui/components/cards/CardA'
2import { Link } from 'react-router-dom' // import from 'gatsby' package in Gatsby projects or from 'next/link' in Next.js projects
3
4<div tw='w-full grid grid-cols-1 gap-0 gap-y-4 lg:(grid-cols-3 gap-1 gap-y-0)'>
5  <CardA
6    tw='mr-xs'
7    imgSrc="https://picsum.photos/id/1/328/200"
8    imgAlt="Test"
9    headerText="Inner Site Link"
10    descriptionText="Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum."
11    linkURL="/"
12    linkClass={Link}
13    external={false}
14  />
15  <CardA
16    tw='mr-xs'
17    imgSrc="https://picsum.photos/id/1/328/200"
18    imgAlt="Test"
19    headerText="External Link"
20    descriptionText="Card with custom content."
21    children={
22      <div>
23        <Button variant='info'>Button</Button>
24      </div>
25    }
26    linkURL="https://www.google.com"
27    external={true}
28  />
29  <CardA
30    headerText="No Image"
31    descriptionText="Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum."
32    linkURL="https://www.google.com"
33    linkClass={Link}
34    external={true}
35  />
36</div>

CardB

Using an icon instead of an image

1import { CardB } from '@hummingbot/hbui/components/cards/CardB'
2import { Link } from 'react-router-dom' // import from 'gatsby' package in Gatsby projects or from 'next/link' in Next.js projects
3
4<div tw='w-full grid grid-cols-1 gap-0 gap-y-4 lg:(grid-cols-3 gap-1 gap-y-0)'>
5  <CardB
6    tw='mr-xs'
7    iconElement={<IconA/>}
8    headerText="Icon Card 1"
9    descriptionText="Inner site link. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus."
10    linkURL="/"
11    linkClass={Link}
12    external={false}
13  />
14  <CardB
15    tw='mr-xs'
16    iconElement={<IconB/>}
17    headerText="Icon Card 2"
18    descriptionText="Card with custom content."
19    children={
20      <div>
21        <Button variant='info'>Button</Button>
22      </div>
23    }
24    linkURL="https://www.google.com"
25    external={true}
26  />
27  <CardB
28    headerText="No Icon"
29    descriptionText="With external link. Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum."
30    linkURL="https://www.google.com"
31    linkClass={Link}
32    external={true}
33  />
34</div>
35
36function IconA() {
37  return (
38    <svg
39      xmlns="http://www.w3.org/2000/svg"
40      width="24"
41      height="24"
42      fill="none"
43      stroke="currentColor"
44      strokeLinecap="round"
45      strokeLinejoin="round"
46      strokeWidth="2"
47      viewBox="0 0 24 24"
48    >
49      <circle cx="12" cy="12" r="10"></circle>
50      <path d="M12 8L12 12"></path>
51      <path d="M12 16L12.01 16"></path>
52    </svg>
53  );
54}
55
56
57function IconB() {
58  return (
59    <svg
60      xmlns="http://www.w3.org/2000/svg"
61      width="24"
62      height="24"
63      fill="none"
64      stroke="currentColor"
65      strokeLinecap="round"
66      strokeLinejoin="round"
67      strokeWidth="2"
68      viewBox="0 0 24 24"
69    >
70      <path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2zM22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"></path>
71    </svg>
72  );
73}

CardC

Bar style card

1import { CardC } from '@hummingbot/hbui/components/cards/CardC'
2import { Link } from 'react-router-dom' // import from 'gatsby' package in Gatsby projects or from 'next/link' in Next.js projects
3
4<div tw='grid grid-cols-1 gap-xs lg:grid-cols-2 w-full content-between'>
5  <CardC
6    iconElement={<IconB/>}
7    headerText="External Link Card 1"
8    descriptionText="Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum."
9    linkURL="https://www.google.com"
10    linkClass={Link}
11    external={true}
12  />
13  <CardC
14    iconElement={<IconB/>}
15    headerText="Internal Link Card 2"
16    descriptionText="Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum."
17    descriptionText="Card with custom content."
18    children={
19      <div>
20        <Button variant='info'>Button</Button>
21      </div>
22    }
23    linkURL="/"
24    external={false}
25    linkClass={Link}
26  />
27  <CardC
28    iconElement={<IconB/>}
29    headerText="External Link Card 3"
30    descriptionText="Vestibulum id ligula porta felis euismod semper. Maecenas faucibus mollis interdum."
31    linkURL="https://www.google.com"
32    linkClass={Link}
33    external={true}
34  />
35  <CardC
36    headerText="Internal Link Card 4"
37    descriptionText="Example without icon. Vestibulum id ligula porta felis euismod semper."
38    linkURL="/"
39    external={false}
40    linkClass={Link}
41  />
42</div>
43
44function IconB() {
45  return (
46    <svg
47      xmlns="http://www.w3.org/2000/svg"
48      width="24"
49      height="24"
50      fill="none"
51      stroke="currentColor"
52      strokeLinecap="round"
53      strokeLinejoin="round"
54      strokeWidth="2"
55      viewBox="0 0 24 24"
56    >
57      <path d="M2 3h6a4 4 0 014 4v14a3 3 0 00-3-3H2zM22 3h-6a4 4 0 00-4 4v14a3 3 0 013-3h7z"></path>
58    </svg>
59  );
60}