Vertical ID Card

Link to article: Vertical ID Card.

@import url('https://scp-wiki.wdfiles.com/local--code/component:v-id-card/1');


/* Styling the code block connotations */

span.desc {
    user-select: none;
    color: darkblue;
}


/* Keycap mousedown appearance */

span.keycap:active {
    border: 1px solid;
    border-color: #bbb #ddd #ddd #bbb;
    border-bottom-width: 1px;
    border-top-width: 2px;
}

span.keycap a {
    color: unset;
    text-decoration: none;
}

/* Keycap click-preview */

#u-preview-1,
#u-preview-2,
#u-preview-3,
#u-preview-pride,
#u-preview-phil,
#u-preview-abro,
#u-preview-agender,
#u-preview-aroace,
#u-preview-aromantic,
#u-preview-asexual,
#u-preview-bi,
#u-preview-bigender,
#u-preview-demiboy,
#u-preview-demigender,
#u-preview-demigirl,
#u-preview-enbian,
#u-preview-gaymen,
#u-preview-genderfluid,
#u-preview-genderflux,
#u-preview-genderqueer,
#u-preview-lesbian,
#u-preview-nb,
#u-preview-neutrois,
#u-preview-omni,
#u-preview-pan,
#u-preview-pangender,
#u-preview-poly,
#u-preview-qpr,
#u-preview-trans {
    position: absolute;
    top: -30em;
    width: 0;
    height: 0;
    pointer-events: none;
}

#u-preview-1:target ~ .portrait {
    background-image: var(--v-id-card-gradient-1) !important;
}
#u-preview-2:target ~ .portrait {
    background-image: var(--v-id-card-gradient-2) !important;
}
#u-preview-3:target ~ .portrait {
    background-image: var(--v-id-card-gradient-3) !important;
}
#u-preview-pride:target ~ .portrait {
    background-image: var(--v-id-card-gradient-pride) !important;
}
#u-preview-phil:target ~ .portrait {
    background-image: var(--v-id-card-gradient-phil) !important;
}
#u-preview-abro:target ~ .portrait {
    background-image: var(--v-id-card-gradient-abro) !important;
}
#u-preview-agender:target ~ .portrait {
    background-image: var(--v-id-card-gradient-agender) !important;
}
#u-preview-aroace:target ~ .portrait {
    background-image: var(--v-id-card-gradient-aroace) !important;
}
#u-preview-aromantic:target ~ .portrait {
    background-image: var(--v-id-card-gradient-aromantic) !important;
}
#u-preview-asexual:target ~ .portrait {
    background-image: var(--v-id-card-gradient-asexual) !important;
}
#u-preview-bi:target ~ .portrait {
    background-image: var(--v-id-card-gradient-bi) !important;
}
#u-preview-bigender:target ~ .portrait {
    background-image: var(--v-id-card-gradient-bigender) !important;
}
#u-preview-demiboy:target ~ .portrait {
    background-image: var(--v-id-card-gradient-demiboy) !important;
}
#u-preview-demigender:target ~ .portrait {
    background-image: var(--v-id-card-gradient-demigender) !important;
}
#u-preview-demigirl:target ~ .portrait {
    background-image: var(--v-id-card-gradient-demigirl) !important;
}
#u-preview-enbian:target ~ .portrait {
    background-image: var(--v-id-card-gradient-enbian) !important;
}
#u-preview-gaymen:target ~ .portrait {
    background-image: var(--v-id-card-gradient-gaymen) !important;
}
#u-preview-genderfluid:target ~ .portrait {
    background-image: var(--v-id-card-gradient-genderfluid) !important;
}
#u-preview-genderflux:target ~ .portrait {
    background-image: var(--v-id-card-gradient-genderflux) !important;
}
#u-preview-genderqueer:target ~ .portrait {
    background-image: var(--v-id-card-gradient-genderqueer) !important;
}
#u-preview-lesbian:target ~ .portrait {
    background-image: var(--v-id-card-gradient-lesbian) !important;
}
#u-preview-nb:target ~ .portrait {
    background-image: var(--v-id-card-gradient-nb) !important;
}
#u-preview-neutrois:target ~ .portrait {
    background-image: var(--v-id-card-gradient-neutrois) !important;
}
#u-preview-omni:target ~ .portrait {
    background-image: var(--v-id-card-gradient-omni) !important;
}
#u-preview-pan:target ~ .portrait {
    background-image: var(--v-id-card-gradient-pan) !important;
}
#u-preview-pangender:target ~ .portrait {
    background-image: var(--v-id-card-gradient-pangender) !important;
}
#u-preview-poly:target ~ .portrait {
    background-image: var(--v-id-card-gradient-poly) !important;
}
#u-preview-qpr:target ~ .portrait {
    background-image: var(--v-id-card-gradient-qpr) !important;
}
#u-preview-trans:target ~ .portrait {
    background-image: var(--v-id-card-gradient-trans) !important;
}

```
display: none
```
```
background-color: #eee;
```
```
white-space: nowrap;
```
```
width: 100%; height: 550px;
```
```
white-space: nowrap;
```

background-image: var(--v-id-card-gradient-3);

background-image: var(--v-id-card-gradient-nb);

background-image: var(--v-id-card-gradient-2);

background-image: var(--v-id-card-gradient-2);

```
white-space: nowrap;
```

background-color: {$portrait-bg-color}; background-image: var(--v-id-card-gradient-{$portrait-gradient});

```
white-space: nowr{$name-nowrap}p;
```
```
white-space: nowr{$dept-nowrap}p;
```
```
white-space: nowr{$position-nowrap}p;
```
```
white-space: nowr{$facility-nowrap}p;
```

```
crom-thumbnail
```
```
blockquote
```
```
id-card-vertical
```
```
level
```
```
level-bar-container
```
```
level-4
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-name
```
```
portrait
```
```
data
```
```
barcode-wrap
```
```
barcode
```
```
barcode-num
```
```
issue-exp
```
```
issue-exp-title
```
```
issue-exp-content
```
```
issue-exp-content
```
```
info
```
```
fullname
```
```
info-title
```
```
info-content
```
```
department
```
```
info-title
```
```
info-content
```
```
position
```
```
info-title
```
```
info-content
```
```
facility
```
```
info-title
```
```
info-content
```
```
blockquote
```
```
blockquote
```
```
desc
```
```
desc
```
```
desc
```
```
desc
```
```
desc
```
```
desc
```
```
desc
```
```
desc
```
```
desc
```
```
desc
```
```
desc
```
```
desc
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
id-card-vertical
```
```
level
```
```
level-bar-container
```
```
level-3
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-name
```
```
portrait
```
```
data
```
```
barcode-wrap
```
```
barcode
```
```
barcode-num
```
```
issue-exp
```
```
issue-exp-title
```
```
issue-exp-content
```
```
issue-exp-content
```
```
info
```
```
fullname
```
```
info-title
```
```
info-content
```
```
department
```
```
info-title
```
```
info-content
```
```
position
```
```
info-title
```
```
info-content
```
```
facility
```
```
info-title
```
```
info-content
```
```
blockquote
```
```
id-card-vertical
```
```
level
```
```
level-bar-container
```
```
level-4
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-name
```
```
portrait
```
```
data
```
```
barcode-wrap
```
```
barcode
```
```
barcode-num
```
```
issue-exp
```
```
issue-exp-title
```
```
issue-exp-content
```
```
issue-exp-content
```
```
info
```
```
fullname
```
```
info-title
```
```
info-content
```
```
department
```
```
info-title
```
```
info-content
```
```
position
```
```
info-title
```
```
info-content
```
```
facility
```
```
info-title
```
```
info-content
```
```
blockquote
```
```
id-card-vertical
```
```
level
```
```
level-bar-container
```
```
level-0
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-name
```
```
portrait
```
```
data
```
```
barcode-wrap
```
```
barcode
```
```
barcode-num
```
```
issue-exp
```
```
issue-exp-title
```
```
issue-exp-content
```
```
issue-exp-content
```
```
info
```
```
fullname
```
```
info-title
```
```
info-content
```
```
department
```
```
info-title
```
```
info-content
```
```
position
```
```
info-title
```
```
info-content
```
```
facility
```
```
info-title
```
```
info-content
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
blockquote
```
```
id-card-vertical
```
```
level
```
```
level-bar-container
```
```
level-5
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-name
```
```
portrait
```
```
data
```
```
barcode-wrap
```
```
barcode
```
```
barcode-num
```
```
issue-exp
```
```
issue-exp-title
```
```
issue-exp-content
```
```
issue-exp-content
```
```
info
```
```
fullname
```
```
info-title
```
```
info-content
```
```
department
```
```
info-title
```
```
info-content
```
```
position
```
```
info-title
```
```
info-content
```
```
facility
```
```
info-title
```
```
info-content
```
```
blockquote
```
```
id-card-vertical
```
```
level
```
```
level-bar-container
```
```
level-5
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-name
```
```
portrait
```
```
data
```
```
barcode-wrap
```
```
barcode
```
```
barcode-num
```
```
issue-exp
```
```
issue-exp-title
```
```
issue-exp-content
```
```
issue-exp-content
```
```
info
```
```
fullname
```
```
info-title
```
```
info-content
```
```
department
```
```
info-title
```
```
info-content
```
```
position
```
```
info-title
```
```
info-content
```
```
facility
```
```
info-title
```
```
info-content
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
keycap
```
```
id-card-vertical
```
```
level
```
```
level-bar-container
```
```
level-{$level}
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-bar
```
```
level-name
```
```
portrait
```
```
data
```
```
barcode-wrap
```
```
barcode
```
```
barcode-num
```
```
issue-exp
```
```
issue-exp-title
```
```
issue-exp-content
```
```
issue-exp-content
```
```
info
```
```
fullname
```
```
info-title
```
```
info-content
```
```
department
```
```
info-title
```
```
info-content
```
```
position
```
```
info-title
```
```
info-content
```
```
facility
```
```
info-title
```
```
info-content
```

[[module CSS]]
@import url('https://scp-wiki.wdfiles.com/local--code/component:v-id-card/1');
[[/module]]
[[iftags +component]]

[!-- Crom thumbnail --]
[[image v-id-card-thumbnail.png class="crom-thumbnail" style="display: none"]]

[[include :scp-wiki:info:start]]
**Author:** [[*user Dr Talcite]]

**Acknowledgement:** [[*user EstrellaYoshte]]'s [[[component:id-card |ID Card Component]]]

**[*https://scp-esperanto.wikidot.com/component:v-id-card Esperanto Version]**

----

= **File Info**

# *https://scp-wiki.wdfiles.com/local--files/component:v-id-card/scp-logo-alternate.svg, adapted from https://commons.wikimedia.org/wiki/File:SCP_Foundation_(emblem).svg, CC BY-SA 3.0 Unported
# *https://area-cn-02.wdfiles.com/local--files/component:v-id-card/alexis-talcite.png, own work
# *https://area-cn-02.wdfiles.com/local--files/component:v-id-card/placeholder.svg, own work
# *https://scp-sandbox-3.wdfiles.com/local--files/component:v-id-card/lillian-lillihammer.gif, adapted from [[*user Fenmoth]]'s [[[art:fenmothsartpage| artwork]]]
# *https://area-cn-02.wdfiles.com/local--files/component:v-id-card/merry-dashmere.png, own work

[[include :scp-wiki:info:end]]

[[=]]
++ What is this?
[[/=]]

[[div class="blockquote"]]

Customizable personnel ID cards that can serve both decorative & informative purposes. 

While primarily inspired by [[[component:id-card |ID Card Component]]], it has adopted a vertical, more compact layout with an additional "facility" field.

[[/div]]

[[=]]
----
++ Example
----
[[/=]]

[[div_ class="id-card-vertical"]]

[[div_ class="level"]]

[[div class="level-bar-container level-4"]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[/div]]

[[div_ class="level-name"]]
C-4
[[/div]]

[[/div]]

[[div_ class="portrait" style="background-color: #eee;"]]
[[image https://area-cn-02.wdfiles.com/local--files/component:v-id-card/alexis-talcite.png]]
[[/div]]

[[div_ class="data"]]
[[div_ class="barcode-wrap"]]
[[div_ class="barcode"]]
*4951855*
[[/div]]
[[div_ class="barcode-num"]]
4951855
[[/div]]
[[/div]]
[[div_ class="issue-exp"]]
[[span class="issue-exp-title"]]ISSUE-EXP[[/span]]
[[span class="issue-exp-content"]]12/2018[[/span]]
[[span class="issue-exp-content"]]12/2028[[/span]]
[[/div]]
[[/div]]

[[div_ class="info"]]

[[div_ class="fullname"]]
[[span class="info-title"]]FULL NAME[[/span]]
[[span class="info-content" style="white-space: nowrap;"]]Alexis Asriel Talcite[[/span]]
[[/div]]

[[div_ class="department"]]
[[span class="info-title"]]DEPARTMENT[[/span]]
[[span class="info-content"]]IT & Memetics[[/span]]
[[/div]]

[[div_ class="position"]]
[[span class="info-title"]]POSITION[[/span]]
[[span class="info-content"]]Research Lead[[/span]]
[[/div]]

[[div_ class="facility"]]
[[span class="info-title"]]FACILITY[[/span]]
[[span class="info-content"]]Area-CN-02[[/span]]
[[/div]]

[[/div]]
[[/div]]


[[module CSS]]

/* Styling the code block connotations */

span.desc {
    user-select: none;
    color: darkblue;
}

[[/module]]

[[=]]
----
++ How to use?
----
[[/=]]

To use this component, copy the following code and paste it in any place in your article in a new line. Then read the short instruction below and fill in the fields as you need.

[[div class="blockquote"]]
@@[[include :scp-wiki:component:v-id-card@@
|portrait= 
|portrait-bg-color= 
|portrait-gradient= 
|name= 
|department= 
|position= 
|facility= 
|class= 
|level= 
|number= 
|issue= MM/YYYY
|exp= MM/YYYY
@@]]@@
[[/div]]

You can put multiple ID cards on one single page, and each of them can carry different information.

[[div class="blockquote"]]
@@[[include :scp-wiki:component:v-id-card@@
|portrait= [[span class="desc"]] {{Photo URL. If left blank, it will appear as a broken image icon.}} [[/span]]
|portrait-bg-color= [[span class="desc"]] {{Optional. Accept [*https://www.w3schools.com/cssref/css_colors.php color names], RGB, or HEX values. Background color for the ID photo (Default color is transparent). Can be useful when your picture has a transparent background. }} [[/span]]
|portrait-gradient= [[span class="desc"]] {{Optional. 1/2/3 or other keywords. Background gradient preset for the ID photo. See below for a preview.}} [[/span]]
|name= [[span class="desc"]]{{Full Name. You can disable automatic line breaking (see below for details), or make a new line if the word is broken at an undesired place. Same hereinafter.}}[[/span]]
|department= [[span class="desc"]]{{Department}}[[/span]]
|position= [[span class="desc"]]{{Job Position}}[[/span]]
|facility= [[span class="desc"]]{{Facility of Service}}[[/span]]
|class= [[span class="desc"]]{{A/B/C/D/E, specify the personnel class. See [[[security-clearance-levels|this page]]] for reference.}} [[/span]]
|level= [[span class="desc"]]{{0-5, specify the clearance level}}[[/span]]
|number= [[span class="desc"]]{{Serial Number}}[[/span]]
|issue= MM/YYYY[[span class="desc"]] {{Card issue time.}}[[/span]]
|exp= MM/YYYY[[span class="desc"]] {{Card expiry time.}}[[/span]]
@@]]@@
[[/div]]

[[collapsible show="▷ Color Picker" hide="▽ Color Picker"]]

[[iframe https://photokit.com/colors/app/color-picker/#amp=1 frameborder="0" scrolling="no" title="Color Picker" style="width: 100%; height: 550px;" sandbox="allow-scripts allow-popups allow-downloads"]]

[[/collapsible]]

If it works as expected, the barcode should be scannable. 

The card's default width is responsive, meaning it will change according to your screen size to ensure the best readability. The minimal height of the card is [[$ \sqrt{2} $]] × (Card Width), maintaining the same aspect ratio as [*https://paper-size.com/c/a-paper-sizes.html standard A paper sizes], which makes it easier to print.

[[=]]
----
++ Gradient Presets
----
[[/=]]

To use this, put the respective key in the [[span class="keycap"]]|portrait-gradient=  [[/span]]field.

[[div_ style="display: flex;
align-items: center;
justify-content: center;
gap: 1em;"]]

[[div_ style="width: 47vw; aspect-ratio: 3/4; 
background-image: var(--v-id-card-gradient-1);
"]]
[[/div]]

[[div_ style="width: 47vw; aspect-ratio: 3/4; 
background-image: var(--v-id-card-gradient-2);
"]]
[[/div]]

[[div_ style="width: 47vw; aspect-ratio: 3/4; 
background-image: var(--v-id-card-gradient-3);
"]]
[[/div]]

[[/div]]

[[div_ style="display: flex;
align-items: center;
justify-content: center;
gap: 1em;"]]

[[div style="width: 21vw;
text-align: center;
font-size: 90%;
padding: 1em;
"]]
Gradient 1

[[span class="keycap"]][#u-preview-1 1][[/span]]
[[/div]]

[[div style="width: 21vw;
text-align: center;
font-size: 90%;
padding: 1em;
"]]
Gradient 2

[[span class="keycap"]][#u-preview-2 2][[/span]]
[[/div]]

[[div style="width: 21vw;
text-align: center;
font-size: 90%;
padding: 1em;
"]]
Gradient 3

[[span class="keycap"]][#u-preview-3 3][[/span]]
[[/div]]

[[/div]]

A dozen of pride flags are also available. Now it includes [[span class="keycap"]][#u-preview-pride pride][[/span]] (basic 6-stripe rainbow) and [[span class="keycap"]][#u-preview-phil phil][[/span]] (BIPOC inclusive), and of course more (in alphabetical order):

[[span class="keycap"]][#u-preview-abro abro][[/span]], [[span class="keycap"]][#u-preview-agender agender][[/span]], [[span class="keycap"]][#u-preview-aroace aroace][[/span]], [[span class="keycap"]][#u-preview-aromantic aromantic][[/span]], [[span class="keycap"]][#u-preview-asexual asexual][[/span]], [[span class="keycap"]][#u-preview-bi bi][[/span]], [[span class="keycap"]][#u-preview-bigender bigender][[/span]], [[span class="keycap"]][#u-preview-demiboy demiboy][[/span]], [[span class="keycap"]][#u-preview-demigender demigender][[/span]], [[span class="keycap"]][#u-preview-demigirl demigirl][[/span]], [[span class="keycap"]][#u-preview-enbian enbian][[/span]], [[span class="keycap"]][#u-preview-gaymen gaymen][[/span]], [[span class="keycap"]][#u-preview-genderfluid genderfluid][[/span]], [[span class="keycap"]][#u-preview-genderflux genderflux][[/span]], [[span class="keycap"]][#u-preview-genderqueer genderqueer][[/span]], [[span class="keycap"]][#u-preview-lesbian lesbian][[/span]], [[span class="keycap"]][#u-preview-nb nb][[/span]] [[size 90%]](nonbinary)[[/size]], [[span class="keycap"]][#u-preview-neutrois neutrois][[/span]], [[span class="keycap"]][#u-preview-omni omni][[/span]], [[span class="keycap"]][#u-preview-pan pan][[/span]], [[span class="keycap"]][#u-preview-pangender pangender][[/span]], [[span class="keycap"]][#u-preview-poly poly][[/span]], [[span class="keycap"]][#u-preview-qpr qpr][[/span]] [[size 90%]](queerplatonic)[[/size]], [[span class="keycap"]][#u-preview-trans trans][[/span]]. Might add more later.

Click on the keywords and see how they appear below.

[[collapsible show="▷ Preview" hide="▽ Preview"]]

[[div_ class="id-card-vertical"]]

[[div_ class="level"]]

[[div class="level-bar-container level-3"]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[/div]]

[[div_ class="level-name"]]
C-3
[[/div]]

[[/div]]

[[div_ id="u-preview-1"]]
[[/div]]
[[div_ id="u-preview-2"]]
[[/div]]
[[div_ id="u-preview-3"]]
[[/div]]
[[div_ id="u-preview-pride"]]
[[/div]]
[[div_ id="u-preview-phil"]]
[[/div]]
[[div_ id="u-preview-abro"]]
[[/div]]
[[div_ id="u-preview-agender"]]
[[/div]]
[[div_ id="u-preview-aroace"]]
[[/div]]
[[div_ id="u-preview-aromantic"]]
[[/div]]
[[div_ id="u-preview-asexual"]]
[[/div]]
[[div_ id="u-preview-bi"]]
[[/div]]
[[div_ id="u-preview-bigender"]]
[[/div]]
[[div_ id="u-preview-demiboy"]]
[[/div]]
[[div_ id="u-preview-demigender"]]
[[/div]]
[[div_ id="u-preview-demigirl"]]
[[/div]]
[[div_ id="u-preview-enbian"]]
[[/div]]
[[div_ id="u-preview-gaymen"]]
[[/div]]
[[div_ id="u-preview-genderfluid"]]
[[/div]]
[[div_ id="u-preview-genderflux"]]
[[/div]]
[[div_ id="u-preview-genderqueer"]]
[[/div]]
[[div_ id="u-preview-lesbian"]]
[[/div]]
[[div_ id="u-preview-nb"]]
[[/div]]
[[div_ id="u-preview-neutrois"]]
[[/div]]
[[div_ id="u-preview-omni"]]
[[/div]]
[[div_ id="u-preview-pan"]]
[[/div]]
[[div_ id="u-preview-pangender"]]
[[/div]]
[[div_ id="u-preview-poly"]]
[[/div]]
[[div_ id="u-preview-qpr"]]
[[/div]]
[[div_ id="u-preview-trans"]]
[[/div]]
[[div_ class="portrait"]]
[[image https://area-cn-02.wdfiles.com/local--files/component:v-id-card/placeholder.svg]]
[[/div]]

[[div_ class="data"]]
[[div_ class="barcode-wrap"]]
[[div_ class="barcode"]]
*0000000*
[[/div]]
[[div_ class="barcode-num"]]
0000000
[[/div]]
[[/div]]
[[div_ class="issue-exp"]]
[[span class="issue-exp-title"]]ISSUE-EXP[[/span]]
[[span class="issue-exp-content"]]MM/YYYY[[/span]]
[[span class="issue-exp-content"]]MM/YYYY[[/span]]
[[/div]]
[[/div]]

[[div_ class="info"]]

[[div_ class="fullname"]]
[[span class="info-title"]]FULL NAME[[/span]]
[[span class="info-content" style="white-space: nowrap;"]][Placeholder][[/span]]
[[/div]]

[[div_ class="department"]]
[[span class="info-title"]]DEPARTMENT[[/span]]
[[span class="info-content"]][Placeholder][[/span]]
[[/div]]

[[div_ class="position"]]
[[span class="info-title"]]POSITION[[/span]]
[[span class="info-content"]][Placeholder][[/span]]
[[/div]]

[[div_ class="facility"]]
[[span class="info-title"]]FACILITY[[/span]]
[[span class="info-content"]][Placeholder][[/span]]
[[/div]]

[[/div]]
[[/div]]

[[/collapsible]]

----

[[collapsible show="▷ Examples of Usage" hide="▽ Examples of Usage"]]

[[div class="blockquote"]]

@@[[include :scp-wiki:component:v-id-card@@
|portrait= ##blue|@@https://scp-sandbox-3.wdfiles.com/local--files/component:v-id-card/lillian-lillihammer.gif@@##
|portrait-gradient= ##blue|3##
|name= ##blue|Lillian Shelby ##
##blue|Lillihammer##
|department= ##blue|Memetics & ##
##blue|Countermemetics##
|position= ##blue|Section Chair##
|facility= ##blue|Site-43##
|class= ##blue|C##
|level= ##blue|4##
|number= ##blue|19990011##
|issue= ##blue|01/1995##
|exp= ##blue|01/2035##
@@]]@@

[[/div]]

[[div_ class="id-card-vertical"]]

[[div_ class="level"]]

[[div class="level-bar-container level-4"]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[/div]]

[[div_ class="level-name"]]
C-4
[[/div]]

[[/div]]

[[div_ class="portrait" style="background-image: var(--v-id-card-gradient-3);"]]
[[image https://scp-sandbox-3.wdfiles.com/local--files/component:v-id-card/lillian-lillihammer.gif]]
[[/div]]

[[div_ class="data"]]
[[div_ class="barcode-wrap"]]
[[div_ class="barcode"]]
*19990011*
[[/div]]
[[div_ class="barcode-num"]]
19990011
[[/div]]
[[/div]]
[[div_ class="issue-exp"]]
[[span class="issue-exp-title"]]ISSUE-EXP[[/span]]
[[span class="issue-exp-content"]]01/1995[[/span]]
[[span class="issue-exp-content"]]01/2035[[/span]]
[[/div]]
[[/div]]

[[div_ class="info"]]

[[div_ class="fullname"]]
[[span class="info-title"]]FULL NAME[[/span]]
[[span class="info-content"]]Lillian Shelby 
Lillihammer[[/span]]
[[/div]]

[[div_ class="department"]]
[[span class="info-title"]]DEPARTMENT[[/span]]
[[span class="info-content"]]Memetics & 
Countermemetics[[/span]]
[[/div]]

[[div_ class="position"]]
[[span class="info-title"]]POSITION[[/span]]
[[span class="info-content"]]Section Chair[[/span]]
[[/div]]

[[div_ class="facility"]]
[[span class="info-title"]]FACILITY[[/span]]
[[span class="info-content"]]Site-43[[/span]]
[[/div]]

[[/div]]
[[/div]]

----

[[div class="blockquote"]]

@@[[include :scp-wiki:component:v-id-card@@
|portrait= ##blue|@@https://scp-wiki.wdfiles.com/local--files/component:v-id-card/alex-thorley.png@@ ##
|portrait-gradient= ##blue|nb ##
|name= ##blue|Alex Thorley ##
|department= ##blue|Unreality ##
|position= ##blue|[INSERT TEXT] ##
|facility= ##blue|Site-0 ##
|class= ##blue|E ##
|level= ##blue|0 ##
|number= ##blue|NaN ##
|issue= ##blue|Unknown ##
|exp= ##blue|∞ ##
@@]]@@

[[/div]]

[[div_ class="id-card-vertical"]]

[[div_ class="level"]]

[[div class="level-bar-container level-0"]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[/div]]

[[div_ class="level-name"]]
E-0
[[/div]]

[[/div]]

[[div_ class="portrait" style="background-image: var(--v-id-card-gradient-nb);"]]
[[image https://scp-wiki.wdfiles.com/local--files/component:v-id-card/alex-thorley.png]]
[[/div]]

[[div_ class="data"]]
[[div_ class="barcode-wrap"]]
[[div_ class="barcode"]]
*NaN*
[[/div]]
[[div_ class="barcode-num"]]
NaN
[[/div]]
[[/div]]
[[div_ class="issue-exp"]]
[[span class="issue-exp-title"]]ISSUE-EXP[[/span]]
[[span class="issue-exp-content"]]Unknown[[/span]]
[[span class="issue-exp-content"]]∞[[/span]]
[[/div]]
[[/div]]

[[div_ class="info"]]

[[div_ class="fullname"]]
[[span class="info-title"]]FULL NAME[[/span]]
[[span class="info-content"]]Alex Thorley[[/span]]
[[/div]]

[[div_ class="department"]]
[[span class="info-title"]]DEPARTMENT[[/span]]
[[span class="info-content"]]Unreality[[/span]]
[[/div]]

[[div_ class="position"]]
[[span class="info-title"]]POSITION[[/span]]
[[span class="info-content"]][INSERT TEXT][[/span]]
[[/div]]

[[div_ class="facility"]]
[[span class="info-title"]]FACILITY[[/span]]
[[span class="info-content"]]Site-0[[/span]]
[[/div]]

[[/div]]
[[/div]]
= ##gray|//(Portrait intentionally left blank.)//##

[[/collapsible]]

[[=]]
----
++ Disable Line Breaking
----
[[/=]]

This will prevent words in specific text field(s) from breaking.

Warning: This will cause overflowing if your text is too long.

+++ Disable auto line breaks in...

Name field:
[[div class="blockquote"]]
|name-nowrap= a
[[/div]]

Department field:
[[div class="blockquote"]]
|dept-nowrap= a
[[/div]]

Position field:
[[div class="blockquote"]]
|position-nowrap= a
[[/div]]

Facility field:
[[div class="blockquote"]]
|facility-nowrap= a
[[/div]]

[[collapsible show="▷ Show Comparison" hide="▽ Hide Comparison"]]

+++ Original (Automatic Line Wrap)

[[div class="blockquote"]]

@@[[include :scp-wiki:component:v-id-card@@
|portrait= @@https://area-cn-02.wdfiles.com/local--files/component:v-id-card/merry-dashmere.png@@
|portrait-gradient= 2
|name= Merry S. Dashmere
|department= Science Dept.
|position= HMCL Supervisor
|facility= Area-03
|class= B
|level= 5
|number= 001811
|issue= 05/2009
|exp= 05/2039
@@]]@@

[[/div]]

[[div_ class="id-card-vertical"]]

[[div_ class="level"]]

[[div class="level-bar-container level-5"]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[/div]]

[[div_ class="level-name"]]
B-5
[[/div]]

[[/div]]

[[div_ class="portrait" style="background-image: var(--v-id-card-gradient-2);"]]
[[image https://area-cn-02.wdfiles.com/local--files/component:v-id-card/merry-dashmere.png]]
[[/div]]

[[div_ class="data"]]
[[div_ class="barcode-wrap"]]
[[div_ class="barcode"]]
*001811*
[[/div]]
[[div_ class="barcode-num"]]
001811
[[/div]]
[[/div]]
[[div_ class="issue-exp"]]
[[span class="issue-exp-title"]]ISSUE-EXP[[/span]]
[[span class="issue-exp-content"]]05/2009[[/span]]
[[span class="issue-exp-content"]]05/2039[[/span]]
[[/div]]
[[/div]]

[[div_ class="info"]]

[[div_ class="fullname"]]
[[span class="info-title"]]FULL NAME[[/span]]
[[span class="info-content"]]Merry S. Dashmere[[/span]]
[[/div]]

[[div_ class="department"]]
[[span class="info-title"]]DEPARTMENT[[/span]]
[[span class="info-content"]]Science Dept.[[/span]]
[[/div]]

[[div_ class="position"]]
[[span class="info-title"]]POSITION[[/span]]
[[span class="info-content"]]HMCL Supervisor[[/span]]
[[/div]]

[[div_ class="facility"]]
[[span class="info-title"]]FACILITY[[/span]]
[[span class="info-content"]]Area-03[[/span]]
[[/div]]

[[/div]]
[[/div]]

+++ With Nowrap

[[div class="blockquote"]]

@@[[include :scp-wiki:component:v-id-card@@
|portrait= @@https://area-cn-02.wdfiles.com/local--files/component:v-id-card/merry-dashmere.png@@
|portrait-gradient= 2
|name= Merry S. Dashmere
##red|**|name-nowrap= a**##
|department= Science Dept.
|position= HMCL Supervisor
|facility= Area-03
|class= B
|level= 5
|number= 001811
|issue= 05/2009
|exp= 05/2039
@@]]@@

[[/div]]

[[div_ class="id-card-vertical"]]

[[div_ class="level"]]

[[div class="level-bar-container level-5"]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[/div]]

[[div_ class="level-name"]]
B-5
[[/div]]

[[/div]]

[[div_ class="portrait" style="background-image: var(--v-id-card-gradient-2);"]]
[[image https://area-cn-02.wdfiles.com/local--files/component:v-id-card/merry-dashmere.png]]
[[/div]]

[[div_ class="data"]]
[[div_ class="barcode-wrap"]]
[[div_ class="barcode"]]
*001811*
[[/div]]
[[div_ class="barcode-num"]]
001811
[[/div]]
[[/div]]
[[div_ class="issue-exp"]]
[[span class="issue-exp-title"]]ISSUE-EXP[[/span]]
[[span class="issue-exp-content"]]05/2009[[/span]]
[[span class="issue-exp-content"]]05/2039[[/span]]
[[/div]]
[[/div]]

[[div_ class="info"]]

[[div_ class="fullname"]]
[[span class="info-title"]]FULL NAME[[/span]]
[[span class="info-content" style="white-space: nowrap;"]]Merry S. Dashmere[[/span]]
[[/div]]

[[div_ class="department"]]
[[span class="info-title"]]DEPARTMENT[[/span]]
[[span class="info-content"]]Science Dept.[[/span]]
[[/div]]

[[div_ class="position"]]
[[span class="info-title"]]POSITION[[/span]]
[[span class="info-content"]]HMCL Supervisor[[/span]]
[[/div]]

[[div_ class="facility"]]
[[span class="info-title"]]FACILITY[[/span]]
[[span class="info-content"]]Area-03[[/span]]
[[/div]]

[[/div]]
[[/div]]

This is the card's minimum height when all fields are wrapped in a single line.

[[/collapsible]]

[[=]]
----
++ More Technical Details
----
[[/=]]

[[collapsible show="▷ Show CSS Variables" hide="▽ Hide"]]

++ CSS Variables

These trivial personalizing options are not included in the component due to redundancy. However, they are still kept in the code for potential use. 

For CSS veterans - these variables can be used to modify the default values (in the parenthesis). For separate customization, define them in inline styles instead of the global stylesheet.

[[span class="keycap"]]@@--v-id-card-width@@[[/span]]: Card width (150px + 15vw).
[[span class="keycap"]]@@--v-id-card-height@@[[/span]]: Card height. If set to a fixed value, overflow may occur and will be clipped.
[[span class="keycap"]]@@--v-id-card-radius@@[[/span]]: Card border-radius (5% of width).
[[span class="keycap"]]@@--v-id-card-padding@@[[/span]]: Card padding (4.5% of width).

[[span class="keycap"]]@@--v-id-card-logo@@[[/span]]: Link to the logo in the background (SCP logo).
[[span class="keycap"]]@@--v-id-card-logo-opacity@@[[/span]]: Opacity of the logo (0.08).

[[span class="keycap"]]@@--v-id-card-bg-color@@[[/span]]: Card background color (white).
[[span class="keycap"]]@@--v-id-card-text-color@@[[/span]]: Main text color (black).
[[span class="keycap"]]@@--v-id-card-secondary-color@@[[/span]]: Auxiliary color for field titles and the portrait frame (gray).
[[span class="keycap"]]@@--v-id-card-portrait-horizontal-corner-size@@[[/span]]: The horizontal corner width of the portrait's outer decorative frame (33%).
[[span class="keycap"]]@@--v-id-card-portrait-vertical-corner-size@@[[/span]]: The vertical corner width of the portrait's outer decorative frame (25%).
[[span class="keycap"]]@@--v-id-card-level0-color@@[[/span]]: Bar color of Level 0 (light gray).
[[span class="keycap"]]@@--v-id-card-level1-color@@[[/span]]: Bar color of Level 1 (green).
[[span class="keycap"]]@@--v-id-card-level2-color@@[[/span]]: Bar color of Level 2 (blue).
[[span class="keycap"]]@@--v-id-card-level3-color@@[[/span]]: Bar color of Level 3 (yellow).
[[span class="keycap"]]@@--v-id-card-level4-color@@[[/span]]: Bar color of Level 4 (orange).
[[span class="keycap"]]@@--v-id-card-level5-color@@[[/span]]: Bar color of Level 5 (red).
[[span class="keycap"]]@@--v-id-card-gradient-1@@[[/span]] (and a dozen more): The built-in gradient presets.

[[/collapsible]]
----

[[collapsible show="○ Show Source Code" hide="● Hide Source Code" hideLocation="both"]]

[[code type="CSS"]]

/* Lato Black */
@import url('https://fonts.googleapis.com/css2?family=Lato:wght@900&display=swap');

/* Libre Barcode 39 */
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39&display=swap');

/* Global Settings */
:root {
    --v-id-card-width: calc(150px + 15vw);
    --v-id-card-radius: calc(var(--v-id-card-width) * 0.05);
    --v-id-card-padding: calc(var(--v-id-card-width) * 0.045);
    --v-id-card-logo: url(https://scp-wiki.wdfiles.com/local--files/component:v-id-card/scp-logo-alternate.svg);

    --v-id-card-bg-color: rgb(255, 255, 255);
    --v-id-card-text-color: rgb(0, 0, 0);
    --v-id-card-secondary-color: rgb(175, 175, 175);
    --v-id-card-level0-color: rgb(230, 230, 230);
    --v-id-card-level1-color: rgb(58, 214, 55);
    --v-id-card-level2-color: rgb(50, 148, 255);
    --v-id-card-level3-color: rgb(255, 200, 38);
    --v-id-card-level4-color: rgb(255, 131, 38);
    --v-id-card-level5-color: rgb(255, 38, 0);

    --v-id-card-gradient-1: linear-gradient(to bottom, rgb(50, 134, 224), 40%, rgb(255, 255, 255));
    --v-id-card-gradient-2: radial-gradient(rgb(255, 255, 255), rgb(226, 224, 233));
    --v-id-card-gradient-3: radial-gradient(ellipse 100% 120% at bottom, rgb(200, 200, 200), rgb(21, 21, 30));
}

@media only screen and (max-width: 167px) {
    :root {
        --v-id-card-width: 90vw;
    }
}

.id-card-vertical {
    position: relative;
    z-index: 0;
    overflow: hidden;
    margin: 2em auto;
    box-sizing: border-box;
    width: var(--v-id-card-width);
    height: var(--v-id-card-height, auto);
    min-height: calc(var(--v-id-card-width)* 1.414);
    padding: var(--v-id-card-padding);
    border-radius: var(--v-id-card-radius);

    box-shadow: 0 0 calc(var(--v-id-card-width) * 0.025) gray;
    font-family: 'Lato', Tahoma, sans-serif;
    font-size: calc(var(--v-id-card-width) * 0.06);
    line-height: initial;
    background-color: var(--v-id-card-bg-color);
    color: var(--v-id-card-text-color);

    display: grid;
    grid-template-areas: "level level portrait"
                                   "data . portrait"
                                   "data . ."
                                   "data info info";
    grid-template-columns: 25% 1fr 46%;
    grid-template-rows: 
                                   calc(var(--v-id-card-width) * 0.4) 
                                   calc(var(--v-id-card-width) * 0.1) 
                                   calc(var(--v-id-card-width) * 0.1) 
                                   1fr;
}

/* Watermark */

.id-card-vertical::after {
    content: "";
    display: block;
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: var(--v-id-card-logo-opacity, 0.08);
    background-image: var(--v-id-card-logo);
    background-repeat: no-repeat;
    background-size: 75% 75%;
    background-position: 186% 146%;
    pointer-events: none;
}

/* ↖️Top-left part */

.id-card-vertical .level {
    grid-area: level;
    display: flex;
    flex-direction: column;
    position: relative;
}

.id-card-vertical .level-bar-container {
    display: flex;
    flex-direction: column;
    gap: calc(var(--v-id-card-width) * 0.013);
    width: calc(var(--v-id-card-width) * 0.39);
    margin-left: calc(var(--v-id-card-padding) * -1);
}

.id-card-vertical .level-bar {
    width: 100%;
    height: calc(var(--v-id-card-width) * 0.0267);
    background-color: var(--v-id-card-level0-color);
}

.id-card-vertical .level-1 .level-bar:nth-child(1) {
    background-color: var(--v-id-card-level1-color);
}
.id-card-vertical .level-2 .level-bar:is(:nth-child(1), :nth-child(2)) {
    background-color: var(--v-id-card-level2-color);
}
.id-card-vertical .level-3 .level-bar:is(:nth-child(1), :nth-child(2), :nth-child(3)) {
    background-color: var(--v-id-card-level3-color);
}
.id-card-vertical .level-4 .level-bar:is(:nth-child(1), :nth-child(2), :nth-child(3), :nth-child(4)) {
    background-color: var(--v-id-card-level4-color);
}
.id-card-vertical .level-5 .level-bar {
    background-color: var(--v-id-card-level5-color);
}

.id-card-vertical .level-name {
    font-weight: 900;
    font-size: calc(var(--v-id-card-width) * 0.19);
    position: absolute;
    bottom: 0;
}

/* ↙️Bottom-left part */

.id-card-vertical .data {
    grid-area: data;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    gap: calc(var(--v-id-card-width)* 0.02);
}

.id-card-vertical .barcode-wrap {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    justify-content: space-between;
    gap: calc(var(--v-id-card-width)* 0.02);
    white-space: nowrap;
    writing-mode: vertical-lr;
    text-align: right;
}

.id-card-vertical .barcode {
    font-family: 'Libre Barcode 39', sans-serif;
    font-size: calc(var(--v-id-card-width) * 0.167);
    font-weight: normal;     /* Barcode cannot display properly on higher font weights */
    margin-left: -0.38em;
    transform: scaleX(1.2);
}

.id-card-vertical .barcode-num {
    font-weight: 900;
    font-size: calc(var(--v-id-card-width) * 0.067);
}

.id-card-vertical .issue-exp {
    display: flex;
    flex-direction: column;
    white-space: nowrap;
    font-size: 0;    /* Remove <br> which takes up space */
}

.id-card-vertical span.issue-exp-title {
    font-weight: 900;
    font-size: calc(var(--v-id-card-width) * 0.043);
    color: var(--v-id-card-secondary-color);
}

.id-card-vertical span.issue-exp-content {
    font-weight: 900;
    font-size: calc(var(--v-id-card-width) * 0.056);
}

/* ↗️Top-right part */

.id-card-vertical .portrait {
    grid-area: portrait;
    border: solid calc(var(--v-id-card-width) * 0.019) var(--v-id-card-secondary-color);
    aspect-ratio: 3 / 4;
    position: relative;
    margin: calc(var(--v-id-card-width)* 0.01);
}

.id-card-vertical .portrait::after {
    content: "";
    display: block;
    pointer-events: none;
    position: absolute;
    top: calc(var(--v-id-card-width)* -0.03);
    bottom: calc(var(--v-id-card-width)* -0.03);
    left: calc(var(--v-id-card-width)* -0.03);
    right: calc(var(--v-id-card-width)* -0.03);
    border: calc(var(--v-id-card-width)* 0.005) solid var(--v-id-card-secondary-color);
    clip-path: polygon(
0% 0%, 
var(--v-id-card-portrait-horizontal-corner-size, 33.3%) 0%, 
var(--v-id-card-portrait-horizontal-corner-size, 33.3%) var(--v-id-card-portrait-vertical-corner-size, 25%), 
calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) var(--v-id-card-portrait-vertical-corner-size, 25%), 
calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) 0%, 
100% 0%, 
100% var(--v-id-card-portrait-vertical-corner-size, 25%), 
calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) var(--v-id-card-portrait-vertical-corner-size, 25%), 
calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), 
100% calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), 
100% 100%, 
calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) 100%, 
calc(100% - var(--v-id-card-portrait-horizontal-corner-size, 33.3%)) calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), 
var(--v-id-card-portrait-horizontal-corner-size, 33.3%) calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), 
var(--v-id-card-portrait-horizontal-corner-size, 33.3%) 100%, 
0% 100%, 
0% calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), 
var(--v-id-card-portrait-horizontal-corner-size, 33.3%) calc(100% - var(--v-id-card-portrait-vertical-corner-size, 25%)), 
var(--v-id-card-portrait-horizontal-corner-size, 33.3%) var(--v-id-card-portrait-vertical-corner-size, 25%), 
0% var(--v-id-card-portrait-vertical-corner-size, 25%), 
0% 0%);
}

.id-card-vertical .portrait img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

/* ↘️Bottom-right part */

.id-card-vertical .info {
    grid-area: info;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    text-align: right;
    gap: calc(var(--v-id-card-width)* 0.022);
    word-break: break-all;
    max-width: calc((var(--v-id-card-width) - var(--v-id-card-padding)* 2)* 0.75) !important;
}

.id-card-vertical span.info-title {
    font-weight: 900;
    font-size: calc(var(--v-id-card-width) * 0.057);
    color: var(--v-id-card-secondary-color);
}

.id-card-vertical span.info-content {
    font-weight: 900;
    font-size: calc(var(--v-id-card-width) * 0.082);
    display: flex;
    flex-direction: row-reverse; /* Prevent the text from overflowing rightwards */
}

/* 🌈Pride flag gradient presets */

:root {
    --v-id-card-gradient-pride:
linear-gradient(to bottom,
rgb(228, 0, 0) 16.7%,
rgb(255, 140, 0) 16.7%,
rgb(255, 140, 0) 33.3%,
rgb(255, 237, 0) 33.3%,
rgb(255, 237, 0) 50%,
rgb(0, 128, 38) 50%,
rgb(0, 128, 38) 66.7%,
rgb(0, 77, 255) 66.7%,
rgb(0, 77, 255) 83.3%,
rgb(117, 7, 135) 83.3%);

    --v-id-card-gradient-phil:
linear-gradient(to bottom,
rgb(0, 0, 0) 12.5%,
rgb(121, 78, 16) 12.5%,
rgb(121, 78, 16) 25%,
rgb(228, 0, 0) 25%,
rgb(228, 0, 0) 37.5%,
rgb(255, 140, 0) 37.5%,
rgb(255, 140, 0) 50%,
rgb(255, 237, 0) 50%,
rgb(255, 237, 0) 62.5%,
rgb(0, 128, 38) 62.5%,
rgb(0, 128, 38) 75%,
rgb(0, 77, 255) 75%,
rgb(0, 77, 255) 87.5%,
rgb(117, 7, 135) 87.5%);

    --v-id-card-gradient-abro:
linear-gradient(to bottom,
rgb(101, 194, 134) 20%,
rgb(180, 228, 204) 20%,
rgb(180, 228, 204) 40%,
rgb(255, 255, 255) 40%,
rgb(255, 255, 255) 60%,
rgb(231, 150, 183) 60%,
rgb(231, 150, 183) 80%,
rgb(217, 68, 110) 80%);

    --v-id-card-gradient-agender:
linear-gradient(to bottom,
rgb(0, 0, 0) 14.3%,
rgb(187, 187, 187) 14.3%,
rgb(187, 187, 187) 28.6%,
rgb(255, 255, 255) 28.6%,
rgb(255, 255, 255) 42.9%,
rgb(186, 244, 132) 42.9%,
rgb(186, 244, 132) 57.1%,
rgb(255, 255, 255) 57.1%,
rgb(255, 255, 255) 71.4%,
rgb(187, 187, 187) 71.4%,
rgb(187, 187, 187) 85.7%,
rgb(0, 0, 0) 85.7%);

    --v-id-card-gradient-aroace:
linear-gradient(to bottom,
rgb(226, 140, 0) 20%,
rgb(236, 205, 0) 20%,
rgb(236, 205, 0) 40%,
rgb(255, 255, 255) 40%,
rgb(255, 255, 255) 60%,
rgb(98, 174, 220) 60%,
rgb(98, 174, 220) 80%,
rgb(32, 56, 86) 80%);

    --v-id-card-gradient-aromantic:
linear-gradient(to bottom,
rgb(58, 166, 64) 20%,
rgb(168, 212, 122) 20%,
rgb(168, 212, 122) 40%,
rgb(255, 255, 255) 40%,
rgb(255, 255, 255) 60%,
rgb(171, 171, 171) 60%,
rgb(171, 171, 171) 80%,
rgb(0, 0, 0) 80%);

    --v-id-card-gradient-asexual:
linear-gradient(to bottom,
rgb(0, 0, 0) 25%,
rgb(149, 149, 149) 25%,
rgb(149, 149, 149) 50%,
rgb(255, 255, 255) 50%,
rgb(255, 255, 255) 75%,
rgb(102, 0, 102) 75%);

    --v-id-card-gradient-bi:
linear-gradient(to bottom,
rgb(215, 0, 113) 40%,
rgb(156, 78, 151) 40%,
rgb(156, 78, 151) 60%,
rgb(0, 53, 170) 60%);

    --v-id-card-gradient-bigender:
linear-gradient(to bottom,
rgb(104, 146, 217) 14.3%,
rgb(145, 195, 231) 14.3%,
rgb(145, 195, 231) 28.6%,
rgb(255, 255, 255) 28.6%,
rgb(255, 255, 255) 42.9%,
rgb(197, 164, 236) 42.9%,
rgb(197, 164, 236) 57.1%,
rgb(255, 255, 255) 57.1%,
rgb(255, 255, 525) 71.4%,
rgb(248, 171, 197) 71.4%,
rgb(248, 171, 197) 85.7%,
rgb(237, 121, 168) 85.7%);

    --v-id-card-gradient-demiboy:
linear-gradient(to bottom,
rgb(127, 127, 127) 14.3%,
rgb(195, 195, 195) 14.3%,
rgb(195, 195, 195) 28.6%,
rgb(153, 217, 234) 28.6%,
rgb(153, 217, 234) 42.9%,
rgb(255, 255, 255) 42.9%,
rgb(255, 255, 255) 57.1%,
rgb(153, 217, 234) 57.1%,
rgb(153, 217, 234) 71.4%,
rgb(195, 195, 195) 71.4%,
rgb(195, 195, 195) 85.7%,
rgb(127, 127, 127) 85.7%);

    --v-id-card-gradient-demigender:
linear-gradient(to bottom,
rgb(127, 127, 127) 14.3%,
rgb(195, 195, 195) 14.3%,
rgb(195, 195, 195) 28.6%,
rgb(251, 255, 117) 28.6%,
rgb(251, 255, 117) 42.9%,
rgb(255, 255, 255) 42.9%,
rgb(255, 255, 255) 57.1%,
rgb(251, 255, 117) 57.1%,
rgb(251, 255, 117) 71.4%,
rgb(195, 195, 195) 71.4%,
rgb(195, 195, 195) 85.7%,
rgb(127, 127, 127) 85.7%);

    --v-id-card-gradient-demigirl:
linear-gradient(to bottom,
rgb(127, 127, 127) 14.3%,
rgb(195, 195, 195) 14.3%,
rgb(195, 195, 195) 28.6%,
rgb(255, 176, 202) 28.6%,
rgb(255, 176, 202) 42.9%,
rgb(255, 255, 255) 42.9%,
rgb(255, 255, 255) 57.1%,
rgb(255, 176, 202) 57.1%,
rgb(255, 176, 202) 71.4%,
rgb(195, 195, 195) 71.4%,
rgb(195, 195, 195) 85.7%,
rgb(127, 127, 127) 85.7%);

    --v-id-card-gradient-enbian:
linear-gradient(to bottom,
rgb(62, 75, 198) 14.3%,
rgb(93, 95, 247) 14.3%,
rgb(93, 95, 247) 28.6%,
rgb(146, 159, 247) 28.6%,
rgb(146, 159, 247) 42.9%,
rgb(255, 255, 255) 42.9%,
rgb(255, 255, 255) 57.1%,
rgb(218, 160, 241) 57.1%,
rgb(218, 160, 241) 71.4%,
rgb(131, 66, 186) 71.4%,
rgb(131, 66, 186) 85.7%,
rgb(58, 27, 144) 85.7%);

    --v-id-card-gradient-gaymen:
linear-gradient(to bottom,
rgb(7, 142, 112) 14.3%,
rgb(38, 206, 170) 14.3%,
rgb(38, 206, 170) 28.6%,
rgb(152, 232, 193) 28.6%,
rgb(152, 232, 193) 42.9%,
rgb(255, 255, 255) 42.9%,
rgb(255, 255, 255) 57.1%,
rgb(123, 173, 226) 57.1%,
rgb(123, 173, 226) 71.4%,
rgb(80, 73, 203) 71.4%,
rgb(80, 73, 203) 85.7%,
rgb(61, 26, 120) 85.7%);

    --v-id-card-gradient-genderfluid:
linear-gradient(to bottom,
rgb(254, 117, 161) 20%,
rgb(255, 255, 255) 20%,
rgb(255, 255, 255) 40%,
rgb(190, 24, 214) 40%,
rgb(190, 24, 214) 60%,
rgb(0, 0, 0) 60%,
rgb(0, 0, 0) 80%,
rgb(51, 62, 188) 80%);

    --v-id-card-gradient-genderflux:
linear-gradient(to bottom,
rgb(244, 118, 148) 16.7%,
rgb(242, 162, 185) 16.7%,
rgb(242, 162, 185) 33.3%,
rgb(206, 206, 206) 33.3%,
rgb(206, 206, 206) 50%,
rgb(124, 224, 247) 50%,
rgb(124, 224, 247) 66.7%,
rgb(62, 205, 249) 66.7%,
rgb(62, 205, 249) 83.3%,
rgb(255, 244, 141) 83.3%);

    --v-id-card-gradient-genderqueer:
 linear-gradient(to bottom,
rgb(182, 151, 218) 33.3%,
rgb(255, 255, 255) 33.3%,
rgb(255, 255, 255) 66.7%,
rgb(107, 142, 58) 66.7%);

    --v-id-card-gradient-lesbian:
linear-gradient(to bottom,
rgb(215, 44, 0) 14.3%,
rgb(239, 116, 39) 14.3%,
rgb(239, 116, 39) 28.6%,
rgb(255, 151, 87) 28.6%,
rgb(255, 151, 87) 42.9%,
rgb(255, 255, 255) 42.9%,
rgb(255, 255, 255) 57.1%,
rgb(209, 98, 166) 57.1%,
rgb(209, 98, 166) 71.4%,
rgb(183, 85, 146) 71.4%,
rgb(183, 85, 146) 85.7%,
rgb(165, 1, 98) 85.7%);

    --v-id-card-gradient-nb:
linear-gradient(to bottom,
rgb(254, 244, 51) 25%,
rgb(255, 255, 255) 25%,
rgb(255, 255, 255) 50%,
rgb(154, 89, 207) 50%,
rgb(154, 89, 207) 75%,
rgb(45, 45, 45) 75%);

    --v-id-card-gradient-neutrois:
linear-gradient(to bottom,
rgb(255, 255, 255) 33.3%,
rgb(43, 157, 23) 33.3%,
rgb(43, 157, 23) 66.7%,
rgb(0, 0, 0) 66.7%);

   --v-id-card-gradient-omni:
linear-gradient(to bottom,
rgb(255, 156, 206) 20%,
rgb(255, 82, 191) 20%,
rgb(255, 82, 191) 40%,
rgb(33, 0, 68) 40%,
rgb(33, 0, 68) 60%,
rgb(102, 94, 255) 60%,
rgb(102, 94, 255) 80%,
rgb(141, 167, 255) 80%);

    --v-id-card-gradient-pan:
linear-gradient(to bottom,
rgb(255, 27, 141) 33.3%,
rgb(255, 217, 0) 33.3%,
rgb(255, 217, 0) 66.7%,
rgb(27, 179, 255) 66.7%);

    --v-id-card-gradient-pangender:
linear-gradient(to bottom,
rgb(255, 247, 152) 14.3%,
rgb(254, 221, 204) 14.3%,
rgb(254, 221, 204) 28.6%,
rgb(255, 235, 252) 28.6%,
rgb(255, 235, 252) 42.9%,
rgb(255, 255, 255) 42.9%,
rgb(255, 255, 255) 57.1%,
rgb(255, 235, 252) 57.1%,
rgb(255, 235, 252) 71.4%,
rgb(254, 221, 204) 71.4%,
rgb(254, 221, 204) 85.7%,
rgb(255, 247, 152) 85.7%);

    --v-id-card-gradient-poly:
linear-gradient(to bottom,
rgb(246, 28, 185) 33.3%,
rgb(7, 213, 105) 33.3%,
rgb(7, 213, 105) 66.7%,
rgb(28, 146, 246) 66.7%);

    --v-id-card-gradient-qpr:
linear-gradient(to bottom,
rgb(255, 249, 125) 20%,
rgb(255, 174, 221) 20%,
rgb(255, 174, 221) 40%,
rgb(255, 255, 255) 40%,
rgb(255, 255, 255) 60%,
rgb(127, 127, 127) 60%,
rgb(127, 127, 127) 80%,
rgb(15, 15, 15) 80%);

    --v-id-card-gradient-trans:
linear-gradient(to bottom,
rgb(91, 207, 250) 20%,
rgb(245, 171, 185) 20%,
rgb(245, 171, 185) 40%,
rgb(255, 255, 255) 40%,
rgb(255, 255, 255) 60%,
rgb(245, 171, 185) 60%,
rgb(245, 171, 185) 80%,
rgb(91, 207, 250) 80%);
}

[[/code]]
[[/collapsible]]

----

[[module CSS]]

/* Keycap mousedown appearance */

span.keycap:active {
    border: 1px solid;
    border-color: #bbb #ddd #ddd #bbb;
    border-bottom-width: 1px;
    border-top-width: 2px;
}

span.keycap a {
    color: unset;
    text-decoration: none;
}

/* Keycap click-preview */

#u-preview-1,
#u-preview-2,
#u-preview-3,
#u-preview-pride,
#u-preview-phil,
#u-preview-abro,
#u-preview-agender,
#u-preview-aroace,
#u-preview-aromantic,
#u-preview-asexual,
#u-preview-bi,
#u-preview-bigender,
#u-preview-demiboy,
#u-preview-demigender,
#u-preview-demigirl,
#u-preview-enbian,
#u-preview-gaymen,
#u-preview-genderfluid,
#u-preview-genderflux,
#u-preview-genderqueer,
#u-preview-lesbian,
#u-preview-nb,
#u-preview-neutrois,
#u-preview-omni,
#u-preview-pan,
#u-preview-pangender,
#u-preview-poly,
#u-preview-qpr,
#u-preview-trans {
    position: absolute;
    top: -30em;
    width: 0;
    height: 0;
    pointer-events: none;
}

#u-preview-1:target ~ .portrait {
    background-image: var(--v-id-card-gradient-1) !important;
}
#u-preview-2:target ~ .portrait {
    background-image: var(--v-id-card-gradient-2) !important;
}
#u-preview-3:target ~ .portrait {
    background-image: var(--v-id-card-gradient-3) !important;
}
#u-preview-pride:target ~ .portrait {
    background-image: var(--v-id-card-gradient-pride) !important;
}
#u-preview-phil:target ~ .portrait {
    background-image: var(--v-id-card-gradient-phil) !important;
}
#u-preview-abro:target ~ .portrait {
    background-image: var(--v-id-card-gradient-abro) !important;
}
#u-preview-agender:target ~ .portrait {
    background-image: var(--v-id-card-gradient-agender) !important;
}
#u-preview-aroace:target ~ .portrait {
    background-image: var(--v-id-card-gradient-aroace) !important;
}
#u-preview-aromantic:target ~ .portrait {
    background-image: var(--v-id-card-gradient-aromantic) !important;
}
#u-preview-asexual:target ~ .portrait {
    background-image: var(--v-id-card-gradient-asexual) !important;
}
#u-preview-bi:target ~ .portrait {
    background-image: var(--v-id-card-gradient-bi) !important;
}
#u-preview-bigender:target ~ .portrait {
    background-image: var(--v-id-card-gradient-bigender) !important;
}
#u-preview-demiboy:target ~ .portrait {
    background-image: var(--v-id-card-gradient-demiboy) !important;
}
#u-preview-demigender:target ~ .portrait {
    background-image: var(--v-id-card-gradient-demigender) !important;
}
#u-preview-demigirl:target ~ .portrait {
    background-image: var(--v-id-card-gradient-demigirl) !important;
}
#u-preview-enbian:target ~ .portrait {
    background-image: var(--v-id-card-gradient-enbian) !important;
}
#u-preview-gaymen:target ~ .portrait {
    background-image: var(--v-id-card-gradient-gaymen) !important;
}
#u-preview-genderfluid:target ~ .portrait {
    background-image: var(--v-id-card-gradient-genderfluid) !important;
}
#u-preview-genderflux:target ~ .portrait {
    background-image: var(--v-id-card-gradient-genderflux) !important;
}
#u-preview-genderqueer:target ~ .portrait {
    background-image: var(--v-id-card-gradient-genderqueer) !important;
}
#u-preview-lesbian:target ~ .portrait {
    background-image: var(--v-id-card-gradient-lesbian) !important;
}
#u-preview-nb:target ~ .portrait {
    background-image: var(--v-id-card-gradient-nb) !important;
}
#u-preview-neutrois:target ~ .portrait {
    background-image: var(--v-id-card-gradient-neutrois) !important;
}
#u-preview-omni:target ~ .portrait {
    background-image: var(--v-id-card-gradient-omni) !important;
}
#u-preview-pan:target ~ .portrait {
    background-image: var(--v-id-card-gradient-pan) !important;
}
#u-preview-pangender:target ~ .portrait {
    background-image: var(--v-id-card-gradient-pangender) !important;
}
#u-preview-poly:target ~ .portrait {
    background-image: var(--v-id-card-gradient-poly) !important;
}
#u-preview-qpr:target ~ .portrait {
    background-image: var(--v-id-card-gradient-qpr) !important;
}
#u-preview-trans:target ~ .portrait {
    background-image: var(--v-id-card-gradient-trans) !important;
}
[[/module]]

[[/iftags]]
[[div_ class="id-card-vertical"]]

[[div_ class="level"]]
[[div_ class="level-bar-container level-{$level}"]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[div_ class="level-bar"]]
[[/div]]
[[/div]]

[[div_ class="level-name"]]
{$class}-{$level}
[[/div]]

[[/div]]

[[div_ class="portrait" style="background-color: {$portrait-bg-color}; background-image: var(--v-id-card-gradient-{$portrait-gradient});"]]
[[image {$portrait}]]
[[/div]]

[[div_ class="data"]]
[[div_ class="barcode-wrap"]]
[[div_ class="barcode"]]
*{$number}*
[[/div]]
[[div_ class="barcode-num"]]
{$number}
[[/div]]
[[/div]]
[[div_ class="issue-exp"]]
[[span class="issue-exp-title"]]ISSUE-EXP[[/span]]
[[span class="issue-exp-content"]]{$issue}[[/span]]
[[span class="issue-exp-content"]]{$exp}[[/span]]
[[/div]]
[[/div]]

[[div_ class="info"]]

[[div_ class="fullname"]]
[[span class="info-title"]]FULL NAME[[/span]]
[[span class="info-content" style="white-space: nowr{$name-nowrap}p;"]]{$name}[[/span]]
[[/div]]

[[div_ class="department"]]
[[span class="info-title"]]DEPARTMENT[[/span]]
[[span class="info-content" style="white-space: nowr{$dept-nowrap}p;"]]{$department}[[/span]]
[[/div]]

[[div_ class="position"]]
[[span class="info-title"]]POSITION[[/span]]
[[span class="info-content" style="white-space: nowr{$position-nowrap}p;"]]{$position}[[/span]]
[[/div]]

[[div_ class="facility"]]
[[span class="info-title"]]FACILITY[[/span]]
[[span class="info-content" style="white-space: nowr{$facility-nowrap}p;"]]{$facility}[[/span]]
[[/div]]

[[/div]]
[[/div]]

Vertical ID Card

Module Styles

Inline Styles

Includes

CSS Classes

Page Source