<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>