22title : Card
33description : Lorem ipsum dolor sit amet, consectetur adipiscing elit.
44permalink : card
5- icon : lucide:bell
5+ icon : lucide:grid-2x2
66---
77
88# Cards
@@ -11,22 +11,22 @@ This component allows you to group text elements while providing visual impact.
1111
1212```
1313:::card-group
14- :::card {label="Test ", icon="lucide:bell"}
14+ :::card {label="Lorem ipsum dolor sit amet ", icon="lucide:bell"}
1515 Lorem ipsum dolor sit amet, consectetur adipiscing elit,
1616 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
1717 :::
18- :::card {label="Test ", icon="lucide:bell"}
18+ :::card {label="Lorem ipsum dolor sit amet ", icon="lucide:bell"}
1919 Lorem ipsum dolor sit amet, consectetur adipiscing elit,
2020 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2121 :::
2222:::
2323```
2424
2525:::card-group { cols = 2 }
26- :::card { label = " Test " , icon = " lucide:bell" }
26+ :::card { label = " Lorem ipsum dolor sit amet " , icon = " lucide:bell" }
2727Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
2828:::
29- :::card { label = " Test " , icon = " lucide:bell" }
29+ :::card { label = " Lorem ipsum dolor sit amet " , icon = " lucide:bell" }
3030Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
3131:::
3232:::
@@ -44,22 +44,22 @@ You can customize the number of elements per line by setting the `cols` prop.
4444
4545```
4646:::card-group {cols=4}
47- :::card {label="Test ", icon="lucide:bell"}
47+ :::card {label="Lorem ipsum dolor sit amet ", icon="lucide:bell"}
4848 Lorem ipsum dolor sit amet, consectetur adipiscing elit,
4949 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
5050 :::
51- :::card {label="Test ", icon="lucide:bell"}
51+ :::card {label="Lorem ipsum dolor sit amet ", icon="lucide:bell"}
5252 Lorem ipsum dolor sit amet, consectetur adipiscing elit,
5353 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
5454 :::
5555:::
5656```
5757
5858:::card-group { cols = 4 }
59- :::card { label = " Test " , icon = " lucide:bell" }
59+ :::card { label = " Lorem ipsum dolor sit amet " , icon = " lucide:bell" }
6060Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
6161:::
62- :::card { label = " Test " , icon = " lucide:bell" }
62+ :::card { label = " Lorem ipsum dolor sit amet " , icon = " lucide:bell" }
6363Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
6464:::
6565:::
@@ -68,29 +68,29 @@ If the elements cannot be aligned horizontally, they will be moved to the next l
6868
6969```
7070:::card-group {cols=2}
71- :::card {label="Test ", icon="lucide:bell"}
71+ :::card {label="Lorem ipsum dolor sit amet ", icon="lucide:bell"}
7272 Lorem ipsum dolor sit amet, consectetur adipiscing elit,
7373 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
7474 :::
75- :::card {label="Test ", icon="lucide:bell"}
75+ :::card {label="Lorem ipsum dolor sit amet ", icon="lucide:bell"}
7676 Lorem ipsum dolor sit amet, consectetur adipiscing elit,
7777 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
7878 :::
79- :::card {label="Test ", icon="lucide:bell"}
79+ :::card {label="Lorem ipsum dolor sit amet ", icon="lucide:bell"}
8080 Lorem ipsum dolor sit amet, consectetur adipiscing elit,
8181 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
8282 :::
8383:::
8484```
8585
8686:::card-group { cols = 2 }
87- :::card { label = " Test " , icon = " lucide:bell" }
87+ :::card { label = " Lorem ipsum dolor sit amet " , icon = " lucide:bell" }
8888Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
8989:::
90- :::card { label = " Test " , icon = " lucide:bell" }
90+ :::card { label = " Lorem ipsum dolor sit amet " , icon = " lucide:bell" }
9191Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
9292:::
93- :::card { label = " Test " , icon = " lucide:bell" }
93+ :::card { label = " Lorem ipsum dolor sit amet " , icon = " lucide:bell" }
9494Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
9595:::
9696:::
@@ -107,22 +107,22 @@ Vous pouvez personaliser chacune de vos cartes en utilisant les props suivantes
107107
108108```
109109:::card-group
110- :::card {label="Test ", icon="lucide:bell"}
110+ :::card {label="Lorem ipsum dolor sit amet ", icon="lucide:bell"}
111111 Lorem ipsum dolor sit amet, consectetur adipiscing elit,
112112 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
113113 :::
114- :::card {label="Test ", icon="lucide:user"}
114+ :::card {label="Lorem ipsum dolor sit amet ", icon="lucide:user"}
115115 Lorem ipsum dolor sit amet, consectetur adipiscing elit,
116116 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
117117 :::
118118:::
119119```
120120
121121:::card-group { cols = 2 }
122- :::card { label = " Test " , icon = " lucide:bell" }
122+ :::card { label = " Lorem ipsum dolor sit amet " , icon = " lucide:bell" }
123123Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
124124:::
125- :::card { label = " Test " , icon = " lucide:user" }
125+ :::card { label = " Lorem ipsum dolor sit amet " , icon = " lucide:user" }
126126Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
127127:::
128128:::
0 commit comments