The Layout Vocabulary Cheat Sheet: What to Call That Thing on Your Screen

Here is a situation I have lived through more times than I'd like to admit:

Me: "Hey Claude, can you add that three-line button thing at the top right? The one that opens a list when you tap it on your phone?"

Claude: builds something. Not what I wanted.

The problem was never the AI. The problem was me. I was describing a hamburger menu the way a caveman describes fire — lots of hand-waving, very little precision.

If you're vibe-coding with AI, your prompts are your blueprints. And blueprints need the right vocabulary. You don't walk into a restaurant and say "give me that hot brown water" when you mean coffee. Same energy.

This post covers layout terms — the structural bones of any web page. The stuff you see on every site but might not have names for. Once you know these words, your AI conversations get dramatically more productive.

🏠 Header

┌──────────────────────────────────────────────────┐
│  🏠 Logo        Home  About  Blog  Contact  [🔍] │ ← Header
├──────────────────────────────────────────────────┤
│                                                  │
│                                                  │
│              (page content)                      │
│                                                  │
│                                                  │
└──────────────────────────────────────────────────┘

The strip at the very top of a page. It usually contains the logo, navigation links, and sometimes a search bar or login button. It stays consistent across every page of the site.

How to prompt AI:

"Add a fixed header with the logo on the left and navigation links on the right."

Key detail: A "fixed" or "sticky" header stays visible as you scroll. A normal header scrolls away with the page. Specify which one you want, or the AI will guess.

🧭 Navigation Bar (Navbar)

                    ┌─────────────────────────────┐
                    │  Home  About  Blog  Contact  │ ← Navbar
                    └─────────────────────────────┘
                      ▲      ▲      ▲       ▲
                   clickable links — each goes
                   to a different page or section

Often lives inside the header, but not always. It's the row of clickable links that take you to different sections or pages. Desktop navbars are usually horizontal. Mobile navbars often collapse into a hamburger menu (keep reading).

How to prompt AI:

"Create a horizontal navbar with links to Home, About, Blog, and Contact."

☰ Hamburger Menu

  DESKTOP                         MOBILE
┌──────────────────────┐    ┌──────────────┐
│ Logo  Home About Blog│    │ Logo     ☰   │ ← tap the ☰
└──────────────────────┘    ├──────────────┤
  all links visible           │ Home         │
                              │ About        │ ← menu
                              │ Blog         │   drops
                              │ Contact      │   down
                              └──────────────┘
 
  ☰  Hamburger        ⋮ Kebab
  ··· Meatball        ⊞ Bento

Three horizontal lines (☰) stacked on top of each other. Tap it, and a menu slides out or drops down. It's called a hamburger because... it looks like a hamburger. Bun, patty, bun. That's the whole origin story.

This is the universal signal for "there's a menu hiding here" on mobile devices. Desktop sites usually show the full navbar, but on smaller screens, everything gets tucked behind this little icon to save space.

How to prompt AI:

"On mobile, collapse the navbar into a hamburger menu that opens a dropdown with all navigation links."

Variations you might see:

• Kebab menu (⋮) — three vertical dots. Usually for secondary actions like "edit" or "delete."
• Meatball menu (···) — three horizontal dots. Similar purpose, different aesthetic.
• Bento menu (⊞) — a grid of dots or squares. Often used for app launchers (think Google's app grid).

Yes, the design industry named all of these after food. No, I don't know why.

▼ Dropdown

   Home   Services ▾   Blog   Contact
            │
            ├─────────────┐
            │ Consulting   │
            │ Training     │ ← dropdown
            │ Support      │
            └─────────────┘

A list of options that appears when you click or tap something — like a button or a menu item. It "drops down" from its trigger element. Dropdowns can contain links, actions, or form options.

How to prompt AI:

"Add a dropdown under the 'Services' nav link that shows three sub-options: Consulting, Training, and Support."

📁 Sidebar

┌──────────────────────────────────────────────┐
│                  Header                       │
├──────────┬───────────────────────────────────┤
│          │                                   │
│ Dashboard│                                   │
│ Users    │        Main Content               │
│ Settings │                                   │
│ Reports  │                                   │
│          │                                   │
│ Sidebar →│                                   │
│          │                                   │
└──────────┴───────────────────────────────────┘

A vertical panel on the left or right side of the page. Common in dashboards, documentation sites, and admin panels. It usually holds navigation, filters, or secondary content.

How to prompt AI:

"Add a left sidebar with vertical navigation links. On mobile, hide it behind a toggle button."

🦶 Footer

│                                                  │
│              (page content)                      │
│                                                  │
├──────────────────────────────────────────────────┤
│  Company        Links          Social            │
│  About Us       Docs           Twitter           │ ← Footer
│  Careers        Blog           GitHub            │
│                                                  │
│           © 2026 Vibed Lab. All rights reserved. │
└──────────────────────────────────────────────────┘

The bottom section of a page. Contains things people need but don't look for until they need them: copyright notices, privacy policy links, social media icons, contact info.

How to prompt AI:

"Create a footer with three columns: company info, quick links, and social media icons."

🚀 Hero Section

┌──────────────────────────────────────────────────┐
│                    Header                        │
├──────────────────────────────────────────────────┤
│                                                  │
│                                                  │
│            Welcome to Our Product                │
│         The best thing since sliced bread.       │ ← Hero
│                                                  │
│              [ Get Started ]                     │   Section
│                                                  │
│                                                  │
├──────────────────────────────────────────────────┤
│              (rest of page)                      │
└──────────────────────────────────────────────────┘

The large, attention-grabbing area at the top of a landing page, right below the header. Usually features a big headline, a subtitle, and a call-to-action button. Sometimes has a background image or video.

How to prompt AI:

"Build a hero section with a centered headline, a short description below it, and a CTA button that says 'Get Started'."

Tip: CTA stands for "Call to Action" — a button or link designed to make the user do something. "Sign Up," "Buy Now," "Learn More." When you tell AI to add a CTA, it knows exactly what you mean.

📢 Banner

┌──────────────────────────────────────────────────┐
│  🎉 New feature launched! Learn more →      [✕]  │ ← Banner
├──────────────────────────────────────────────────┤
│                    Header                        │
├──────────────────────────────────────────────────┤
│                                                  │
│              (page content)                      │
│                                                  │
└──────────────────────────────────────────────────┘

A horizontal strip, typically spanning the full width of the page, used to announce something: a sale, a cookie policy, a new feature. Banners often appear at the top or bottom of the viewport and can usually be dismissed.

How to prompt AI:

"Add a dismissible announcement banner at the top of the page with a close button on the right."

Don't confuse: A banner is temporary and dismissible. A header is permanent and structural. They can look similar but serve very different purposes.

📦 Modal (Popup)

┌──────────────────────────────────────────────────┐
│░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░│
│░░░░░░░░░┌────────────────────────┐░░░░░░░░░░░░░░│
│░░░░░░░░░│                        │░░░░░░░░░░░░░░│
│░░░░░░░░░│    Are you sure?       │░░░░░░░░░░░░░░│
│░░░░░░░░░│                        │░ ← Modal ░░░│
│░░░░░░░░░│  [ Cancel ] [Confirm]  │░░░░░░░░░░░░░░│
│░░░░░░░░░│                        │░░░░░░░░░░░░░░│
│░░░░░░░░░└────────────────────────┘░░░░░░░░░░░░░░│
│░░░░░░░░░░░ dimmed background ░░░░░░░░░░░░░░░░░░░│
└──────────────────────────────────────────────────┘

A box that appears on top of the current page, usually dimming the background. It demands your attention before you can continue. Login forms, confirmation dialogs, and cookie consent prompts are common modals.

How to prompt AI:

"When the user clicks 'Delete,' show a confirmation modal asking 'Are you sure?' with Cancel and Confirm buttons."

📬 Toast / Snackbar

┌──────────────────────────────────────────────────┐
│                                                  │
│              (page content)                      │
│                                                  │
│                                                  │
│                                                  │
│                                                  │
│                    ┌──────────────────────┐       │
│                    │ ✓ Saved successfully │       │ ← Toast
│                    └──────────────────────┘       │
└──────────────────────────────────────────────────┘
              appears briefly, then fades out

A small, temporary notification that pops up (usually at the bottom or top corner of the screen) and disappears after a few seconds. "Item saved!" or "Message sent!" — that kind of feedback.

How to prompt AI:

"After the form submits successfully, show a toast notification that says 'Saved successfully' and auto-dismisses after 3 seconds."

🃏 Card

┌──────────────┐  ┌──────────────┐  ┌──────────────┐
│  ┌────────┐  │  │  ┌────────┐  │  │  ┌────────┐  │
│  │ image  │  │  │  │ image  │  │  │  │ image  │  │
│  └────────┘  │  │  └────────┘  │  │  └────────┘  │
│  Title       │  │  Title       │  │  Title       │
│  Short desc  │  │  Short desc  │  │  Short desc  │
│  [ Read → ]  │  │  [ Read → ]  │  │  [ Read → ]  │
└──────────────┘  └──────────────┘  └──────────────┘
     Card 1            Card 2            Card 3

A contained, rectangular block that groups related information: an image, a title, a short description, and maybe a button. Blog post previews, product listings, and team member profiles are typically displayed as cards.

How to prompt AI:

"Display the blog posts as a grid of cards, each showing the title, date, tags, and a short description."

📐 Grid and Flexbox (Layout Systems)

  GRID (2D — rows + columns)       FLEXBOX (1D — row or column)
 
  ┌──────┬──────┬──────┐           ┌──────┬──────┬──────┐
  │  A   │  B   │  C   │    row →  │  A   │  B   │  C   │
  ├──────┼──────┼──────┤           └──────┴──────┴──────┘
  │  D   │  E   │  F   │
  ├──────┼──────┼──────┤           ┌──────┐
  │  G   │  H   │  I   │    col →  │  A   │
  └──────┴──────┴──────┘           │  B   │
                                   │  C   │
                                   └──────┘

These aren't visual elements — they're the invisible scaffolding that arranges everything on your page.

• Grid: A 2D layout system. Rows and columns. Great for page-level structure.
• Flexbox: A 1D layout system. Either a row or a column at a time. Great for aligning items within a section.

You won't see them, but they're what makes the difference between a page that looks organized and one that looks like furniture thrown into a room.

How to prompt AI:

"Use a 3-column CSS grid for the main content area. On mobile, stack them into a single column."

📱 Breakpoint

  Desktop (> 1024px)         Tablet (768px)        Mobile (< 480px)
┌────────────────────┐    ┌───────────────┐      ┌──────────┐
│ Header             │    │ Header        │      │ Logo  ☰  │
├────┬───────────────┤    ├───────────────┤      ├──────────┤
│Side│               │    │               │      │          │
│bar │  Content      │    │   Content     │      │ Content  │
│    │               │    │               │      │          │
│    │  [A] [B] [C]  │    │  [A] [B]      │      │  [A]     │
│    │               │    │  [C]          │      │  [B]     │
└────┴───────────────┘    └───────────────┘      │  [C]     │
                                                 └──────────┘
         ← breakpoints trigger layout changes →

The screen width at which your layout changes. At 768px wide, your three-column grid might become a single column. At 1024px, your sidebar might appear. These transition points are breakpoints.

How to prompt AI:

"On screens below 768px, hide the sidebar and stack the content in a single column."

The Cheat Sheet

For quick reference when you're mid-conversation with AI:

💡 Why This Matters for Vibe Coding

When you tell an AI "add a sidebar with navigation," it immediately knows:

• Where to place it (left or right edge)
• What behavior it should have (collapsible on mobile)
• What content belongs there (links, filters)

When you tell an AI "add that panel thing on the side with some links," it has to guess all of the above. Sometimes it guesses right. Often it doesn't. And then you spend three rounds of back-and-forth clarifying what you meant.

The vocabulary gap between you and AI is the single biggest source of wasted prompts in vibe coding. Close that gap, and your build speed jumps immediately.

This was layout terms. Next time, we'll cover interactive component terms — tabs, accordions, carousels, tooltips, and all the other things you've clicked a thousand times without knowing their names.

2026.02.28