View source for Template:PortalCard

<includeonly>
{{#switch:{{{mode|card}}}
| css =
<style>
:root{--brand-light-blue:#78A5FF;--brand-light-orange:#FAB243;--bg:#141516;--card:#1b1d20;--border:#2a2d32;--text:#E6E6E6;}
.portal-shell{max-width:1100px;margin:0 auto;padding:12px 16px 32px;}
.portal-title{display:block;margin:8px auto 20px;text-align:center;font-weight:700;font-size:20px;color:var(--text);
  background:linear-gradient(180deg,#0e1424,#101118);border:1px solid #2a3350;border-radius:12px;padding:10px 14px;
  box-shadow:inset 0 0 0 1px #0a0d16,0 0 0 1px #0a0d16;}
.portal-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.portal-card{list-style:none;background:var(--card);border:1px solid var(--border);border-radius:14px;
  padding:24px 18px 20px;text-align:center;box-shadow:0 6px 14px rgba(0,0,0,.25);
  transition:transform .08s ease,border-color .1s ease,box-shadow .1s ease}
.portal-card:hover,.portal-card:focus-within{transform:translateY(-2px);border-color:#2f4d93;
  box-shadow:0 10px 20px rgba(0,0,0,.35),0 0 0 1px #2f4d93 inset}
.portal-card .image img{width:86px;height:86px;object-fit:contain;image-rendering:pixelated;display:block;margin:0 auto 14px}
.portal-label{display:inline-block;color:var(--brand-light-orange);font-size:18px;line-height:1.2;text-decoration:none}
.portal-label:hover{text-decoration:underline}
.portal-card a{color:inherit;text-decoration:none}
@media(max-width:480px){.portal-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.portal-card{padding:18px 12px}.portal-card .image img{width:72px;height:72px;margin-bottom:10px}.portal-label{font-size:16px}}
body{background-color:var(--bg)}
</style>

| card =
<div class="portal-card">
  [[File:{{{icon|Placeholder.png}}}|class=image|link={{{target|{{{label|}}}}}}|alt={{{label|}}}]]
  [[{{{target|{{{label|}}}}}}|<span class="portal-label">{{{label|}}}</span>]]
</div>
}}
</includeonly><noinclude>
Parameters:
* mode=css or card
* icon= file name
* label= text
* target= page (defaults to label)
</noinclude>