Styling
Override LinkFox components with host classes, CSS variables, and part selectors.
Styling model
LinkFox Web Components do not need a custom className prop. Apply a class directly to the custom element, then style the exposed parts and CSS variables.
Example
<linkfox-widget
class="my-linkfox"
slug="game-father"
api-key="your-linkfox-api-key"
title="Recommended Sites"
></linkfox-widget>
<style>
.my-linkfox {
--lf-background: transparent;
--lf-border: transparent;
--lf-shell-padding: 0;
--lf-card-padding: 0;
--lf-gap: 8px;
}
.my-linkfox::part(shell) {
box-shadow: none;
}
.my-linkfox::part(title) {
font-size: 20px;
font-weight: 700;
}
</style>Available parts
shellheadertitlewidgetgridlistrowcardcard-topnavbarpillinlineinline-linkcopytextdescriptionlink
Available CSS variables
--lf-background--lf-text--lf-muted--lf-border--lf-radius--lf-card-radius--lf-pill-radius--lf-shell-padding--lf-card-padding--lf-gap