To embed PKfronters in your own site, granting you full control over the CSS, all you need is two lines of HTML!
Copy and paste the code below, and change exmpl to your PluralKit system ID.
<div data-pkfronters-system="exmpl" data-pkfronters-type="card"></div>
<script src="https://irys.cc/fronters/pkfronters.js"></script>
PKfronters supports two display types: list and card. Which one is used is controlled with the data-pkfronters-type attribute on the embed code.
The card display mode is the one used on the main PKfronters site: it displays your current fronters' avatars, as well as their names and pronouns.
The list display mode renders a list (as an HTML <ul> element) of your current fronters' names and pronouns.
There are some options that can be enabled by adding their names, separated by commas, to the data-pkfronters-options attribute on the embed code. Options can also be explicitly disabled by prefixing their name with an exclamation point (!).
The available options are:
dn or displayname (default: off)
—
Use member display names, instead of their actual member names
cbo or card_border_outer (default: off)
—
For the card display mode: apply the member color to the border of the whole card, rather than the avatar image
ip or image_proxy (default: on)
—
Enables using The Iris System's PluralKit avatar rescaler for member avatar images. Using the avatar rescaler proxy service ensures that avatars always render with correct proportions, and decreases loading times (particularly on slow internet connections, or for large avatar images). Disabling this option will use the avatar URL direct from PluralKit.
prns or pronouns (default: on)
—
Shows each member's pronouns (the pk;m <name> pronouns field) underneath their avatar.
For example, to embed a list of member display names, with member pronouns hidden, you could use:
<div data-pkfronters-system="exmpl" data-pkfronters-type="list" data-pkfronters-options="dn,!prns"></div>
Take a look at pkfronters.css - this is the base CSS used in the main PKfronters site, and should give you a good starting point to work from :)
Feel free to ask in the #community-resources-help channel of the PluralKit support Discord server!