By Phosphor and Lark
Last updated: 12/10/2025
We've had a few people compliment us on our roster page, so we thought we'd clean up the code a bit and share it in case anyone wants to make their own. You can use this for your system, for your OCs, or for anything else you can think of. Go nuts! Credit is not needed, but it's recommended in case someone else wants to make their own.
You will need a website that's capable of displaying HTML and CSS - drag-and-drop website builders like Caard and Strawpage won't work, sorry. (We recommend Neocities or Nekoweb.) It's best if you have a little understanding of how HTML and CSS work. If you've used HTML/CSS templates before, then that should be enough!
(Side note for anyone who has Javascript disabled: You'll need to enable Javascript in order for the code to display correctly. We're using a locally hosted copy of Prism to render the code blocks. Alternatively, you can download the raw HTML and CSS files.)
You'll want to copy and edit the following HTML to have the pictures and text that you want, and then paste it into the body of your page. (A copy button should appear if you hover over the code!)
You'll then want to grab the following CSS in its entirety...
/* Hides the default arrow on the details component */
.bio-container > summary {
list-style: none;
}
.bio-container > summary::-webkit-details-marker {
display: none;
}
/* Limits the width of the bio to prevent the bio stretching weirdly */
.roster-container {
max-width: 1200px;
}
/* Containing grid for the pfp and info fields */
.bio-header {
display: grid;
grid-template-columns: 150px 1fr;
grid-gap: 20px;
margin-bottom: 10px;
font-size: 1.3rem;
pointer-events: none;
}
@media (max-width: 30rem) {
.bio-header {
grid-template-columns: 1fr;
grid-template-rows: 150px 1fr;
grid-gap: 0;
}
}
/* Styling the pfp and its container */
.bio-header-left {
display: flex;
flex-direction: row;
align-items: center;
}
.bio-pic-small {
height: 130px;
width: 130px;
border-radius: 50%;
border-style: solid;
cursor: pointer;
pointer-events: auto;
}
/* Styling the container for the text fields */
.bio-header-right {
margin-top: 20px;
display: grid;
grid-template-rows: auto 1fr;
grid-gap: 1rem;
}
@media (max-width: 30rem) {
.bio-header-right {
margin-top: 0;
}
}
/* Container for name, tag, pronouns, and link */
.bio-header-right-top {
grid-row: 1;
display: grid;
grid-template-columns: 15rem 9rem minmax(10rem,1fr) 5rem; /* You can adjust this to adjust the lengths of each field in the header */
grid-gap: 1rem;
vertical-align: middle;
}
@media (max-width: 62rem) {
.bio-header-right-top {
grid-template-columns: minmax(12rem,1fr) 5rem;
grid-template-rows: 1fr 1fr
}
}
@media (max-width: 37rem) {
.bio-header-right-top {
grid-template-columns: 12rem;
grid-template-rows: repeat(4, 1fr);
}
}
@media (max-width: 30rem) {
.bio-header-right-top {
margin-top: 10px;
grid-template-columns: minmax(10rem,1fr) 5rem;
grid-template-rows: 1fr 1fr;
}
}
/* The actual text for the basic info */
.bio-name {
display: flex;
align-items: center;
margin-top: 0;
margin-bottom: 0;
font-size: 2rem;
font-weight: bold;
}
.bio-other {
display: flex;
align-items: center;
margin-top: 0;
margin-bottom: 0;
}
.bio-link {
pointer-events: auto;
}
/* Styling the short bio below the name/pronouns/tag/link */
.bio-header-right-bottom {
grid-row: 2;
}
.short-bio {
margin: auto;
text-align: center;
font-style: italic;
}
/* The bigger bio that appears when you expand the small one */
.bio-body {
display: grid;
grid-template-columns: 1.5fr 2fr;
grid-gap: 20px;
}
.bio-body-right {
font-size: 1.1rem;
}
.bio-quote {
font-style: italic;
}
.bio-pic-full {
max-width: 100%;
height: auto;
}
@media (max-width: 50rem) {
.bio-body {
grid-template-columns: 1fr;
grid-template-rows: fit-content() 1fr;
text-align: center;
grid-gap: 0;
}
.bio-pic-full {
max-height: 300px;
margin: auto;
}
}
...and drop the file into the folder with your HTML page, and then add a link to it in the head of your HTML page so that it knows to grab it.
Here's an example of the bio code put in an HTML page.
You can view the demo here, and you can resize your browser window to see how it'll look at different screen sizes. You may notice that the page is extremely plain: black text on white, no fancy font, and so on. That stuff, we wanted to leave open to you to style. You'll also notice that on bigger screens, the bio is only so wide. That's because of a limitation of our code - we had to force it to be 1200 pixels across max or else it starts getting distorted, and we didn't feel like reworking the logic to handle bigger areas. Maybe another day.
Enjoy!