# Blueprint Examples This guide provides comprehensive examples of common UI patterns and layouts using Blueprint. ## Basic Examples ### Page Setup ```blueprint page { title { "My Blueprint Page" } description { "A comprehensive example page" } keywords { "blueprint, example, ui" } author { "Blueprint Team" } } navbar { horizontal { text(bold) { "My App" } links { link(href:home) { "Home" } link(href:about) { "About" } link(href:contact) { "Contact" } } } } section(wide, centered) { title(huge) { "Welcome" } text(subtle) { "Start building beautiful UIs" } } ``` ### Basic Card ```blueprint card { title { "Simple Card" } text { "This is a basic card with some content." } button { "Learn More" } } ``` ### Alert Messages ```blueprint vertical(gap:2) { alert(type:info) { "This is an information message" } alert(type:success) { "Operation completed successfully" } alert(type:warning) { "Please review your input" } alert(type:error) { "An error occurred" } } ``` ## Layout Examples ### Grid Layout ```blueprint section(wide) { title { "Our Features" } grid(columns:3) { card { title { "Feature 1" } text { "Description of feature 1" } button-secondary { "Learn More" } } card { title { "Feature 2" } text { "Description of feature 2" } button-secondary { "Learn More" } } card { title { "Feature 3" } text { "Description of feature 3" } button-secondary { "Learn More" } } } } ``` ### Responsive Layout ```blueprint section(wide) { horizontal(mobile-stack) { vertical(width:40) { title { "Left Column" } text { "This column takes 40% width on desktop" } } vertical(width:60) { title { "Right Column" } text { "This column takes 60% width on desktop" } } } } ``` ### Nested Layout ```blueprint section(wide) { vertical(centered) { title(huge) { "Nested Layout" } horizontal(centered, gap:4) { vertical(centered) { title { "Column 1" } text { "Content" } } vertical(centered) { title { "Column 2" } text { "Content" } } } } } ``` ## Form Examples ### Login Form ```blueprint section(wide, centered) { card { title { "Login" } vertical(gap:2) { vertical { text(bold) { "Email" } input(type:email, placeholder:"Enter your email") { } } vertical { text(bold) { "Password" } input(type:password, placeholder:"Enter your password") { } } horizontal { checkbox { } text { "Remember me" } } button { "Sign In" } text(small, centered) { "Forgot password?" } } } } ``` ### Contact Form ```blueprint section(wide) { card { title { "Contact Us" } vertical(gap:2) { horizontal(gap:2) { vertical { text(bold) { "First Name" } input(placeholder:"John") { } } vertical { text(bold) { "Last Name" } input(placeholder:"Doe") { } } } vertical { text(bold) { "Email" } input(type:email, placeholder:"john@example.com") { } } vertical { text(bold) { "Message" } textarea(placeholder:"Your message here...") { } } button { "Send Message" } } } } ``` ### Settings Form ```blueprint section(wide) { card { title { "Settings" } vertical(gap:3) { horizontal { vertical(width:70) { title(small) { "Notifications" } text(subtle) { "Manage your notification preferences" } } switch { } } horizontal { vertical(width:70) { title(small) { "Dark Mode" } text(subtle) { "Toggle dark/light theme" } } switch { } } horizontal { vertical(width:70) { title(small) { "Email Updates" } text(subtle) { "Receive email updates about your account" } } switch { } } } } } ``` ## Navigation Examples ### Complex Navbar ```blueprint navbar { horizontal { horizontal(gap:2) { text(bold) { "Logo" } links { link(href:home) { "Home" } link(href:products) { "Products" } link(href:pricing) { "Pricing" } link(href:about) { "About" } } } horizontal(gap:2) { button-light { "Sign In" } button { "Get Started" } } } } ``` ### Sidebar Navigation ```blueprint horizontal { vertical(width:20) { title { "Dashboard" } links(vertical) { link(href:home) { "Home" } link(href:profile) { "Profile" } link(href:settings) { "Settings" } link(href:help) { "Help" } } } vertical(width:80) { title { "Main Content" } text { "Your content here" } } } ``` ### Breadcrumb Navigation ```blueprint horizontal(gap:1) { link(href:home) { "Home" } text { ">" } link(href:products) { "Products" } text { ">" } text(bold) { "Current Page" } } ``` ## Complete Page Examples ### Landing Page ```blueprint page { title { "Blueprint - Modern UI Framework" } description { "Build beautiful web interfaces with Blueprint" } } navbar { horizontal { text(bold) { "Blueprint" } links { link(href:features) { "Features" } link(href:docs) { "Docs" } link(href:pricing) { "Pricing" } button { "Get Started" } } } } section(wide, centered) { vertical(centered) { title(huge) { "Build Beautiful UIs" } text(large, subtle) { "Create modern web interfaces with ease" } horizontal(centered, gap:2) { button { "Get Started" } button-light { "Learn More" } } } } section(wide) { grid(columns:3) { card { title { "Easy to Use" } text { "Simple, declarative syntax for building UIs" } button-secondary { "Learn More" } } card { title { "Modern Design" } text { "Beautiful dark theme with consistent styling" } button-secondary { "View Examples" } } card { title { "Responsive" } text { "Looks great on all devices out of the box" } button-secondary { "See Details" } } } } ``` ### Dashboard Page ```blueprint page { title { "Dashboard - My App" } } navbar { horizontal { text(bold) { "Dashboard" } horizontal { text { "Welcome back, " } text(bold) { "John" } } } } section(wide) { grid(columns:4) { card { title { "Total Users" } text(huge) { "1,234" } text(subtle) { "+12% this month" } } card { title { "Revenue" } text(huge) { "$5,678" } text(subtle) { "+8% this month" } } card { title { "Active Users" } text(huge) { "892" } text(subtle) { "Currently online" } } card { title { "Conversion" } text(huge) { "3.2%" } text(subtle) { "+0.8% this month" } } } horizontal(gap:4) { vertical(width:60) { card { title { "Recent Activity" } list { text { "User signup: John Doe" } text { "New order: #12345" } text { "Payment received: $99" } } } } vertical(width:40) { card { title { "Quick Actions" } vertical(gap:2) { button { "Create User" } button-secondary { "View Reports" } button-light { "Export Data" } } } } } } ``` These examples demonstrate common UI patterns and how to implement them using Blueprint. Use them as a starting point for your own projects and customize them to match your needs.