Skip to content

Part of Run Marketing & SEO Campaigns With AI

Marketing Blueprint

Safety checked

UI Components & Design Patterns

0June 2026

Navigation, conversion, branding, content, layout, and utility components for building interactive pages.

What problem does this solve?

Designs specific UI components (navigation menu, CTA button, hero section, testimonial carousel, pricing table) so each component serves a clear conversion or UX purpose instead of being generic boilerplate. The agent understands SEO signals (breadcrumbs, internal nav), conversion mechanics (CTA placement, trust badges), and accessibility.

How does it work?

  1. Identify the component you need: navigation (menu, breadcrumb, footer, sidebar), conversion (CTA, popup, newsletter signup, testimonials), branding (logo, favicon, hero, visual identity), content (tabs, HowTo section, comparison table), or layout (card, grid, carousel, masonry). 2. Ask for the component. 3. The agent generates structure, styling guidance, and any schema markup (e.g., BreadcrumbList for breadcrumbs, HowTo schema for step sections). 4. Integrate into your pages. Output: a component with both visual design and technical implementation details.

Included Skills

No skills in this group

What's required to run this?

Components assume HTML/CSS knowledge or a component library (React, Vue, etc.) integration. Accessibility is built in (ARIA labels, keyboard nav, semantic HTML). HowTo schema requires understanding JSON-LD. Tab/accordion content hidden in markup affects SEO; skill includes guidance on noindex/index decisions.

Key Features

Navigation

Navigation menu, breadcrumbs, footer, sidebar, table of contents; SEO signals (breadcrumb schema); internal linking.

Conversion

CTA button, popup/modal, newsletter signup, testimonials, trust badges; placement and copy for maximum conversion.

Branding

Logo placement, favicon, visual identity (colors, typography, spacing), hero section design.

Content

Tabs and accordions (with SEO for hidden content), HowTo section (with schema), comparison tables.

Layout & Utility

Card, grid, list, carousel, masonry layouts; social share buttons, URL slug generation, announcement banners.

About This Blueprint

Industry
Technology

More Blueprints to explore

MarketingSafety checked

Technical, On-Page & Content SEO

Staging-only Signal Harbor QA copy of public Blueprint 3LU1WX5Ej1hOPzS. Original attribution is available through the remix link. Technical foundation, on-page optimization, and content strategy for search engine visibility.

Signal Harbor

MarketingSafety checked

Content & Copywriting Across Formats

Staging-only Signal Harbor QA copy of public Blueprint NvaJ4pzioZPbb5D. Original attribution is available through the remix link. Article, video, visual, podcast, and translation skills plus copywriting frameworks for every format.

Signal Harbor

Sales

ICP-Filtered Outreach Lists from G2 Buyer Intent

Stop wasting rep time on weak intent signals and mismatched accounts. The workflow ranks ICP-fit buyers by readiness, finds the right contact, and supplies tailored outreach angles for the strongest opportunities.

Check Point Next Generation Firewalls (NGFWs)Check Point Next Generation Firewalls (NGFWs)ClaudeClaudeZoomInfo (MCP)+3 more

Ishani D.

Account Manager at G2