竖版身份卡 组件（测试中）

已发布到EN版：英文

CN翻译版：中文i

EO翻译版：世界语

生成器：多语言

正在研究怎么把一个div的内容转成高清pdf然后打印

flex布局教程

grid布局教程

grid布局教程2

Overflow Debug

+ ❓❓❓
评分: +1+–x

Primarily inspired by EstrellaYoshteEstrellaYoshte's ID Card Component.

Examples

C-4
alexis-talcite.png
*4951855*
4951855
ISSUE-EXP
12/2018
12/2028
FULL NAME
Alexis Asriel Talcite
DEPARTMENT
IT & Memetics
POSITION
Research Lead
FACILITY
Area-CN-02
B-5
merry-dashmere.png
*001811*
001811
ISSUE-EXP
05/2009
05/2039
FULL NAME
Merry S. Dashmere
DEPARTMENT
Science Dept.
POSITION
HMCL Supervisor
FACILITY
Area-03
C-4
lillian-lillihammer.gif
*19990011*
19990011
ISSUE-EXP
01/1995
01/2035
FULL NAME
Lillian Shelby
Lillihammer
DEPARTMENT
Memetics &
Countermemetics
POSITION
Section Chair
FACILITY
Site-43
E-0
alex-thorley.png
*NaN*
NaN
ISSUE-EXP
Unknown
∞
FULL NAME
Alex Thorley
DEPARTMENT
Unreality
POSITION
[INSERT TEXT]
FACILITY
Site-0

(Portrait intentionally left blank.)

1

2

3

pride

phil

abro, agender, aroace, aromantic, asexual, bi, demiboy, demigirl, enbian, gaymen, genderfluid, genderqueer, lesbian, nb, pan, pangender, poly, qpr, trans. Might add more later.

Compare to pictures:

preview1-new.png

Old design

preview2.png

To use it, put the following code in any place in your article in a new line.

[[include :area-cn-02:component:v-id-card
|portrait= Photo URL
|portrait-bg-color= Optional. Accept color names, RGB or HEX values. Background color for the ID photo. Can be useful when your picture has a transparent background.
|portrait-gradient= Optional. 1, 2, 3 or other keywords. Background gradient for the ID photo. See below for a preview.
|name= Full Name. You can opt for disabling line breaks (see below for details), or make a new line if the word is broken at an undesired place. Same hereinafter.)
|department= Department
|position= Job Position
|facility= Facility of Service
|class= A, B, C, D or E
|level= 0-5, specify
|number= Serial Number
|issue= MM/YYYY Card issue time.
|exp= MM/YYYY Card expiry time.
]]

Gradient Presets

To use them, put the respective key in the |portrait-gradient= field.

Gradient 1

1

Gradient 2

2

Gradient 3

3

A dozen of pride flags are also available. Now it includes pride (basic 6-stripe) and phil (BIPOC inclusive), and of course more (in alphabetical order):

abro, agender, aroace, aromantic, asexual, bi, demiboy, demigirl, enbian, gaymen, genderfluid, genderqueer, lesbian, nb, pan, pangender, poly, qpr, trans. Might add more later.

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

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

Disable line breaks in…

Name field:

|name-nowrap= a

Department field:

|dept-nowrap= a

Position field:

|position-nowrap= a

Facility field:

|facility-nowrap= a

Variables

--v-id-card-width
--v-id-card-height
--v-id-card-radius
--v-id-card-padding

--v-id-card-logo
--v-id-card-logo-opacity

--v-id-card-bg-color
--v-id-card-text-color
--v-id-card-secondary-color
--v-id-card-level0-color
--v-id-card-level1-color
--v-id-card-level2-color
--v-id-card-level3-color
--v-id-card-level4-color
--v-id-card-level5-color

○ Show source code

Issues:

  • Print support. May add later.
  • Maybe a few more gradient presets.
  • Customizable logos for different cards. However Wikidot parsing issues won't omit null variables ({$var}), instead it keeps the raw form, and it will break everything if the field is left empty.
  • Make an option to confine the card's aspect ratio ($1:\sqrt{2}$ for A6 size cards). However, if the card's height is fixed, content will overflow.
  • Consider using scaleY to compress the barcode vertically to ensure that the full barcode can always be displayed, and hence scannable no matter how long the code is. Now if the barcode content is too long (> 7 digits), the overflow lower part will be cut. However, scaleY doesn't accept container query values such as cqh.
  • If both the original ID Card component and this one are included in the same page, class name conflicts may occur. Consider renaming the CSS classes. (Specify the parent class.)
  • Restructure the grid size and avoid using wrong variables so that the width and height of the portrait area won't be affected by other areas.
  • Automatically extend the card vertically, so that the name fields can wrap without collapsing onto the portrait area or overflowing out of the visible area (when the height of the card is fixed).
  • Portrait frame compatibility. I used a pseudo-element and set its border, then added a mask-image to it. The mask image is a combination of 2 linear-gradients that form a cross. The mask-composite property is intersect. (However, this isn't a baseline widely supported property. So consider changing the mask to an SVG.).
  • Level name & bars recoloring. Can copy from the original component (uses :nth-child).
  • Gradient presets for the portrait background. Maybe 1-3 types to allow the user to choose from.
{$class}-{$level}
{$portrait}
*{$number}*
{$number}
ISSUE-EXP
{$issue}
{$exp}
FULL NAME
{$name}
DEPARTMENT
{$department}
POSITION
{$position}
FACILITY
{$facility}
组件
页面版本: 123, 最后编辑于: 12 Sep 2025 23:49
编辑 评分 (+1) 标签 讨论 历史记录 附件 打印 网站工具 + 选项
除非特别注明，本页内容采用以下授权方式： Creative Commons Attribution-ShareAlike 3.0 License