Card by zanina-yassine

Made by

@zanina-yassine

Theme:

Light

#card

#e8e8e8

509 views

CSSAdd prefixes

1.card {
2  width: 450px;
3  background: #FFFFFF;
4  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
5  border-radius: 11px;
6}
7
8.search-container {
9  display: flex;
10  align-items: center;
11  justify-content: flex-start;
12  gap: 10px;
13  padding: 0 20px;
14}
15
16.search-container input {
17  width: 100%;
18  height: 50px;
19  border: 0;
20  outline: none;
21  font-size: 13px;
22}
23
24.categories {
25  display: flex;
26  align-items: center;
27  justify-content: flex-start;
28  gap: 5px;
29  padding: 0px 20px 20px 20px;
30}
31
32.categories button {
33  display: flex;
34  justify-content: center;
35  align-items: center;
36  padding: 8px 15px;
37  background: #FFFFFF;
38  border: 1px solid #E5E5E5;
39  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
40  border-radius: 20px;
41  font-weight: 600;
42  color: #171718;
43  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
44}
45
46.categories button:hover {
47  transform: scale(1.05) translateY(-3px);
48}
49
50.results {
51  display: flex;
52  flex-direction: column;
53  gap: 10px;
54}
55
56.results hr {
57  width: 100%;
58  height: 1px;
59  border: 0;
60  background-color: #ECECEC;
61}
62
63.results p {
64  padding: 0 20px;
65}
66
67p.label {
68  font-weight: 600;
69  font-size: 11px;
70  line-height: 13px;
71  color: #5F6368;
72}
73
74.results .entry {
75  display: grid;
76  grid-template-columns: 40px 1fr 40px;
77  gap: 12px;
78  padding: 5px 20px;
79  transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1);
80}
81
82.results .entry:hover {
83  background-color: #F5F8FE;
84}
85
86.results .results-list .entry:hover .icon {
87  background-color: #1763fa;
88}
89
90.results .results-list .entry:hover .icon svg path,
91.results .results-list .entry:hover .icon svg circle {
92  stroke: #ffffff;
93}
94
95.results .results-list .entry:hover label {
96  color: #1763fa;
97}
98
99.results .results-list .entry:hover span {
100  color: #7ba0eb;
101}
102
103.results .results-list {
104  display: flex;
105  flex-direction: column;
106}
107
108.results .entry .icon {
109  width: 40px;
110  height: 40px;
111  display: flex;
112  align-items: center;
113  justify-content: center;
114  background-color: #ECECEC;
115  border-radius: 7px;
116  transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1);
117}
118
119.results .entry .desc {
120  display: flex;
121  flex-direction: column;
122  justify-content: center;
123  gap: 5px;
124}
125
126.results .entry .desc label {
127  display: block;
128  font-weight: 600;
129  font-size: 12px;
130  line-height: 15px;
131  color: #171718;
132}
133
134.results .entry .desc span {
135  font-weight: 600;
136  font-size: 10px;
137  line-height: 12px;
138  color: #72767c;
139}
140
141.results .entry .badge {
142  width: 40px;
143  height: 24px;
144  display: flex;
145  align-items: center;
146  justify-content: center;
147  margin: auto;
148  background: #DDFFDE;
149  border: 1px solid #08581d0e;
150  border-radius: 7px;
151  font-weight: 700;
152  font-size: 11px;
153  line-height: 13px;
154  text-align: center;
155  color: #08581D;
156}
157
158.card-footer {
159  height: 40px;
160  display: flex;
161  align-items: center;
162  gap: 25px;
163  margin-top: 10px;
164  padding: 0 7px;
165  background: #F8F8F8;
166}
167
168.card .action {
169  display: flex;
170  align-items: center;
171  gap: 5px;
172}
173
174.card .action p {
175  padding-left: 5px;
176}
177
178.card-footer button {
179  width: 24px;
180  height: 24px;
181  display: flex;
182  align-items: center;
183  justify-content: center;
184  border-radius: 6px;
185  border: 0;
186  background: #ECECEC;
187  outline: none;
188}
189
190.edit-actions {
191  width: 100%;
192  text-align: right;
193  padding-right: 10px;
194  opacity: 0.6;
195}

.card {
  width: 450px;
  background: #FFFFFF;
  box-shadow: 0px 187px 75px rgba(0, 0, 0, 0.01), 0px 105px 63px rgba(0, 0, 0, 0.05), 0px 47px 47px rgba(0, 0, 0, 0.09), 0px 12px 26px rgba(0, 0, 0, 0.1), 0px 0px 0px rgba(0, 0, 0, 0.1);
  border-radius: 11px;
}

.search-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  padding: 0 20px;
}

.search-container input {
  width: 100%;
  height: 50px;
  border: 0;
  outline: none;
  font-size: 13px;
}

.categories {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 5px;
  padding: 0px 20px 20px 20px;
}

.categories button {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 8px 15px;
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  box-shadow: 0px 0.5px 0.5px #EFEFEF, 0px 1px 0.5px rgba(239, 239, 239, 0.5);
  border-radius: 20px;
  font-weight: 600;
  color: #171718;
  transition: all 0.6s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.categories button:hover {
  transform: scale(1.05) translateY(-3px);
}

.results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.results hr {
  width: 100%;
  height: 1px;
  border: 0;
  background-color: #ECECEC;
}

.results p {
  padding: 0 20px;
}

p.label {
  font-weight: 600;
  font-size: 11px;
  line-height: 13px;
  color: #5F6368;
}

.results .entry {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  gap: 12px;
  padding: 5px 20px;
  transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.results .entry:hover {
  background-color: #F5F8FE;
}

.results .results-list .entry:hover .icon {
  background-color: #1763fa;
}

.results .results-list .entry:hover .icon svg path,
.results .results-list .entry:hover .icon svg circle {
  stroke: #ffffff;
}

.results .results-list .entry:hover label {
  color: #1763fa;
}

.results .results-list .entry:hover span {
  color: #7ba0eb;
}

.results .results-list {
  display: flex;
  flex-direction: column;
}

.results .entry .icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #ECECEC;
  border-radius: 7px;
  transition: all 0.2s cubic-bezier(0.15, 0.83, 0.66, 1);
}

.results .entry .desc {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.results .entry .desc label {
  display: block;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  color: #171718;
}

.results .entry .desc span {
  font-weight: 600;
  font-size: 10px;
  line-height: 12px;
  color: #72767c;
}

.results .entry .badge {
  width: 40px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  background: #DDFFDE;
  border: 1px solid #08581d0e;
  border-radius: 7px;
  font-weight: 700;
  font-size: 11px;
  line-height: 13px;
  text-align: center;
  color: #08581D;
}

.card-footer {
  height: 40px;
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 10px;
  padding: 0 7px;
  background: #F8F8F8;
}

.card .action {
  display: flex;
  align-items: center;
  gap: 5px;
}

.card .action p {
  padding-left: 5px;
}

.card-footer button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 0;
  background: #ECECEC;
  outline: none;
}

.edit-actions {
  width: 100%;
  text-align: right;
  padding-right: 10px;
  opacity: 0.6;
}

HTML

1<div class="card">
2  <div class="search-container">
3    <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
4      <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M17.5 17.5L22 22"></path>
5      <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z"></path>
6    </svg>
7    <input placeholder="Search for a quick action" type="search">
8  </div>
9
10  <div class="categories">
11    <button type="button">Note</button>
12    <button type="button">File</button>
13    <button type="button">Email</button>
14    <button type="button">Others</button>
15  </div>
16
17  <div class="results">
18    <p class="label">Best Results</p>
19
20    <div class="results-list">
21      <div class="entry">
22        <div class="icon">
23          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
24            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M13 2H13.2727C16.5339 2 18.1645 2 19.2969 2.79784C19.6214 3.02643 19.9094 3.29752 20.1523 3.60289C21 4.66867 21 6.20336 21 9.27273V11.8182C21 14.7814 21 16.2629 20.5311 17.4462C19.7772 19.3486 18.1829 20.8491 16.1616 21.5586C14.9044 22 13.3302 22 10.1818 22C8.38275 22 7.48322 22 6.76478 21.7478C5.60979 21.3424 4.69875 20.4849 4.26796 19.3979C4 18.7217 4 17.8751 4 16.1818V12"></path>
25            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M21 12C21 13.8409 19.5076 15.3333 17.6667 15.3333C17.0009 15.3333 16.216 15.2167 15.5686 15.3901C14.9935 15.5442 14.5442 15.9935 14.3901 16.5686C14.2167 17.216 14.3333 18.0009 14.3333 18.6667C14.3333 20.5076 12.8409 22 11 22"></path>
26            <path stroke-linecap="round" stroke-width="2" stroke="#171718" d="M11 6L3 6M7 2V10"></path>
27          </svg>
28        </div>
29        <div class="desc">
30          <label>Create a new File</label>
31          <span>Add a new file to your library list</span>
32          </div>
33      </div>
34      <div class="entry">
35        <div class="icon">
36          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
37            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M17.4776 9.01106C17.485 9.01102 17.4925 9.01101 17.5 9.01101C19.9853 9.01101 22 11.0294 22 13.5193C22 15.8398 20.25 17.7508 18 18M17.4776 9.01106C17.4924 8.84606 17.5 8.67896 17.5 8.51009C17.5 5.46695 15.0376 3 12 3C9.12324 3 6.76233 5.21267 6.52042 8.03192M17.4776 9.01106C17.3753 10.1476 16.9286 11.1846 16.2428 12.0165M6.52042 8.03192C3.98398 8.27373 2 10.4139 2 13.0183C2 15.4417 3.71776 17.4632 6 17.9273M6.52042 8.03192C6.67826 8.01687 6.83823 8.00917 7 8.00917C8.12582 8.00917 9.16474 8.38194 10.0005 9.01101"></path>
38            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M12 13L12 21M12 13C11.2998 13 9.99153 14.9943 9.5 15.5M12 13C12.7002 13 14.0085 14.9943 14.5 15.5"></path>
39          </svg>
40        </div>
41        <div class="desc">
42          <label>Upload a file</label>
43          <span>Use your one of your system files to save and edit</span>
44          </div>
45      </div>
46    </div>
47
48    <hr>
49
50    <div class="results-list">
51      <div class="entry">
52        <div class="icon">
53          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
54            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M5 16L10 13M14 11L19 8M12 5V10M12 14V19M5 8L10 11M14 13L19 16"></path>
55            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M20.5 9.00001V14.5M13.5 20.5L19 17.5M4.5 17.5L10.5 20.5M3.5 15V9.00001M4.5 6.5L10.5 3.5M19.5 6.5L13.5 3.5"></path>
56            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="3.5" cx="12"></circle>
57            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="20.5" cx="12"></circle>
58            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="7.5" cx="3.5"></circle>
59            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="7.5" cx="20.5"></circle>
60            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="16.5" cx="20.5"></circle>
61            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="16.5" cx="3.5"></circle>
62            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M12 9.75L14 10.875V13.125L12 14.25L10 13.125V10.875L12 9.75Z"></path>
63          </svg>
64        </div>
65        <div class="desc">
66          <label>Generate a new document with AI</label>
67          <span>Use our ChatGPT plug-in to generate a new document</span>
68        </div>
69        <p class="badge">New
70      </p></div>
71      <div class="entry">
72        <div class="icon">
73          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
74            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M2 12.4C2 9.38301 2 7.87452 2.94627 6.93726C3.89254 6 5.41554 6 8.46154 6H9.53846C12.5845 6 14.1075 6 15.0537 6.93726C16 7.87452 16 9.38301 16 12.4V15.6C16 18.617 16 20.1255 15.0537 21.0627C14.1075 22 12.5845 22 9.53846 22H8.46154C5.41554 22 3.89254 22 2.94627 21.0627C2 20.1255 2 18.617 2 15.6V12.4Z"></path>
75            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M15.5376 16H16.4608C19.072 16 20.3776 16 21.1888 15.1799C22 14.3598 22 13.0399 22 10.4V7.6C22 4.96013 22 3.6402 21.1888 2.8201C20.3776 2 19.072 2 16.4608 2H15.5376C12.9264 2 11.6208 2 10.8096 2.8201C10.1002 3.53726 10.0112 4.63664 10 6.66667"></path>
76            <path stroke-linecap="round" stroke-width="2" stroke="#171718" d="M6 12H9M6 17H11"></path>
77            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M10.5 3L14.5 6.5"></path>
78          </svg>
79        </div>
80        <div class="desc">
81          <label>Create from a template</label>
82          <span>Use our free templates to quickly create a document</span>
83</div>
84      </div>
85    </div>
86  </div>
87
88  <div class="card-footer">
89    <div class="action">
90      <button type="button">
91        <svg fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
92          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M12 19V4"></path>
93          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M7 15L11.2929 19.2929C11.6262 19.6262 11.7929 19.7929 12 19.7929C12.2071 19.7929 12.3738 19.6262 12.7071 19.2929L17 15"></path>
94        </svg>
95      </button>
96      <button type="button">
97        <svg fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
98          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M12 5L12 20"></path>
99          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M7 9L11.2929 4.70711C11.6262 4.37377 11.7929 4.20711 12 4.20711C12.2071 4.20711 12.3738 4.37377 12.7071 4.70711L17 9"></path>
100        </svg>
101      </button>
102      <p class="label">Navigate
103    </p></div>
104    <div class="action">
105      <button type="button">
106        <svg fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
107          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M20 3V5.07692C20 7.07786 20 8.07833 19.8547 8.91545C19.0547 13.5235 15.0934 17.1376 10.0426 17.8674C9.12509 18 7.19318 18 5 18"></path>
108          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M7 21C6.39316 20.4102 4 18.8403 4 18C4 17.1597 6.39316 15.5898 7 15"></path>
109        </svg>
110      </button>
111      <p class="label">Select
112    </p></div>
113    <div class="action">
114      <button type="button">
115        <svg fill="none" viewBox="0 0 14 14" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
116          <path stroke-width="1.5" stroke="#5F6368" d="M13 2.875V2.875C13 1.83947 12.1605 1 11.125 1V1C10.0895 1 9.25 1.83947 9.25 2.875V11.125C9.25 12.1605 10.0895 13 11.125 13V13C12.1605 13 13 12.1605 13 11.125V11.125C13 10.0895 12.1605 9.25 11.125 9.25H2.875C1.83947 9.25 1 10.0895 1 11.125V11.125C1 12.1605 1.83947 13 2.875 13V13C3.91053 13 4.75 12.1605 4.75 11.125V2.875C4.75 1.83947 3.91053 1 2.875 1V1C1.83947 1 1 1.83947 1 2.875V2.875C1 3.91053 1.83947 4.75 2.875 4.75H11.125C12.1605 4.75 13 3.91053 13 2.875Z"></path>
117        </svg>
118</button>
119      <p class="label">Quit
120    </p></div>
121
122    <p class="label edit-actions">Edit Actions
123  </p></div>
124</div>

<div class="card">
  <div class="search-container">
    <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
      <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M17.5 17.5L22 22"></path>
      <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M20 11C20 6.02944 15.9706 2 11 2C6.02944 2 2 6.02944 2 11C2 15.9706 6.02944 20 11 20C15.9706 20 20 15.9706 20 11Z"></path>
    </svg>
    <input placeholder="Search for a quick action" type="search">
  </div>

  <div class="categories">
    <button type="button">Note</button>
    <button type="button">File</button>
    <button type="button">Email</button>
    <button type="button">Others</button>
  </div>

  <div class="results">
    <p class="label">Best Results</p>

    <div class="results-list">
      <div class="entry">
        <div class="icon">
          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M13 2H13.2727C16.5339 2 18.1645 2 19.2969 2.79784C19.6214 3.02643 19.9094 3.29752 20.1523 3.60289C21 4.66867 21 6.20336 21 9.27273V11.8182C21 14.7814 21 16.2629 20.5311 17.4462C19.7772 19.3486 18.1829 20.8491 16.1616 21.5586C14.9044 22 13.3302 22 10.1818 22C8.38275 22 7.48322 22 6.76478 21.7478C5.60979 21.3424 4.69875 20.4849 4.26796 19.3979C4 18.7217 4 17.8751 4 16.1818V12"></path>
            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M21 12C21 13.8409 19.5076 15.3333 17.6667 15.3333C17.0009 15.3333 16.216 15.2167 15.5686 15.3901C14.9935 15.5442 14.5442 15.9935 14.3901 16.5686C14.2167 17.216 14.3333 18.0009 14.3333 18.6667C14.3333 20.5076 12.8409 22 11 22"></path>
            <path stroke-linecap="round" stroke-width="2" stroke="#171718" d="M11 6L3 6M7 2V10"></path>
          </svg>
        </div>
        <div class="desc">
          <label>Create a new File</label>
          <span>Add a new file to your library list</span>
          </div>
      </div>
      <div class="entry">
        <div class="icon">
          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M17.4776 9.01106C17.485 9.01102 17.4925 9.01101 17.5 9.01101C19.9853 9.01101 22 11.0294 22 13.5193C22 15.8398 20.25 17.7508 18 18M17.4776 9.01106C17.4924 8.84606 17.5 8.67896 17.5 8.51009C17.5 5.46695 15.0376 3 12 3C9.12324 3 6.76233 5.21267 6.52042 8.03192M17.4776 9.01106C17.3753 10.1476 16.9286 11.1846 16.2428 12.0165M6.52042 8.03192C3.98398 8.27373 2 10.4139 2 13.0183C2 15.4417 3.71776 17.4632 6 17.9273M6.52042 8.03192C6.67826 8.01687 6.83823 8.00917 7 8.00917C8.12582 8.00917 9.16474 8.38194 10.0005 9.01101"></path>
            <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2" stroke="#171718" d="M12 13L12 21M12 13C11.2998 13 9.99153 14.9943 9.5 15.5M12 13C12.7002 13 14.0085 14.9943 14.5 15.5"></path>
          </svg>
        </div>
        <div class="desc">
          <label>Upload a file</label>
          <span>Use your one of your system files to save and edit</span>
          </div>
      </div>
    </div>

    <hr>

    <div class="results-list">
      <div class="entry">
        <div class="icon">
          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M5 16L10 13M14 11L19 8M12 5V10M12 14V19M5 8L10 11M14 13L19 16"></path>
            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M20.5 9.00001V14.5M13.5 20.5L19 17.5M4.5 17.5L10.5 20.5M3.5 15V9.00001M4.5 6.5L10.5 3.5M19.5 6.5L13.5 3.5"></path>
            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="3.5" cx="12"></circle>
            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="20.5" cx="12"></circle>
            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="7.5" cx="3.5"></circle>
            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="7.5" cx="20.5"></circle>
            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="16.5" cx="20.5"></circle>
            <circle stroke-linejoin="round" stroke-width="2" stroke="#171718" r="1.5" cy="16.5" cx="3.5"></circle>
            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M12 9.75L14 10.875V13.125L12 14.25L10 13.125V10.875L12 9.75Z"></path>
          </svg>
        </div>
        <div class="desc">
          <label>Generate a new document with AI</label>
          <span>Use our ChatGPT plug-in to generate a new document</span>
        </div>
        <p class="badge">New
      </p></div>
      <div class="entry">
        <div class="icon">
          <svg fill="none" viewBox="0 0 24 24" height="20" width="20" xmlns="http://www.w3.org/2000/svg">
            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M2 12.4C2 9.38301 2 7.87452 2.94627 6.93726C3.89254 6 5.41554 6 8.46154 6H9.53846C12.5845 6 14.1075 6 15.0537 6.93726C16 7.87452 16 9.38301 16 12.4V15.6C16 18.617 16 20.1255 15.0537 21.0627C14.1075 22 12.5845 22 9.53846 22H8.46154C5.41554 22 3.89254 22 2.94627 21.0627C2 20.1255 2 18.617 2 15.6V12.4Z"></path>
            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M15.5376 16H16.4608C19.072 16 20.3776 16 21.1888 15.1799C22 14.3598 22 13.0399 22 10.4V7.6C22 4.96013 22 3.6402 21.1888 2.8201C20.3776 2 19.072 2 16.4608 2H15.5376C12.9264 2 11.6208 2 10.8096 2.8201C10.1002 3.53726 10.0112 4.63664 10 6.66667"></path>
            <path stroke-linecap="round" stroke-width="2" stroke="#171718" d="M6 12H9M6 17H11"></path>
            <path stroke-linejoin="round" stroke-width="2" stroke="#171718" d="M10.5 3L14.5 6.5"></path>
          </svg>
        </div>
        <div class="desc">
          <label>Create from a template</label>
          <span>Use our free templates to quickly create a document</span>
</div>
      </div>
    </div>
  </div>

  <div class="card-footer">
    <div class="action">
      <button type="button">
        <svg fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M12 19V4"></path>
          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M7 15L11.2929 19.2929C11.6262 19.6262 11.7929 19.7929 12 19.7929C12.2071 19.7929 12.3738 19.6262 12.7071 19.2929L17 15"></path>
        </svg>
      </button>
      <button type="button">
        <svg fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M12 5L12 20"></path>
          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M7 9L11.2929 4.70711C11.6262 4.37377 11.7929 4.20711 12 4.20711C12.2071 4.20711 12.3738 4.37377 12.7071 4.70711L17 9"></path>
        </svg>
      </button>
      <p class="label">Navigate
    </p></div>
    <div class="action">
      <button type="button">
        <svg fill="none" viewBox="0 0 24 24" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M20 3V5.07692C20 7.07786 20 8.07833 19.8547 8.91545C19.0547 13.5235 15.0934 17.1376 10.0426 17.8674C9.12509 18 7.19318 18 5 18"></path>
          <path stroke-linejoin="round" stroke-linecap="round" stroke-width="2.5" stroke="#5F6368" d="M7 21C6.39316 20.4102 4 18.8403 4 18C4 17.1597 6.39316 15.5898 7 15"></path>
        </svg>
      </button>
      <p class="label">Select
    </p></div>
    <div class="action">
      <button type="button">
        <svg fill="none" viewBox="0 0 14 14" height="14" width="14" xmlns="http://www.w3.org/2000/svg">
          <path stroke-width="1.5" stroke="#5F6368" d="M13 2.875V2.875C13 1.83947 12.1605 1 11.125 1V1C10.0895 1 9.25 1.83947 9.25 2.875V11.125C9.25 12.1605 10.0895 13 11.125 13V13C12.1605 13 13 12.1605 13 11.125V11.125C13 10.0895 12.1605 9.25 11.125 9.25H2.875C1.83947 9.25 1 10.0895 1 11.125V11.125C1 12.1605 1.83947 13 2.875 13V13C3.91053 13 4.75 12.1605 4.75 11.125V2.875C4.75 1.83947 3.91053 1 2.875 1V1C1.83947 1 1 1.83947 1 2.875V2.875C1 3.91053 1.83947 4.75 2.875 4.75H11.125C12.1605 4.75 13 3.91053 13 2.875Z"></path>
        </svg>
</button>
      <p class="label">Quit
    </p></div>

    <p class="label edit-actions">Edit Actions
  </p></div>
</div>