A warm, editorial event invitation card built with Bootstrap 5: brand header, a wide event photo with a date chip, a serif headline, a four-cell details grid and pill-shaped RSVP buttons. Use it on an event page, in a members area or as the confirmation screen after someone opens an invitation link for a dinner, launch or club evening.
How it works
The root .eie-invite sets the beige page background and all colors as custom properties. Inside it, article.eie-message is a 600px wide paper-colored card, labelled by its h1.
The header shows an inline SVG logo with the brand name and an "Invitation" label. .eie-photo contains the event photo, cropped to a 600 by 220 ratio with aspect-ratio and object-fit: cover, and the .eie-date-chip that overlaps its lower edge. The intro block has the .eie-eyebrow, the .eie-title in Georgia with a fluid clamp() size, and a personal greeting.
.eie-details is a dl turned into a two-by-two Bootstrap row with col-6 cells; the CSS draws the inner divider lines with :nth-child selectors. Each .eie-detail pairs an icon label (dt) with the value (dd). The RSVP area stacks the three .eie-btn links on phones and puts them in a row from sm with flex-sm-row. Calendar and map links, the gold-bordered .eie-note, a signature and the .eie-footer follow.
A short script keeps the demo date in the future: it picks the first Saturday at least four weeks from today, writes it into the elements marked data-eie-month, data-eie-day, data-eie-date and data-eie-time (with matching datetime values), and sets the reply-by date in data-eie-rsvp nine days earlier.
Customization
--eie-accentand--eie-accent-darkin.eie-invite: change the primary RSVP button, date chip, icons and links.--eie-bgand--eie-paper: set the outer background and the card color.--eie-serif: switch the headline, brand and signature font to another serif stack.- The
imginside.eie-photo: pointsrcto your own event photo and keepaspect-ratio: 600 / 220or change it for a taller banner. - Real event: delete
script.jsand write your date into thedata-eie-*elements, or set them from your server. - The
hrefof each.eie-btn: link to your RSVP endpoint with a token, for example?rsvp=yes.
Accessibility
The card is an article with aria-labelledby pointing to the headline, the photo has descriptive alt text, and the date chip is aria-hidden because the date is repeated in the details list. Icons are decorative and hidden from screen readers. The RSVP buttons are real links with clear text, links and buttons show a 2px accent focus outline, and muted text colors stay readable on the cream background.
Usage notes
Requires Bootstrap 5 (added automatically) and Bootstrap Icons. The photo comes from Unsplash; replace it with your own image. This is a web component, not an email template: email clients such as Outlook do not load Bootstrap or icon fonts, so for a sent invitation use a table-based email with inline styles.
