> ## Documentation Index
> Fetch the complete documentation index at: https://help.biolovers.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Card layout

> The shape of your profile card — structure preset, hero alignment, card width, page chrome, and the card panel fill (solid / glass / transparent).

<Note>
  Page on the dashboard: <a href="https://dashboard.biolovers.site/dashboard/edit/look/card-layout" target="_blank" rel="noopener">dashboard.biolovers.site/dashboard/edit/look/card-layout</a>
</Note>

This panel sets the **overall shape** of your profile card — the structure preset, where the avatar / name sit, how wide the card is, and the card's fill style.

<Frame caption="Card layout panel.">
  <img src="https://mintcdn.com/biolovers/yfEUd9O4Jc0vVWm-/images/dashboard/look-card-default.png?fit=max&auto=format&n=yfEUd9O4Jc0vVWm-&q=85&s=f96c0733ecb5afd801e882b0a672c353" alt="Card layout panel" width="1440" height="900" data-path="images/dashboard/look-card-default.png" />
</Frame>

<Tip>
  **Free can use almost everything here.** The only Premium-gated controls on this panel are the **Transparent** card panel option and the **custom backdrop blur** slider.
</Tip>

## Structure layout

Tap one of the four preset cards. Each preset is a complete starting point.

| Preset         | Vibe                     |
| -------------- | ------------------------ |
| **Default**    | Balanced — site default. |
| **Modern**     | Looser, breathy spacing. |
| **Simplistic** | Minimal, link-focused.   |
| **Sleek**      | Tight, premium feel.     |

Picking a preset doesn't lock anything — you can override the individual controls below.

### Side-by-side: the four presets on the showcase profile

<Frame caption="Default (showcase profile, no other changes).">
  <img src="https://mintcdn.com/biolovers/yfEUd9O4Jc0vVWm-/images/comparisons/card-layout/default.png?fit=max&auto=format&n=yfEUd9O4Jc0vVWm-&q=85&s=cf2fc186cc30b0600f7ff7ac6dae9510" alt="Default preset" width="1440" height="900" data-path="images/comparisons/card-layout/default.png" />
</Frame>

<Frame caption="Modern.">
  <img src="https://mintcdn.com/biolovers/yfEUd9O4Jc0vVWm-/images/comparisons/card-layout/modern.png?fit=max&auto=format&n=yfEUd9O4Jc0vVWm-&q=85&s=7611837e12dec9ee8e406a589bb9c4a6" alt="Modern preset" width="1440" height="900" data-path="images/comparisons/card-layout/modern.png" />
</Frame>

<Frame caption="Simplistic.">
  <img src="https://mintcdn.com/biolovers/yfEUd9O4Jc0vVWm-/images/comparisons/card-layout/simplistic.png?fit=max&auto=format&n=yfEUd9O4Jc0vVWm-&q=85&s=a33202e96e1faf807b41686c9b754b8a" alt="Simplistic preset" width="1440" height="900" data-path="images/comparisons/card-layout/simplistic.png" />
</Frame>

<Frame caption="Sleek.">
  <img src="https://mintcdn.com/biolovers/yfEUd9O4Jc0vVWm-/images/comparisons/card-layout/sleek.png?fit=max&auto=format&n=yfEUd9O4Jc0vVWm-&q=85&s=5b5c904951702218b47b960417f85ca0" alt="Sleek preset" width="1440" height="900" data-path="images/comparisons/card-layout/sleek.png" />
</Frame>

## Name & avatar (vertical)

Three options for how the hero (avatar + name) sits inside the card:

| Option               | What it does                                         |
| -------------------- | ---------------------------------------------------- |
| **Site default**     | Tighter top, link-in-bio style.                      |
| **Legacy**           | Original spacing from the early version of the site. |
| **More space above** | Centered hero with extra breathing room.             |

## Card width

Four discrete sizes — **not** a slider:

| Width                            | What it does                                  |
| -------------------------------- | --------------------------------------------- |
| **Comfortable** *(site default)* | The standard card width.                      |
| **Compact**                      | Narrower card, tighter line lengths.          |
| **Wide**                         | More breathing room, looser column.           |
| **Full**                         | Edge-to-edge — basically no card width limit. |

<Frame caption="Compact.">
  <img src="https://mintcdn.com/biolovers/yfEUd9O4Jc0vVWm-/images/comparisons/card-width/compact.png?fit=max&auto=format&n=yfEUd9O4Jc0vVWm-&q=85&s=58d1d15578c258ec0b4cd0cd9602cc39" alt="Compact card width" width="1440" height="900" data-path="images/comparisons/card-width/compact.png" />
</Frame>

<Frame caption="Comfortable (default).">
  <img src="https://mintcdn.com/biolovers/yfEUd9O4Jc0vVWm-/images/comparisons/card-width/comfortable.png?fit=max&auto=format&n=yfEUd9O4Jc0vVWm-&q=85&s=975a00ce197e56effaa606f7b6ead728" alt="Comfortable card width" width="1440" height="900" data-path="images/comparisons/card-width/comfortable.png" />
</Frame>

<Frame caption="Wide.">
  <img src="https://mintcdn.com/biolovers/yfEUd9O4Jc0vVWm-/images/comparisons/card-width/wide.png?fit=max&auto=format&n=yfEUd9O4Jc0vVWm-&q=85&s=53804d2e235001b88d305e4a78a64657" alt="Wide card width" width="1440" height="900" data-path="images/comparisons/card-width/wide.png" />
</Frame>

<Frame caption="Full.">
  <img src="https://mintcdn.com/biolovers/yfEUd9O4Jc0vVWm-/images/comparisons/card-width/full.png?fit=max&auto=format&n=yfEUd9O4Jc0vVWm-&q=85&s=be411e9199ef7a99f84f28d273a39e9c" alt="Full card width" width="1440" height="900" data-path="images/comparisons/card-width/full.png" />
</Frame>

## Profile chrome

Two looks for the page-level chrome around your card:

| Chrome      | What it does                                                                                               |
| ----------- | ---------------------------------------------------------------------------------------------------------- |
| **Default** | Card has its visible frame and chip borders.                                                               |
| **Clean**   | No card outline, no chip borders — text and badges sit straight on your background like a minimal overlay. |

## Card panel (the fill behind the card content)

| Option           | What it does                                                               | Notes             |
| ---------------- | -------------------------------------------------------------------------- | ----------------- |
| **Site default** | Glass with a subtle blur — works on any background.                        |                   |
| **Solid**        | Fully opaque panel — best for busy or photo backgrounds.                   |                   |
| **Glass**        | Frosted, semi-transparent. Same look as the default with no blur fallback. |                   |
| **Transparent**  | No panel fill — text and avatars float on the page background.             | **Premium-only.** |

<Frame caption="Solid card panel.">
  <img src="https://mintcdn.com/biolovers/yfEUd9O4Jc0vVWm-/images/comparisons/card-chrome/solid.png?fit=max&auto=format&n=yfEUd9O4Jc0vVWm-&q=85&s=1d3c25fa95f7569d23744bafc1c129a9" alt="Solid card panel" width="1440" height="900" data-path="images/comparisons/card-chrome/solid.png" />
</Frame>

<Frame caption="Glass card panel.">
  <img src="https://mintcdn.com/biolovers/yfEUd9O4Jc0vVWm-/images/comparisons/card-chrome/glass.png?fit=max&auto=format&n=yfEUd9O4Jc0vVWm-&q=85&s=4d8ae286d61d604fcf4f2029331979f2" alt="Glass card panel" width="1440" height="900" data-path="images/comparisons/card-chrome/glass.png" />
</Frame>

<Frame caption="Transparent card panel (Premium).">
  <img src="https://mintcdn.com/biolovers/yfEUd9O4Jc0vVWm-/images/comparisons/card-chrome/transparent.png?fit=max&auto=format&n=yfEUd9O4Jc0vVWm-&q=85&s=fd1b8cbcab219da496de96511f6fff20" alt="Transparent card panel" width="1440" height="900" data-path="images/comparisons/card-chrome/transparent.png" />
</Frame>

## Glass & blur (Premium)

This collapsible group has two opt-in sliders:

* **Custom backdrop blur** — checkbox to enable, then a slider from `0` to `40` px. Off uses the preset's default.
* **Custom panel opacity** — checkbox to enable, then a percentage slider for how much of the page background bleeds through.

Both are Premium-only.

## Where the accent color lives

Not on this panel. The **accent color** picker is on the [Name & about me](/profile/name-and-about) panel because it's tied to text / link styling.

## Where the page background lives

Not on this panel either. See [Page background](/media/page-background) for the image / video behind the card.

## Common questions

<AccordionGroup>
  <Accordion title="My card looks crowded">
    Switch the **Card width** to **Wide** or **Full**, or pick the **Modern** structure preset.
  </Accordion>

  <Accordion title="The blur is too much / too little">
    Open the **Glass & blur** group, tick **Custom backdrop blur**, and slide between 0 and 40 px. (Premium feature.)
  </Accordion>

  <Accordion title="I want my background to show through fully">
    Set **Card panel** to **Transparent** (Premium). Note that text legibility depends on the background — consider darkening the background or applying a [Text effect](/appearance/text-effects) outline.
  </Accordion>

  <Accordion title="Where do I change the page background itself?">
    Different panel — see [Page background](/media/page-background). Card layout is only the card frame.
  </Accordion>
</AccordionGroup>

## Related

<CardGroup cols={2}>
  <Card title="Page background" icon="image" href="/media/page-background">
    What's behind the card.
  </Card>

  <Card title="Text effects" icon="sparkles" href="/appearance/text-effects">
    Gradient, glow, outline (Premium).
  </Card>
</CardGroup>