poke/html/partials/card.ejs
2024-04-30 23:06:09 -04:00

71 lines
No EOL
1.5 KiB
Text

<div class="card">
<div class="card-title">
<div class="card-icon" style="background: <%= icon_background %>;">
<% if(icon="none"){ %><% } else{ %> <%- icon %><% } %>
</div>
<h2><%= title %></h2>
</div>
<p><%= description %></p>
<% if (actions=="true") { %>
<div class="card-actions">
<% if (has_secondary_action=="true") { %>
<a class="card-secondary" href="<%= secondary_link %>"><%- secondary_icon %> <%= secondary_text %></a>
<% } %>
<a class="card-primary" href="<%= primary_link %>"><%- primary_icon %> <%= primary_text %></a>
</div>
<% }%>
</div>
<style>
.card {
padding: 24px;
}
.card-title {
display: flex;
align-items: center;
}
.card-title h2 {
font-family: "PokeTube flex";
font-stretch: ultra-expanded;
font-weight: 1000;
margin: 0px;
}
.card-title svg {
width: 32px;
height: 32px;
margin-right: 12px;
}
.card-actions {
display: flex;
align-items: center;
justify-content: right;
gap: 12px;
}
.card-actions a {
color: white;
border: 2px white solid;
border-radius: 3rem;
padding: 12px 24px 12px 12px;
display: flex;
align-items: center;
}
.card-actions a:hover {
filter: brightness(0.8);
text-decoration: nones;
}
.card-actions svg {
width: 24px !important;
height: 24px !important;
margin-right: 6px;
}
.card-actions .card-primary {
background: white;
color: black;
}
.card-actions .card-primary svg {
fill: black;
}
.card-actions .card-secondary svg {
fill: white;
}
</style>