HTML

CSS

JS

.card {
	width: 300px;
	height: fit-content;
	background: rgb(255, 255, 255);
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	padding: 30px;
	position: relative;
	box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.068);
}

.card-content {
	width: 100%;
	height: fit-content;
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.card-heading {
	font-size: 20px;
	font-weight: 700;
	color: rgb(27, 27, 27);
}

.card-description {
	font-weight: 100;
	color: rgb(102, 102, 102);
}

.card-button-wrapper {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
}

.card-button {
	width: 50%;
	height: 35px;
	border-radius: 10px;
	border: none;
	cursor: pointer;
	font-weight: 600;
}

.primary {
	background-color: rgb(255, 114, 109);
	color: white;
}

.primary:hover {
	background-color: rgb(255, 73, 66);
}

.secondary {
	background-color: #ddd;
}

.secondary:hover {
	background-color: rgb(197, 197, 197);
}

.exit-button {
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	background-color: transparent;
	position: absolute;
	top: 20px;
	right: 20px;
	cursor: pointer;
}

.exit-button:hover svg {
	fill: black;
}

.exit-button svg {
	fill: rgb(175, 175, 175);
}

Delete File Prompt Card

This card design is ideal for promoting the user before they do something that is not reversible, such as deleting files, deleting accounts, discharging patients, canceling subscriptions and etc.

This card features a title, description and two buttons, one for cancel/close the prompt box, and one for confirming the action. Additionally, the user can also close the prompt card by clicking on the X icon at the top right corner of the card. This UI component is ready to go and you just need to add JavaScript to handle the actions you want to perform.