code: LIMITED 5 STAR - a simple, mobile compatible biosheet code

[10billionghosts]

Wanted a straightforward biosheet code that took design inspiration from Honkai: Star Rail for my own purposes. I have also provided an alternate design that is more genericized while still keeping the general feel of the code intact. Fun fact, this code is a fairly lightly modified version of my meme code.

Check below for a live preview of both versions, and please enjoy!

HSR-FLAVORED CODE HERE:
<lj-raw><div style="max-width:700px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:15px;font-family:verdana, sans serif;font-size:13px;line-height:1.6;font-size:12px;"> <!-- HEADER --> <div style="width:100%;min-height:255px;display:grid;grid-template-columns:1fr;grid-template-rows:235px 15px 1fr;"> <!-- [HEADER IMAGE HERE, UPDATE IMG_URL] --> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:3;border-radius:0 15px 0 0;border-bottom:5px solid #f1bb4b;background:#ccc url('IMG_URL')center;background-size:cover;"></div> <!-- [HEADER TEXT HERE] --> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:4;padding:0 3%;font-size:28px;line-height:1;font-weight:bold;text-align:right;text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff, 1px 1px 1px rgba(151,152,157,0), -2px -2px 2px rgba(255,255,255,.1), 2px 2px 2px rgba(0,0,0,.5);color:#f1bb4b"> ✦✦✦✦✦ CHARACTERNAME </div> </div> <!-- HEADER; end --> <!-- STATS --> <div style="width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:15px;font-size:13px;"> <!-- stat block items below this point --> <div style="flex-grow:1;min-width:175px;height:12px;padding:0 5px;display:grid;grid-template-columns:auto auto;align-items:space-between;background:#e2e2e8;"><b style="line-height:.1;color:#515055">NAME:</b> <i style="text-align:right;line-height:.1;">answer</i></div> <div style="flex-grow:1;min-width:175px;height:12px;padding:0 5px;display:grid;grid-template-columns:auto auto;align-items:space-between;background:#e2e2e8;"><b style="line-height:.1;color:#515055">CANON:</b> <i style="text-align:right;line-height:.1;">answer</i></div> <div style="flex-grow:1;min-width:175px;height:12px;padding:0 5px;display:grid;grid-template-columns:auto auto;align-items:space-between;background:#e2e2e8;"><b style="line-height:.1;color:#515055">CANON POINT:</b> <i style="text-align:right;line-height:.1;font-size:clamp(9px, 2vw, 13px)">answer</i></div> <div style="flex-grow:1;min-width:175px;height:12px;padding:0 5px;display:grid;grid-template-columns:auto auto;align-items:space-between;background:#e2e2e8;"><b style="line-height:.1;color:#515055">AGE:</b> <i style="text-align:right;line-height:.1;">answer</i></div> <!-- stat block items above this point --> </div> <!-- STATS; end --> <!-- PERSONALITY --> <div style="width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:15px;font-size:12px;"> <!--subheader--> <div style="width:100%;padding:0;display:flex;gap:10px;background:rgba(107, 108, 118, .5);color:#000;font-size:15px;"><img src="https://64.media.tumblr.com/a6b9a98b20ecf19f6c45326d2d44fa56/bb46ee971e8bb02d-b1/s75x75_c1/6e7f4e85677ba1aced08322d761c7f96f6750627.png"> <b>Personality</b></div> <div style="box-sizing:border-box;width:100%;padding:5px;text-align:justify;"> </lj-raw>!! your content here !!<lj-raw> </div> </div> <!-- PERSONALITY; end --> <!-- HISTORY --> <div style="width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:15px;font-size:12px;"> <!--subheader--> <div style="width:100%;padding:0;display:flex;gap:10px;background:rgba(107, 108, 118, .5);color:#000;font-size:15px;"><img src="https://64.media.tumblr.com/a6b9a98b20ecf19f6c45326d2d44fa56/bb46ee971e8bb02d-b1/s75x75_c1/6e7f4e85677ba1aced08322d761c7f96f6750627.png"> <b>History</b></div> <div style="box-sizing:border-box;width:100%;padding:5px;text-align:justify;"> </lj-raw>!! your content here !!<lj-raw> </div> </div> <!-- HISTORY; end --> <!-- ABILITIES --> <div style="width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:15px;font-size:12px;"> <!--subheader--> <div style="width:100%;padding:0;display:flex;gap:10px;background:rgba(107, 108, 118, .5);color:#000;font-size:15px;"><img src="https://64.media.tumblr.com/a6b9a98b20ecf19f6c45326d2d44fa56/bb46ee971e8bb02d-b1/s75x75_c1/6e7f4e85677ba1aced08322d761c7f96f6750627.png"> <b>Abilities</b></div> <div style="box-sizing:border-box;width:100%;padding:5px;text-align:justify;"> <!-- abilities below this line --> <b>Ability Name #01</b> <blockquote style="padding:5px 10px;border:0;border-left:4px solid #f1bb4b;background:linear-gradient(90deg,rgba(241, 187, 75, 0.5) 0%, rgba(255, 255, 255, 0) 40%);"></lj-raw>!! your content here !!<lj-raw></blockquote> <b>Ability Name #02</b> <blockquote style="padding:5px 10px;border:0;border-left:4px solid #f1bb4b;background:linear-gradient(90deg,rgba(241, 187, 75, 0.5) 0%, rgba(255, 255, 255, 0) 40%);"></lj-raw>!! your content here !!<lj-raw></blockquote> <!-- abilities above this line --> </div> </div> <!-- ABILITIES; end --> <!-- CREDIT --> <div style="width:100%;padding:5px 0;text-align:right;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div> <!-- CREDIT; end --> </div></lj-raw>

GENERICIZED BIOSHEET CODE HERE:
<lj-raw><div style="max-width:700px;width:100%;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:15px;font-family:verdana, sans serif;font-size:13px;line-height:1.6;font-size:12px;"> <!-- HEADER --> <div style="width:100%;min-height:255px;display:grid;grid-template-columns:1fr;grid-template-rows:235px 15px 1fr;"> <!-- [HEADER IMAGE HERE, UPDATE IMG_URL] --> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:1;grid-row-end:3;border-radius:5px 5px 0 0;border-bottom:3px solid #f1bb4b;background:#ccc url('IMG_URL')center;background-size:cover;"></div> <!-- [HEADER TEXT HERE] --> <div style="grid-column-start:1;grid-column-end:2;grid-row-start:2;grid-row-end:4;padding:0 3%;font-size:28px;line-height:1;font-weight:bold;text-align:right;text-shadow: 1px 1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, -1px -1px 0 #fff, 1px 0px 0 #fff, 0px 1px 0 #fff, -1px 0px 0 #fff, 0px -1px 0 #fff, 1px 1px 1px rgba(151,152,157,0), -2px -2px 2px rgba(255,255,255,.1), 2px 2px 2px rgba(0,0,0,.5);color:#f1bb4b"> CHARACTERNAME </div> </div> <!-- HEADER; end --> <!-- STATS --> <div style="width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:15px;font-size:13px;"> <!-- stat block items below this point --> <div style="flex-grow:1;min-width:175px;height:12px;padding:0 5px;display:grid;grid-template-columns:auto auto;align-items:space-between;background:#e2e2e8;"><b style="line-height:.1;color:#515055">NAME:</b> <i style="text-align:right;line-height:.1;">answer</i></div> <div style="flex-grow:1;min-width:175px;height:12px;padding:0 5px;display:grid;grid-template-columns:auto auto;align-items:space-between;background:#e2e2e8;"><b style="line-height:.1;color:#515055">CANON:</b> <i style="text-align:right;line-height:.1;">answer</i></div> <div style="flex-grow:1;min-width:175px;height:12px;padding:0 5px;display:grid;grid-template-columns:auto auto;align-items:space-between;background:#e2e2e8;"><b style="line-height:.1;color:#515055">CANON POINT:</b> <i style="text-align:right;line-height:.1;font-size:clamp(9px, 2vw, 13px)">answer</i></div> <div style="flex-grow:1;min-width:175px;height:12px;padding:0 5px;display:grid;grid-template-columns:auto auto;align-items:space-between;background:#e2e2e8;"><b style="line-height:.1;color:#515055">AGE:</b> <i style="text-align:right;line-height:.1;">answer</i></div> <!-- stat block items above this point --> </div> <!-- STATS; end --> <!-- PERSONALITY --> <div style="width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:15px;font-size:12px;"> <!--subheader--> <div style="width:100%;padding:0;display:flex;gap:10px;background:rgba(107, 108, 118, .5);color:#000;font-size:15px;"><div style="width:24px;height:24px;display:flex;justify-content:center;align-items:center;font-size:18px;background:#f1bb4b;color:#000">♜</div> <b>Personality</b></div> <div style="box-sizing:border-box;width:100%;padding:5px;text-align:justify;"> </lj-raw>!! your content here !!<lj-raw> </div> </div> <!-- PERSONALITY; end --> <!-- HISTORY --> <div style="width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:15px;font-size:12px;"> <!--subheader--> <div style="width:100%;padding:0;display:flex;gap:10px;background:rgba(107, 108, 118, .5);color:#000;font-size:15px;"><div style="width:24px;height:24px;display:flex;justify-content:center;align-items:center;font-size:18px;background:#f1bb4b;color:#000">♜</div> <b>History</b></div> <div style="box-sizing:border-box;width:100%;padding:5px;text-align:justify;"> </lj-raw>!! your content here !!<lj-raw> </div> </div> <!-- HISTORY; end --> <!-- ABILITIES --> <div style="width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:15px;font-size:12px;"> <!--subheader--> <div style="width:100%;padding:0;display:flex;gap:10px;background:rgba(107, 108, 118, .5);color:#000;font-size:15px;"><div style="width:24px;height:24px;display:flex;justify-content:center;align-items:center;font-size:18px;background:#f1bb4b;color:#000">♜</div> <b>Abilities</b></div> <div style="box-sizing:border-box;width:100%;padding:5px;text-align:justify;"> <!-- abilities below this line --> <b>Ability Name #01</b> <blockquote style="padding:5px 10px;border:0;border-left:4px solid #f1bb4b;background:linear-gradient(90deg,rgba(241, 187, 75, 0.5) 0%, rgba(255, 255, 255, 0) 40%);"></lj-raw>!! your content here !!<lj-raw></blockquote> <b>Ability Name #02</b> <blockquote style="padding:5px 10px;border:0;border-left:4px solid #f1bb4b;background:linear-gradient(90deg,rgba(241, 187, 75, 0.5) 0%, rgba(255, 255, 255, 0) 40%);"></lj-raw>!! your content here !!<lj-raw></blockquote> <!-- abilities above this line --> </div> </div> <!-- ABILITIES; end --> <!-- CREDIT --> <div style="width:100%;padding:5px 0;text-align:right;font-size:10px;"><a title="code credit!" href="http://10billionghosts.dreamwidth.org" style="text-decoration:none;color:#ddd;">code</a></div> <!-- CREDIT; end --> </div></lj-raw>

HOW TO USE:

❣️ This code is mobile compatible!

❣️ The only differences between the HSR version of the code and the Generic version of the code are adjustments to the rounded corners & border on the header image and some changes to the subheaders.

❣️ Mind the LJ-raw tags.

❣️ All sections are fully optional and can be removed or moved around in the code as you'd like.

❣️ This code will always shrink to fit mobile displays without a horizontal scroll, but if you want something that appears narrower on wider display screens, you can adjust you can adjust the max-width:700px value at the very top of the code. For reference, my biosheet codes are usually set to a width of like 500 to 650px. This was just a personal use code, so I made it a little wider to begin with for my own purposes.

❣️ Be sure to change the one instance of IMG_URL to an appropriate header image. Also, be on the watch for placeholder text to fill in.

❣️ The stat subsection just below the header is very minimally pre-populated. You can add additional items by copying the line code and pasting where indicated. These items will automatically stack, filtering to about 3 items across at most.

❣️ (UPDATE 10/16/25) The "Canon Point" stat item, and ONLY the canon point stat item, has a line of code that will shrink the font size automatically to better fit mobile displays. All other stat line items function as normal.

❣️ COLOR CUSTOMIZATION:

• hex code #f1bb4b is a golden yellow color and is used multiple times throughout the code. Be sure to find-replace this if you wish to change it.


• rgba(241, 187, 75, 0.5) is the same golden yellow color mentioned above, but rendered in rgba so that it can be set to 50% opacity. It's only found in the Abilities section, on each ability quoteblock.


• hex code #e2e2e8 is a light gray used in the stats section for the background behind each stat item.


• hex code #515055 is a dark gray used in the stats section for each stat item.


• A basic font color is otherwise not declared on this code so that it is still legible on dark mode devices.

❣️ In the HSR version of the code, the subheaders use an image from the Honkai: Star Rail UI. It's linked via tumblr. Feel free to change that.

❣️ The generic version of the code uses just divs for the subheader, so you can add whatever (text or emoji) symbol you want into the subheaders. By default, it comes loaded with a little chess piece symbol.

❣️ This code comes with a credit by default. Appreciate it if you leave it in!

❣️ I love peeking at what people do with my codes, so feel free to comment if you use! If you're feeling generous, you can also donate to my ko-fi -- it's always greatly appreciated!

✦✦✦✦✦ AVENTURINE

NAME: Kakavasha

ALIAS: Aventurine

CANON: Honkai: Star Rail

CANON POINT: any, post-Penacony default

AGE: Mid-20 to Early-30s

Personality

Cupcake ipsum dolor sit amet. Chupa chups jelly beans cupcake donut sweet. Dessert lollipop wafer marshmallow dragée gummies donut. Croissant soufflé liquorice jelly caramels lollipop marzipan.

Cake pudding cheesecake gummies marshmallow danish. Jelly-o bonbon oat cake chupa chups marzipan donut cake sweet roll donut. Croissant danish lemon drops icing bonbon sesame snaps tootsie roll.

Chocolate cake pastry pudding tootsie roll tootsie roll marzipan shortbread. Danish marzipan soufflé oat cake sweet roll powder bear claw. Caramels wafer sugar plum donut pastry fruitcake carrot cake pastry ice cream.

Backstory

Cupcake ipsum dolor sit amet. Brownie caramels cheesecake ice cream fruitcake lollipop cookie gummi bears tootsie roll. Shortbread apple pie apple pie carrot cake tart muffin dragée lollipop. Gingerbread marshmallow tootsie roll bear claw icing gummi bears jelly-o.

Chocolate bar cookie gummi bears jelly-o lollipop cotton candy. Dragée carrot cake shortbread cotton candy wafer chocolate cake. Chocolate liquorice marzipan dragée sweet roll chocolate bar gummies chupa chups lemon drops. Dessert chocolate bar biscuit tart cotton candy halvah powder marzipan carrot cake.

Sesame snaps shortbread dragée apple pie cupcake. Topping dessert donut carrot cake brownie sweet tiramisu jelly-o. Pudding chocolate cupcake cookie liquorice. Dragée carrot cake marshmallow donut pastry brownie.

Abilities

Ability Name #01

test test test test test

Ability Name #02

test test test test test

CHARACTERNAME

NAME: answer

CANON: answer

CANON POINT: answer

AGE: answer

♜

Personality

!! your content here !!

♜

History

!! your content here !!

♜

Abilities

Ability Name #01

!! your content here !!

Ability Name #02

!! your content here !!

code

Comments

(frozen comment) CUSTOM APPEARANCE SECTION (HSR FLAVOR)

[10billionghosts]

PREVIEW:


---

Slot this styled appearance subsection in wherever you'd like in the code!

<!-- APPEARANCE --> <div style="width:100%;display:flex;flex-wrap:wrap;justify-content:center;align-items:start;align-content:start;gap:15px;font-size:12px;"> <!--subheader--> <div style="width:100%;padding:0;display:flex;gap:10px;background:rgba(107, 108, 118, .5);color:#000;font-size:15px;"><img src="https://64.media.tumblr.com/a6b9a98b20ecf19f6c45326d2d44fa56/bb46ee971e8bb02d-b1/s75x75_c1/6e7f4e85677ba1aced08322d761c7f96f6750627.png"> <b>Appearance</b></div> <div style="box-sizing:border-box;width:100%;padding:5px;text-align:justify;"> <div style="width:200px;height:250px;margin:0 20px 0 0;border-radius:0 15px 0 0;border-bottom:5px solid #f1bb4b;background:#ccc url(IMG_URL)center;background-size:cover;float:left;"></div> <div style="width:max-content;padding:5px 10px;margin:0 0 10px 0;display:grid;border-left:4px solid #f1bb4b;background:linear-gradient(90deg,rgba(241, 187, 75, 0.5) 0%, rgba(255, 255, 255, 0) 50%);f"><div></lj-raw><b>height</b> 5'7 <b>build</b> slender <b>hair</b> sandy blonde, messy short mullet. <b>eyes</b> a striking pink gradient with a pale blue-rimmed pupil<lj-raw></div></div> <div style="height:12px;width:max-content;padding:0 5px;display:grid;grid-template-columns:auto auto;align-items:space-between;background:#e2e2e8;"><b style="line-height:.1;color:#515055">FIRST IMPRESSION:</b></div> </lj-raw>text<lj-raw><br/><br/> <div style="height:12px;width:max-content;padding:0 5px;display:grid;grid-template-columns:auto auto;align-items:space-between;background:#e2e2e8;"><b style="line-height:.1;color:#515055">VOICE:</b></div> </lj-raw>text<lj-raw><br/><br/> <div style="height:12px;width:max-content;padding:0 5px;display:grid;grid-template-columns:auto auto;align-items:space-between;background:#e2e2e8;"><b style="line-height:.1;color:#515055">FEATURES:</b></div> </lj-raw>text<lj-raw> </div> </div> <!-- APPEARANCE; end -->

[80sanime]

Thank you for this! I keep picking up gacha muses right and left so this is going to be super helpful lmao

[10billionghosts]

Always happy to encourage it!

[oflotuspier]

I'm trying to use this, but DW says there are 3 unclosed div tags on both the HSR-flavored and genericized versions.

[10billionghosts]

Oop! You're right! Weird. I'm guessing I must've used a draft version of the code by mistake.

Added the 3 missing div tags where they belong and some additional indentation to make things clearer. Thank you for the catch!

[oflotuspier]

Thank you, for all your codes and for fixing this so quickly!

[lestattitude]

I stole this and did some tweaking to make it match my journal aesthetic. Thank you ~♥

[10billionghosts]

Love it with the neon green! Also great username lmao

[lestattitude]

The layout code I used had a bunch of different neon color types and I think all of them would go well with your code. And thank you :) I agonized over the right name for him. This suited. ♥