Booking Panel
A live booking split pairing a ruled list of set formats with a details card of availability, a rider link, and a request button.
A live booking split pairing a ruled list of set formats with a details card of availability, a rider link, and a request button.
The source for every Portfolio block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Booking Panel is a two column split. The left column carries the heading, a short lede, and a ruled list of set formats where each row names the format, its lineup, and a length range in tabular numerals, closed by a line of recent rooms. The right column is a booking details card holding availability, home base, territories, and a typical fee note as a definition list, a tech rider download link, and a full width request button with an email fallback below it.
Two const arrays, formats and details, fill the two sides. The details card uses mt-auto on its button block so the card foot lines up with the recent-rooms note in the left column and neither side floats.
Reach for this block near the foot of a musician site or on a dedicated booking page, wherever promoters and event organisers need format options and terms in one view. The installer swaps the formats, the booking details, the rider link, and the two contact addresses.
A natural flow around it on a Portfolio Pro page:
Before
After
One strong use is the live booking panel for a touring act. Other booking shapes:
Tip: give a real availability window and territory, vague terms invite dead-end enquiries that a promoter can rule in or out at a glance instead.