This is a documentation for Board Game Arena: play board games online !

Template:HCard: Difference between revisions

From Board Game Arena
Jump to navigation Jump to search
(clueNumber backgroundColour)
(clueColourName, screen reader accessibility)
Line 1: Line 1:
<div style="display:inline-grid;grid:16px 4px 24px 28px/26px;place-items:baseline center;width:26px;vertical-align:-webkit-baseline-middle;"><div style="grid-area:1/1/3/1;place-self:center start;width:12px;height:100%;margin:0 1px;border-radius:3px 3px 0 0;border:1px solid #2F2342;background-color:#ccc8;display:{{{showClueNumber|none}}};"></div><div style="grid-area:1/1/3/1;width:22px;height:100%;margin:-1px 1px;border-radius:3px 3px 0 0;border:1px solid #2F2342;background-color:{{{clueColour|{{{colour|transparent}}}}}};visibility:{{{showClueColour|hidden}}};"></div><div style="grid-area:1/1/2/1;display:{{{showClueNumber|none}}};place-self:center start;width:24px;padding:0 3px;line-height:normal;font-family:Roboto,Arial,sans-serif;font-weight:500;font-size:16px;color:#2F2342;">{{{clueNumber|{{{1|&ZeroWidthSpace;}}}}}}</div><div alt="{{{colourName|}}} {{{1|}}}" style="grid-area:2/1/4/1;display:grid;place-items:start center;width:26px;border-radius:3px 3px 0 0;background-color:{{{backgroundColour|#2F2342}}};color:{{{colour|transparent}}};line-height:normal;font-family:Roboto,Arial,sans-serif;font-weight:700;font-size:28px;-webkit-text-stroke:1px rgba(255,255,255,{{{textOutline|0}}});">{{{1|&ZeroWidthSpace;}}}</div><div style="grid-area:4/1/5/1;display:grid;place-items:start center;width:26px;height:100%;border-radius:0 0 3px 3px;background-color:{{{backgroundColour|#2F2342}}};color:{{{colour|transparent}}};line-height:normal;font-family:Roboto,Arial,sans-serif;font-size:20px;">{{{colourLetter|}}}</div></div><noinclude>
<div style="display:inline-grid;grid:16px 4px 24px 28px/26px;place-items:baseline center;width:26px;vertical-align:-webkit-baseline-middle;"><div style="z-index:1;grid-area:2/1/4/1;display:grid;place-items:start center;width:26px;border-radius:3px 3px 0 0;background-color:{{{backgroundColour|#2F2342}}};color:{{{colour|transparent}}};line-height:normal;font-family:Roboto,Arial,sans-serif;font-weight:700;font-size:28px;-webkit-text-stroke:1px rgba(255,255,255,{{{textOutline|0}}});"><span style="font-size:0;">{{{colourName|}}}</span>{{{1|&ZeroWidthSpace;}}}</div><div aria-hidden="true" style="grid-area:4/1/5/1;display:grid;place-items:start center;width:26px;height:100%;border-radius:0 0 3px 3px;background-color:{{{backgroundColour|#2F2342}}};color:{{{colour|transparent}}};line-height:normal;font-family:Roboto,Arial,sans-serif;font-size:20px;">&ZeroWidthSpace;{{{colourLetter|}}}</div><span style="{{{showClueColour|visibili}}}{{{showClueNumber|ty:hidden}}};font-size:0;">,with a </span><div style="grid-area:1/1/3/1;place-self:center start;width:12px;height:100%;margin:0 1px;border-radius:3px 3px 0 0;border:1px solid #2F2342;background-color:#ccc8;{{{showClueNumber|visibility:hidden}}};"></div><span style="grid-area:1/1/3/1;width:22px;height:100%;margin:-1px 1px;border-radius:3px 3px 0 0;border:1px solid #2F2342;background-color:{{{clueColour|{{{colour|transparent}}}}}};{{{showClueColour|visibility:hidden}}};"><span style="{{{showClueColour|visibility:hidden}}};font-size:0;">{{{clueColourName|{{{colourName|}}}}}}</span></span><span style="grid-area:1/1/3/1;place-self:start;{{{showClueNumber|visibility:hidden}}};padding:0 3px;line-height:normal;font-family:Roboto,Arial,sans-serif;font-weight:500;font-size:16px;color:#2F2342;">{{{clueNumber|{{{1|&ZeroWidthSpace;}}}}}}</span><span style="{{{showClueColour|visibili}}}{{{showClueNumber|ty:hidden}}};font-size:0;">clue,</span></div>
<noinclude>


== Examples ==
== Examples ==


* {{Hr|1|n=|c}} {{Hy|2|n|c=}} {{Hg|3|n=|c=}} {{Hb|4|n=|c}} {{Hw|5|n|c=}} {{Hm|5|{{m}}|2|n=|c=}} {{Hk|5|n=}} {{HBack|5|{{r}}|n=|c=}}
* {{Hr|1}} {{Hy|2|c=}} {{Hg|3|n=|c=}} {{Hb|4|n=|c}} {{Hw|5|n|c=}} {{Hm|5|{{m}}|2|n=|c=}} {{Hk|5|n=}} {{HBack|5|{{r}}|red|n=|c=}}


<code><nowiki>{{Hr|1|n=|c}}</nowiki></code>
<code><nowiki>{{Hr|1|n|c}}</nowiki></code>


<code><nowiki>{{Hy|2|n|c=}}</nowiki></code>
<code><nowiki>{{Hy|2|n|c=}}</nowiki></code>
Line 19: Line 20:
<code><nowiki>{{Hk|5|n=}}</nowiki></code>
<code><nowiki>{{Hk|5|n=}}</nowiki></code>


<code><nowiki>{{HBack|5|{{r}}|n=|c=}}</nowiki></code>
<code><nowiki>{{HBack|5|{{r}}|red|n=|c=}}</nowiki></code>


== Available parameters ==
== Available parameters ==
Line 43: Line 44:
   <div><code><nowiki>|colourName=green</nowiki></code></div>
   <div><code><nowiki>|colourName=green</nowiki></code></div>
   <div>'''''Required:''''' specify the colour word used for tooltips and screen readers.</div>
   <div>'''''Required:''''' specify the colour word used for tooltips and screen readers.</div>
  <div><code>clueColourName</code></div>
  <div><code><nowiki>{{{colourName|}}}</nowiki></code></div>
  <div><code><nowiki>|clueColourName=green</nowiki></code></div>
  <div>'''''Optional:''''' specify the clue colour word used for tooltips and screen readers.</div>
   <div><code>clueColour</code></div>
   <div><code>clueColour</code></div>
   <div><code>null</code></div>
   <div><code><nowiki>{{{colour|transparent}}}</nowiki></code></div>
   <div><code><nowiki>|clueColour={{g}}</nowiki></code></div>
   <div><code><nowiki>|clueColour={{g}}</nowiki></code></div>
   <div>'''''Optional:''''' specify the clue colour: <code><nowiki>{{r}}</nowiki></code> <code><nowiki>{{y}}</nowiki></code> <code><nowiki>{{g}}</nowiki></code> <code><nowiki>{{b}}</nowiki></code> <code><nowiki>{{w}}</nowiki></code> <code><nowiki>{{m}}</nowiki></code></div>
   <div>'''''Optional:''''' specify the clue colour: <code><nowiki>{{r}}</nowiki></code> <code><nowiki>{{y}}</nowiki></code> <code><nowiki>{{g}}</nowiki></code> <code><nowiki>{{b}}</nowiki></code> <code><nowiki>{{w}}</nowiki></code> <code><nowiki>{{m}}</nowiki></code></div>
   <div><code>clueNumber</code></div>
   <div><code>clueNumber</code></div>
   <div><code>{{{1|&amp;ZeroWidthSpace;}}}</code></div>
   <div><code><nowiki>{{{1|&amp;ZeroWidthSpace;}}}</nowiki></code></div>
   <div><code><nowiki>|clueNumber={{1}}</nowiki></code></div>
   <div><code><nowiki>|clueNumber={{1}}</nowiki></code></div>
   <div>'''''Optional:''''' specify the clue number: (<code>1</code>/<code>2</code>/<code>3</code>/<code>4</code>/<code>5</code>).</div>
   <div>'''''Optional:''''' specify the clue rank: (<code>1</code>/<code>2</code>/<code>3</code>/<code>4</code>/<code>5</code>).</div>
   <div><code>textOutline</code></div>
   <div><code>textOutline</code></div>
   <div><code>0</code></div>
   <div><code>0</code></div>

Revision as of 22:06, 2 January 2024

​
,with a
​clue,


Examples

  • 1
    ,with a
    1clue,
2
,with a
2clue,
3
,with a
3clue,
4
,with a
4clue,
5
,with a
5clue,
5
,with a
5clue,
5
,with a
5clue,
​
,with a
​clue,


{{Hr|1|n|c}}

{{Hy|2|n|c=}}

{{Hg|3|n=|c=}}

{{Hb|4|n=|c}}

{{Hw|5|n|c=}}

{{Hm|5|{{m}}|2|n=|c=}}

{{Hk|5|n=}}

{{HBack|5|{{r}}|red|n=|c=}}

Available parameters

Parameter
Default value
Example
Description
1
&ZeroWidthSpace;
|5
Required: specify the card rank (1/2/3/4/5).
colour
transparent
|colour={{g}}
Required: specify the card colour: {{r}} {{y}} {{g}} {{b}} {{w}} {{m}}
colourLetter
null
|colourLetter=g
Required: specify the card colour letter: red ⇨r, yellow ⇨y, green ⇨g, blue ⇨b, white ⇨w, multicolour ⇨m.
colourName
null
|colourName=green
Required: specify the colour word used for tooltips and screen readers.
clueColourName
{{{colourName|}}}
|clueColourName=green
Optional: specify the clue colour word used for tooltips and screen readers.
clueColour
{{{colour|transparent}}}
|clueColour={{g}}
Optional: specify the clue colour: {{r}} {{y}} {{g}} {{b}} {{w}} {{m}}
clueNumber
{{{1|&ZeroWidthSpace;}}}
|clueNumber={{1}}
Optional: specify the clue rank: (1/2/3/4/5).
textOutline
0
|textOutline=1
Optional: specify the text outline opacity: transparent ⇨0, opaque ⇨1
backgroundColour
#2F2342 (black)
|backgroundColour=grey
Optional: specify the background colour.
showClueNumber
none
|showClueNumber=
Optional: display the rank clue.
showClueColour
hidden
|showClueColour=
Optional: display the colour clue.
Retrieved from "http:///index.php?title=Template:HCard&oldid=19413"