leumas-private-shared/src/styles/CardContainers.css

Private React JSX Package For Leumas Shared Components, Headers, Footers, Asides, Login Pages, API Key Manager and much more. Styles and everything reusable to avoid DRY code across all of our subdomains

/* Basic card container style */
.card-container {
    display: flex;
    flex-direction: column;
    width: 250px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    overflow: hidden;
    margin: 20px;
    transition: box-shadow 0.3s ease;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 2px;
}

.card-container:hover {
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

/* Card header style */
.card-container h3 {

    padding: 10px 20px;
    margin: 0;
    border-bottom: 1px solid #e0e0e0;
    font-size: 18px;
}

/* Card content style */
.card-container p {
    padding: 10px 20px;
    margin: 0;
    font-size: 14px;

}

.card-container ul {
    list-style-type: none;
    padding: 0 20px;
}

.card-container li {
    padding: 5px 0;
    font-size: 12px;
    color: #555;
}

/* Status indicator for active/inactive */
.card-container .status-active {
    color: green;
}

.card-container .status-inactive {
    color: red;
}