Give your portal a branded welcome section and a grid of clickable agent cards. Visitors can click anywhere on a card to open that agent, including its image, text, and empty space.
This uses your existing agents. You only need to paste one code block and choose which agents to display.
1. Add your agents
In your portal’s Content settings, use Add content to add the agents you want to feature, then click Save Portal.
The cards use your agents’ names, descriptions, and profile images. You can edit those in the agent builder.
2. Set up the homepage
Open or create a Default Page, then arrange these two sections in this order:
- Raw text (HTML)
- Agent listing
Keep both sections visible and turn Title off for both.
The Agent listing must sit immediately below the HTML section, with no other section between them.
3. Paste the code
Click the HTML section’s body in the preview to edit it. Replace its contents with the entire code block below, then click outside the editor to apply it.
<!-- BLOOM PORTAL HOME v1.1
Paste this entire block into a Default Page's HTML section.
Place an Agent Listing section immediately below it and select your agents there.
No JavaScript, API keys, agent IDs, or links required.
Change the words below and the colors in CUSTOMIZE. Keep class names unchanged.
-->
<div class="px-bloom-home">
<p class="px-bloom-brand">bloom.</p>
<h1>A little inspiration.<br>A lot of possibility.</h1>
<p class="px-bloom-intro">Your brand’s creative toolkit. Pick a tool and make something great.</p>
</div>
<style>
/* CUSTOMIZE: colors, corner size and the smallest card width.
These settings apply only to this HTML section and the next Agent Listing.
Works with the live portal and the Default Page editor preview. */
section:has(.px-bloom-home),
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) {
--bloom-surface: #f6f8f4;
--bloom-card: #ffffff;
--bloom-text: #20251e;
--bloom-muted: #60665c;
--bloom-accent: #59664a;
--bloom-border: #e8ece3;
--bloom-radius: 24px;
--bloom-card-min: 215px;
--bloom-font: Arial, Helvetica, sans-serif;
font-family: var(--bloom-font);
color: var(--bloom-text);
background: var(--bloom-surface);
padding-inline: clamp(20px, 3.2vw, 40px);
margin-inline: 16px;
box-sizing: border-box;
}
section:has(.px-bloom-home) {
margin-top: 112px;
padding-top: clamp(28px, 4vw, 44px);
padding-bottom: 32px;
border-radius: var(--bloom-radius) var(--bloom-radius) 0 0;
}
section:has(.px-bloom-home) > div,
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div {
max-width: 1200px;
margin-inline: auto;
width: 100%;
}
.px-bloom-home { width: 100%; text-align: start; }
.px-bloom-home .px-bloom-brand {
font-family: Georgia, 'Times New Roman', serif;
font-size: 42px;
font-weight: 400;
line-height: 1.1;
letter-spacing: -2px;
color: var(--bloom-accent);
margin: 0 0 24px;
}
.px-bloom-home h1 {
font-family: inherit;
font-size: clamp(30px, 3.2vw, 44px);
line-height: 1.16;
letter-spacing: -1.5px;
font-weight: 600;
margin: 0;
color: var(--bloom-text);
overflow-wrap: anywhere;
}
.px-bloom-home .px-bloom-intro {
max-width: 430px;
margin: 18px 0 0;
font-size: 16px;
line-height: 1.6;
font-weight: 400;
color: var(--bloom-muted);
}
/* Keep Pickaxe's native buttons, locks, data and pagination intact. */
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) {
padding-top: 0;
padding-bottom: 36px;
margin-bottom: 24px;
border-radius: 0 0 var(--bloom-radius) var(--bloom-radius);
container-type: inline-size;
}
/* Listing wrapper -> animated page -> animated card -> native agent row. */
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--bloom-card-min)), 1fr));
gap: 16px;
align-items: stretch;
}
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child > div {
min-width: 0;
height: 100%;
}
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child > div > div {
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
gap: 22px;
height: 100%;
min-height: 238px;
padding: 22px 18px 16px;
border: 1px solid var(--bloom-border);
border-radius: 18px;
background: var(--bloom-card);
box-shadow: 0 3px 16px rgb(28 40 22 / 2%);
box-sizing: border-box;
}
/* Icon, title and description. */
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child > div > div > div:first-child {
flex-direction: column;
flex-wrap: nowrap;
align-items: flex-start;
gap: 20px;
}
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child > div > div > div:first-child > span {
width: 46px;
height: 46px;
flex-shrink: 0;
border-radius: 14px;
background: #e6ebdf;
}
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child > div > div > div:first-child > div {
text-align: start;
align-items: flex-start;
min-width: 0;
width: 100%;
}
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child > div > div > div:first-child > div > p {
color: var(--bloom-text);
font-size: 16px;
font-weight: 600;
line-height: 1.4;
overflow-wrap: anywhere;
}
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child > div > div > div:first-child > div > div {
color: var(--bloom-muted);
font-size: 14px;
line-height: 1.6;
font-weight: 400;
display: block;
overflow: visible;
-webkit-line-clamp: unset;
overflow-wrap: anywhere;
}
/* Markdown has its own typography, so size its inner content as well. */
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) .pxe-prose,
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) .pxe-prose p {
font-family: var(--bloom-font);
font-size: 14px;
line-height: 1.6;
font-weight: 400;
color: var(--bloom-muted);
-webkit-line-clamp: unset;
}
/* Match the native desktop sidebar clearance; mobile remains an overlay. */
@media (min-width: 1280px) {
body:has(.glass-dynamic.fixed > .border-b) section:has(.px-bloom-home),
body:has(.glass-dynamic.fixed > .border-b) section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"] {
margin-left: 349px;
}
}
/* Native CTA remains a real button with its existing label and click handler. */
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child > div > div > div:last-child {
width: 100%;
}
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child > div > div > div:last-child > button {
justify-content: flex-start;
width: 100%;
height: auto;
min-height: 44px;
padding: 10px 0;
border: 0;
border-radius: 8px;
background: transparent !important;
color: var(--bloom-accent) !important;
font-size: 14px;
font-weight: 500;
text-align: start;
}
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) button:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) button:focus-visible {
outline: 2px solid var(--bloom-accent);
outline-offset: 4px;
}
/* Stretch the native button's hit area across its card, without JavaScript.
Navigation, lock prompts, loading/disabled behavior and keyboard activation
still belong to the same native button. */
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child > div > div {
position: relative;
isolation: isolate;
}
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child > div > div > div:last-child > button {
position: static;
}
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child > div > div > div:last-child > button::after {
content: "";
position: absolute;
inset: 0;
z-index: 1;
border-radius: 18px;
cursor: pointer;
}
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child > div > div > div:last-child > button:focus-visible {
outline: none;
box-shadow: none;
}
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) > div > div > div:first-child > div > div > div:last-child > button:focus-visible::after {
outline: 2px solid var(--bloom-accent);
outline-offset: 4px;
}
@media (max-width: 600px) {
section:has(.px-bloom-home),
:is(section:has(.px-bloom-home) + [data-page-section="pickaxe-listing"], [data-section-id]:has(.px-bloom-home) + [data-section-id] > .section-pickaxe-listing) { margin-inline: 8px; }
.px-bloom-home .px-bloom-brand { font-size: 36px; }
}
</style>
4. Choose your agents and save
In the Agent listing section, select your portal and check the agents you want to display.
For the clean layout shown in the example, hide any unwanted starter sections, such as Hero, Markdown, Product listing, or Footer, using their Visibility controls.
Click Save Page.
Then return to your portal’s Content settings, add this page, and click its house icon to make it the homepage. Click Save Portal.
Make it your own
You can change these parts without editing the rest of the code:
- Brand: replace
bloom.near the top. - Headline: replace “A little inspiration.” and “A lot of possibility.”
- Introduction: replace the sentence below the headline.
- Colors: edit the color values under
CUSTOMIZE. - Card content: update your agents’ names, descriptions, and profile images in the agent builder.
- Card order: reorder the agents in your portal’s Content settings.
For a sidebar similar to the example, select Light Glass in your portal’s Design settings.
The cards keep Pickaxe’s native Try now label, but the entire card is clickable. They automatically wrap into fewer columns on narrower screens.
A couple of things to know
Use a Default Page’s HTML section for this code. A standalone Custom Code Page works differently.
If a page is shared between multiple portals, editing it affects all of them. Create a separate page if you only want this design in one portal.
This customization was tested with three agents on desktop and a narrow layout. It uses the native listing’s navigation and access handling; locked or paid-access flows and lists with more than four agents may need additional testing and adjustment.
To remove it, hide or clear the HTML section and save the page. Your agents remain, and the listing returns to its normal appearance.
Because this is custom CSS, it may need updating if Pickaxe changes the underlying page layout.