← BACK

HEARTLINE SONGSMITH

LAYOUT PATTERNS

Common layout patterns used in the Anvil Design System

ComicLogoComponent

Heartline Songsmith logo with heart icon in three sizes

Small

ecg_heart

Heartline Songsmith

Medium (Default)

ecg_heart

Heartline Songsmith

Large

ecg_heart

Heartline Songsmith 

<%= render ComicLogoComponent.new(
  size: :medium,  # :small, :medium, :large
  link: true      # Wrap in link to root_path (default: true)
) %>

<!-- Features -->
- Yellow heart icon with black stroke
- Bangers font for text
- Rotated heart icon (3deg)
- Hover opacity effect
- Three size variants

ComicHeaderComponent

Site header with logo, navigation, and collapsible mobile menu. Navigation links adapt based on user authentication state.

Guest User (Not Logged In)

ecg_heart

Heartline Songsmith

Shows: HOW IT WORKS!, THE SONGSMITH!, FAQ!, CONTACT!, SIGN IN!

Logged In User

ecg_heart

Heartline Songsmith

Shows: ORDERS!, THE SONGSMITH!, FAQ!, CONTACT!, AI CHAT!, DASHBOARD!

Without Auth Button

ecg_heart

Heartline Songsmith

Use show_auth: false to hide the sign in/dashboard button 

<%= render ComicHeaderComponent.new(
  show_auth: true,        # Show sign in/dashboard button
  current_user: current_user  # Pass current user for auth state
) %>

<!-- Features -->
- Responsive mobile menu (hamburger on mobile)
- Dynamic navigation based on user state
- Logo links to root path
- Comic book styling with red background
- Yellow hover effects
- Material Symbols icons

Max-Width Container

Standard content container with responsive padding

Content goes here (max-width: 1280px) 

<div class="mx-auto max-w-5xl px-4 py-12">
  <!-- Your content -->
</div>

Two-Column Grid

Responsive grid that stacks on mobile

Column 1

Column 2

<div class="grid gap-6 md:grid-cols-2">
  <div>Column 1</div>
  <div>Column 2</div>
</div>

Three-Column Grid

Responsive grid for cards or features

Column 1

Column 2

Column 3

<div class="grid gap-6 md:grid-cols-2 lg:grid-cols-3">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
</div>

Hero Section

Large headline with supporting text

YOUR STORY HAS A SONG IN IT

We help you hear it. 

<div class="halftone-bg p-12 text-center">
  <h1 class="comic-title text-5xl font-bold italic 
    tracking-wider text-comic-yellow md:text-6xl" 
    style="-webkit-text-stroke: 3px black;">
    YOUR STORY HAS A SONG IN IT
  </h1>
  <p class="font-headline text-xl text-comic-black">
    We help you hear it.
  </p>
</div>

Content + Sidebar Layout

Main content with sidebar (used in ComicDetailCardComponent)

Card Title

Main content area goes here. This is where you'd put product descriptions, features, or other important information.

$299
Sidebar
<div class="flex flex-col gap-6 md:flex-row">
  <div class="flex-1">
    <!-- Main content -->
  </div>
  <div class="md:w-48">
    <!-- Sidebar -->
  </div>
</div>

Spacing Patterns

Standard spacing used throughout Anvil

Section Spacing (mb-12)

48px bottom margin between major sections

Card Spacing (gap-6)

24px gap between grid items

Content Padding (p-6)

24px padding inside cards and containers

/* Common spacing values */
mb-12  /* 48px - Section spacing */
gap-6  /* 24px - Grid gaps */
p-6    /* 24px - Card padding */
p-4    /* 16px - Compact padding */
space-y-4  /* 16px - Vertical spacing */