Good to know
Everything guests usually ask in the week before they arrive. Anything else, just write.
Ask the front desk
Answering from eight in the morning until midnight
A practical questions section for a hotel: a pinned column with a serif heading, a short line and a muted front desk card with a small photograph, opening hours, phone and email, beside an accordion of large serif questions whose ruled lines draw in as they arrive.
A pinned left column with the heading and a muted front desk card (small photo, hours, phone, email) sits beside an accordion of large serif questions whose ruled lines draw in as each row arrives.
Upgrade to Pro
Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.
Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.
Radix flavor
npx shadcn add "https://beste.dev/r/hotel44?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
npx shadcn add "https://beste.dev/r-base/hotel44?email=YOUR_EMAIL&license_key=YOUR_KEY"This installs the block to components/beste/block/hotel44.tsx plus the text1 word stagger it uses for the heading and the shadcn/ui accordion primitive behind the question list.
The installed file exports hotel44Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.
import { Hotel44, hotel44Demo } from "@/components/beste/block/hotel44";
export default function Page() {
return <Hotel44 {...hotel44Demo} />;
}Then replace the demo with your own props. Written out, a trimmed setup looks like this:
import { Hotel44 } from "@/components/beste/block/hotel44";
export default function Page() {
return (
<Hotel44
eyebrow="Good to know"
heading="The practical part, kept short"
description="Everything guests usually ask in the week before they arrive."
questions={[
{ question: "When can we arrive and leave?", answer: "Rooms are ready from two in the afternoon and yours until noon on the day you go." },
{ question: "Is there parking at the house?", answer: "Four spaces under the olives at the gate, free for guests." },
]}
contact={{
heading: "Ask the front desk",
hours: "Answering from eight in the morning until midnight",
phone: { label: "+30 22840 41200", href: "tel:+302284041200" },
email: { label: "[email protected]", href: "mailto:[email protected]" },
image: { src: "https://oud.pics/b/hotel/ostria-reception.webp", alt: "A limestone reception counter with olive branches, a brass key and a bell" },
}}
/>
);
}| Prop | Type | Default | Description |
|---|---|---|---|
eyebrow | string | – | Small line above the heading |
heading | string | – | Section heading, through Text1 |
description | string | – | Paragraph under the heading |
questions | Question[] | [] | Accordion rows |
contact | Contact | – | Front desk card under the description |
className | string | – | Extra classes for the outer <section> |
type Question = {
question: string;
answer: string;
};
type Contact = {
heading: string;
hours: string;
phone: { label: string; href: string };
email: { label: string; href: string };
image?: { src: string; alt: string };
};scaleX, staggered by index; a closing rule draws under the last row.contact.image the card shows text only.tel: and mailto: hrefs.questions is empty. With reduced motion everything renders in place without fades or draws.