Template:Project Board: Difference between revisions

Content deleted Content added

Inline

Revision as of 18:35, May 20, 2025

Trello-style board with columns, cards, images, labels, and flexible content.

Template parameters
Parameter		Description	Type	Status
Background Color	`bg`	no description Default #0e0e0e	String	optional
Container Border Radius	`radius`	no description Default 10px	String	optional
Text Alignment	`align`	no description Default left	String	optional
Column 1 Header	`header1`	no description Default INTRODUCTION	String	optional
Card 1 Title	`card1title`	no description Default WELCOME! (Please Read)	String	optional
Card 1 Subtitle	`card1art`	no description Default CARD ART BY: COSMICSMOOTHIE	String	optional
Card 1 Image URL	`card1img`	no description Default	String	optional
Card 1 Labels/Tags (HTML)	`card1labels`	no description Default	String	optional
Card 1 Body	`card1body`	no description Default Notes go here. Edit freely.	String	optional
Card 2 Title	`card2title`	no description Default MANA!!!	String	optional
Card 2 Image URL	`card2img`	no description Default	String	optional
Card 2 Labels/Tags (HTML)	`card2labels`	no description Default	String	optional
Card 2 Body	`card2body`	no description Default Any details or expandable info.	String	optional
Column 2 Header	`header2`	no description Default Diremptions	String	optional
Card 3 Title	`card3title`	no description Default Amaranth	String	optional
Card 3 Image URL	`card3img`	no description Default	String	optional
Card 3 Labels/Tags (HTML)	`card3labels`	no description Default	String	optional
Card 3 Body	`card3body`	no description Default	String	optional
Card 4 Title	`card4title`	no description Default Dawn Epoch	String	optional
Card 4 Image URL	`card4img`	no description Default	String	optional
Card 4 Labels/Tags (HTML)	`card4labels`	no description Default	String	optional
Card 4 Body	`card4body`	no description Default	String	optional
Column 3 Header	`header3`	no description Default Races	String	optional
Card 5 Title	`card5title`	no description Default Mythra	String	optional
Card 5 Image URL	`card5img`	no description Default	String	optional
Card 5 Labels/Tags (HTML)	`card5labels`	no description Default	String	optional
Card 5 Body	`card5body`	no description Default	String	optional
Card 6 Title	`card6title`	no description Default Sylvian	String	optional
Card 6 Image URL	`card6img`	no description Default	String	optional
Card 6 Labels/Tags (HTML)	`card6labels`	no description Default	String	optional
Card 6 Body	`card6body`	no description Default	String	optional

@@ Line 1: / Line 1: @@
 <includeonly>
 <templatestyles src="Project Board/styles.css" />
-<div class="amaranth-columns-container" style="background: {{{bg|#0e0e0e}}}; border-radius: {{{radius|10px}}}; text-align: {{{align|left}}};">
+<div class="amaranth-board-container" style="background: {{{bg|#0e0e0e}}}; border-radius: {{{radius|10px}}}; text-align: {{{align|left}}};">
-<!-- COLUMN -->
+<!-- COLUMN 1 -->
-<span class="amaranth-column">
+<div class="amaranth-column">
-<span class="amaranth-column-header">{{{header1|INTRODUCTION}}}</span>
+<div class="amaranth-column-header">{{{header1|INTRODUCTION}}}</div>
+<!-- CARD 1 -->
-<span class="amaranth-card amaranth-card-divider">
-<span class="amaranth-card-title">{{{card1title|WELCOME! (Please Read)}}}</span>
+<div class="amaranth-card">
+<!-- Optional Image -->
-<span class="amaranth-card-subtitle">{{{card1art|CARD ART BY: COSMICSMOOTHIE}}}</span>
-<span class="amaranth-card-body">{{{card1body|Notes go here. Edit freely.}}}</span>
+{{#if:{{{card1img|}}}|<img class="amaranth-card-img" src="{{{card1img}}}" alt="" />}}
+<!-- Labels/Tags -->
-</span>
+<div class="amaranth-card-labels">
+{{{card1labels|}}}
+</div>
+<!-- Card Content -->
+<div class="amaranth-card-title">{{{card1title|WELCOME! (Please Read)}}}</div>
+<div class="amaranth-card-subtitle">{{{card1art|CARD ART BY: COSMICSMOOTHIE}}}</div>
+<div class="amaranth-card-body">{{{card1body|Notes go here. Edit freely.}}}</div>
+</div>
+<!-- CARD 2 -->
-<span class="amaranth-card amaranth-card-divider">
-<span class="amaranth-card-title">{{{card2title|MANA!!!}}}</span>
+<div class="amaranth-card">
-<span class="amaranth-card-body">{{{card2body|Any details or expandable info.}}}</span>
+<div class="amaranth-card-labels">
+{{{card2labels|}}}
-</span>
-</span>
+</div>
+<div class="amaranth-card-title">{{{card2title|MANA!!!}}}</div>
+<div class="amaranth-card-body">{{{card2body|Any details or expandable info.}}}</div>
+</div>
+</div>
-<!-- COLUMN -->
+<!-- COLUMN 2 -->
-<span class="amaranth-column">
+<div class="amaranth-column">
-<span class="amaranth-column-header">{{{header2|Diremptions}}}</span>
+<div class="amaranth-column-header">{{{header2|Diremptions}}}</div>
+<!-- CARD 3 -->
-<span class="amaranth-card amaranth-card-divider">
-<span class="amaranth-card-title">{{{card3title|Amaranth}}}</span>
+<div class="amaranth-card">
-<span class="amaranth-card-tags">{{{card3tags|Tags: Diremption, Source}}}</span>
+{{#if:{{{card3img|}}}|<img class="amaranth-card-img" src="{{{card3img}}}" alt="" />}}
+<div class="amaranth-card-labels">
-</span>
+{{{card3labels|<span class="amaranth-label amaranth-label-pink">Amaranth</span> <span class="amaranth-label amaranth-label-purple">Diremption</span> <span class="amaranth-label amaranth-label-gray">Source</span>}}
+</div>
+<div class="amaranth-card-title">{{{card3title|Amaranth}}}</div>
+<div class="amaranth-card-body">{{{card3body|}}}</div>
+</div>
+<!-- CARD 4 -->
-<span class="amaranth-card amaranth-card-divider">
-<span class="amaranth-card-title">{{{card4title|Dawn Epoch}}}</span>
+<div class="amaranth-card">
-<span class="amaranth-card-tags">{{{card4tags|Tags: Annuat, Amaranth}}}</span>
+{{#if:{{{card4img|}}}|<img class="amaranth-card-img" src="{{{card4img}}}" alt="" />}}
+<div class="amaranth-card-labels">
-</span>
+{{{card4labels|<span class="amaranth-label amaranth-label-pink">Dawn Epoch</span> <span class="amaranth-label amaranth-label-blue">Annuat</span>}}
-</span>
+</div>
+<div class="amaranth-card-title">{{{card4title|Dawn Epoch}}}</div>
+<div class="amaranth-card-body">{{{card4body|}}}</div>
+</div>
+</div>
-<!-- COLUMN -->
+<!-- COLUMN 3 -->
-<span class="amaranth-column">
+<div class="amaranth-column">
-<span class="amaranth-column-header">{{{header3|Races}}}</span>
+<div class="amaranth-column-header">{{{header3|Races}}}</div>
+<!-- CARD 5 -->
-<span class="amaranth-card amaranth-card-divider">
-<span class="amaranth-card-title">{{{card5title|Mythra}}}</span>
+<div class="amaranth-card">
-<span class="amaranth-card-tags">{{{card5tags|Tags: Edian, Alizarin}}}</span>
+{{#if:{{{card5img|}}}|<img class="amaranth-card-img" src="{{{card5img}}}" alt="" />}}
+<div class="amaranth-card-labels">
-</span>
+{{{card5labels|<span class="amaranth-label amaranth-label-green">Civilized Races</span> <span class="amaranth-label amaranth-label-yellow">Common</span> <span class="amaranth-label amaranth-label-blue">Alizarin (Mortal)</span>}}
+</div>
-<span class="amaranth-card amaranth-card-divider">
-<span class="amaranth-card-title">{{{card6title|Sylvian}}}</span>
+<div class="amaranth-card-title">{{{card5title|Mythra}}}</div>
-<span class="amaranth-card-tags">{{{card6tags|Tags: Edian, Sylvian}}}</span>
+<div class="amaranth-card-body">{{{card5body|}}}</div>
-</span>
+</div>
-</span>
+<!-- CARD 6 -->
+<div class="amaranth-card">
+{{#if:{{{card6img|}}}|<img class="amaranth-card-img" src="{{{card6img}}}" alt="" />}}
+<div class="amaranth-card-labels">
+{{{card6labels|<span class="amaranth-label amaranth-label-green">Civilized Races</span> <span class="amaranth-label amaranth-label-yellow">Common</span> <span class="amaranth-label amaranth-label-blue">Sylvian</span>}}
+</div>
+<div class="amaranth-card-title">{{{card6title|Sylvian}}}</div>
+<div class="amaranth-card-body">{{{card6body|}}}</div>
+</div>
+</div>
 </div>
 </includeonly>
 <noinclude>
 <templatedata>
 {
-  "description": "Flexible horizontal scrolling columns with cards, headers and content blocks.",
+  "description": "Trello-style board with columns, cards, images, labels, and flexible content.",
   "params": {
     "bg": { "label": "Background Color", "type": "string", "default": "#0e0e0e" },
     "radius": { "label": "Container Border Radius", "type": "string", "default": "10px" },
-    "align": { "label": "Text Alignment", "type": "string", "default": "left", "description": "left, center, or right" },
+    "align": { "label": "Text Alignment", "type": "string", "default": "left" },
-    "header1": { "label": "First Column Header", "type": "string", "default": "INTRODUCTION" },
+    "header1": { "label": "Column 1 Header", "type": "string", "default": "INTRODUCTION" },
-    "card1title": { "label": "First Card Title", "type": "string", "default": "WELCOME! (Please Read)" },
+    "card1title": { "label": "Card 1 Title", "type": "string", "default": "WELCOME! (Please Read)" },
-    "card1art": { "label": "First Card Subtitle", "type": "string", "default": "CARD ART BY: COSMICSMOOTHIE" },
+    "card1art": { "label": "Card 1 Subtitle", "type": "string", "default": "CARD ART BY: COSMICSMOOTHIE" },
-    "card1body": { "label": "First Card Body", "type": "string", "default": "Notes go here. Edit freely." },
+    "card1img": { "label": "Card 1 Image URL", "type": "string", "default": "" },
-    "card2title": { "label": "Second Card Title", "type": "string", "default": "MANA!!!" },
+    "card1labels": { "label": "Card 1 Labels/Tags (HTML)", "type": "string", "default": "" },
-    "card2body": { "label": "Second Card Body", "type": "string", "default": "Any details or expandable info." },
+    "card1body": { "label": "Card 1 Body", "type": "string", "default": "Notes go here. Edit freely." },
+    "card2title": { "label": "Card 2 Title", "type": "string", "default": "MANA!!!" },
-    "header2": { "label": "Second Column Header", "type": "string", "default": "Diremptions" },
+    "card2img": { "label": "Card 2 Image URL", "type": "string", "default": "" },
-    "card3title": { "label": "Third Card Title", "type": "string", "default": "Amaranth" },
+    "card2labels": { "label": "Card 2 Labels/Tags (HTML)", "type": "string", "default": "" },
-    "card3tags": { "label": "Third Card Tags", "type": "string", "default": "Tags: Diremption, Source" },
+    "card2body": { "label": "Card 2 Body", "type": "string", "default": "Any details or expandable info." },
-    "card4title": { "label": "Fourth Card Title", "type": "string", "default": "Dawn Epoch" },
-    "card4tags": { "label": "Fourth Card Tags", "type": "string", "default": "Tags: Annuat, Amaranth" },
+    "header2": { "label": "Column 2 Header", "type": "string", "default": "Diremptions" },
+    "card3title": { "label": "Card 3 Title", "type": "string", "default": "Amaranth" },
-    "header3": { "label": "Third Column Header", "type": "string", "default": "Races" },
+    "card3img": { "label": "Card 3 Image URL", "type": "string", "default": "" },
-    "card5title": { "label": "Fifth Card Title", "type": "string", "default": "Mythra" },
+    "card3labels": { "label": "Card 3 Labels/Tags (HTML)", "type": "string", "default": "" },
-    "card5tags": { "label": "Fifth Card Tags", "type": "string", "default": "Tags: Edian, Alizarin" },
+    "card3body": { "label": "Card 3 Body", "type": "string", "default": "" },
-    "card6title": { "label": "Sixth Card Title", "type": "string", "default": "Sylvian" },
+    "card4title": { "label": "Card 4 Title", "type": "string", "default": "Dawn Epoch" },
-    "card6tags": { "label": "Sixth Card Tags", "type": "string", "default": "Tags: Edian, Sylvian" }
+    "card4img": { "label": "Card 4 Image URL", "type": "string", "default": "" },
+    "card4labels": { "label": "Card 4 Labels/Tags (HTML)", "type": "string", "default": "" },
+    "card4body": { "label": "Card 4 Body", "type": "string", "default": "" },
+    "header3": { "label": "Column 3 Header", "type": "string", "default": "Races" },
+    "card5title": { "label": "Card 5 Title", "type": "string", "default": "Mythra" },
+    "card5img": { "label": "Card 5 Image URL", "type": "string", "default": "" },
+    "card5labels": { "label": "Card 5 Labels/Tags (HTML)", "type": "string", "default": "" },
+    "card5body": { "label": "Card 5 Body", "type": "string", "default": "" },
+    "card6title": { "label": "Card 6 Title", "type": "string", "default": "Sylvian" },
+    "card6img": { "label": "Card 6 Image URL", "type": "string", "default": "" },
+    "card6labels": { "label": "Card 6 Labels/Tags (HTML)", "type": "string", "default": "" },
+    "card6body": { "label": "Card 6 Body", "type": "string", "default": "" }
   }
 }