Lorem Ipsum HTML Templates — Placeholder Content for Common Components

Copy-paste these HTML templates with Lorem Ipsum placeholder content directly into your prototypes. Each template covers a common component pattern.

Generate custom Lorem Ipsum text with the Lorem Ipsum Generator.

Blog post card

<article class="post-card">
  <img src="https://placehold.co/600x400" alt="Post thumbnail" loading="lazy">
  <div class="post-card-body">
    <span class="post-tag">Technology</span>
    <h2 class="post-title">
      <a href="#">Lorem Ipsum Dolor Sit Amet Consectetur</a>
    </h2>
    <p class="post-excerpt">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
      eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <div class="post-meta">
      <img src="https://placehold.co/32x32" alt="Author" class="avatar">
      <span>John Doe</span>
      <time datetime="2026-05-12">May 12, 2026</time>
      <span>5 min read</span>
    </div>
  </div>
</article>

Full article template

<main class="article">
  <header class="article-header">
    <nav aria-label="Breadcrumb">
      <ol>
        <li><a href="/">Home</a></li>
        <li><a href="/blog">Blog</a></li>
        <li aria-current="page">Lorem Ipsum Article</li>
      </ol>
    </nav>
    <h1>Lorem Ipsum Dolor Sit Amet Consectetur Adipiscing</h1>
    <div class="article-meta">
      <span>By Jane Smith</span>
      <time>May 12, 2026</time>
      <span>8 min read</span>
    </div>
    <img src="https://placehold.co/1200x630" alt="Article hero" loading="eager">
  </header>

  <div class="article-body">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
      quis nostrud exercitation ullamco laboris nisi ut aliquip.
    </p>

    <h2>Lorem Ipsum Section Heading</h2>
    <p>
      Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
      eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.
    </p>

    <ul>
      <li>Lorem ipsum dolor sit amet</li>
      <li>Consectetur adipiscing elit</li>
      <li>Sed do eiusmod tempor incididunt</li>
      <li>Ut labore et dolore magna aliqua</li>
    </ul>

    <h2>Another Section Heading</h2>
    <p>
      Sunt in culpa qui officia deserunt mollit anim id est laborum. Curabitur
      pretium tincidunt lacus. Nulla gravida orci a odio.
    </p>
  </div>
</main>

Product card (e-commerce)

<div class="product-card">
  <a href="#" class="product-image-link">
    <img src="https://placehold.co/400x400" alt="Lorem Ipsum Product" loading="lazy">
    <span class="product-badge">New</span>
  </a>
  <div class="product-info">
    <h3 class="product-name">Lorem Ipsum Dolor Sit Amet</h3>
    <p class="product-brand">Brand Name</p>
    <div class="product-rating" aria-label="4.5 out of 5 stars">
      ★★★★½
      <span>(128 reviews)</span>
    </div>
    <div class="product-price">
      <span class="price-current">$49.99</span>
      <span class="price-original">$79.99</span>
      <span class="price-discount">38% off</span>
    </div>
    <button class="btn btn-primary">Add to Cart</button>
  </div>
</div>

Navigation with placeholder links

<header class="site-header">
  <a href="/" class="logo">Acme Corp</a>

  <nav aria-label="Main navigation">
    <ul>
      <li><a href="#">Products</a></li>
      <li>
        <a href="#" aria-haspopup="true">Solutions ▾</a>
        <ul class="dropdown">
          <li><a href="#">Lorem Ipsum</a></li>
          <li><a href="#">Dolor Sit Amet</a></li>
          <li><a href="#">Consectetur</a></li>
        </ul>
      </li>
      <li><a href="#">Pricing</a></li>
      <li><a href="#">About</a></li>
    </ul>
  </nav>

  <div class="header-actions">
    <a href="#" class="btn btn-ghost">Sign In</a>
    <a href="#" class="btn btn-primary">Get Started</a>
  </div>
</header>

Comment / review template

<section class="comments">
  <h2>3 Comments</h2>

  <article class="comment">
    <img src="https://placehold.co/48x48" alt="User avatar" class="comment-avatar">
    <div class="comment-body">
      <header class="comment-header">
        <strong>Alice Johnson</strong>
        <time datetime="2026-05-10">May 10, 2026</time>
      </header>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod
        tempor incididunt ut labore et dolore magna.
      </p>
      <button class="btn-reply">Reply</button>
    </div>
  </article>

  <article class="comment comment-reply">
    <img src="https://placehold.co/48x48" alt="User avatar" class="comment-avatar">
    <div class="comment-body">
      <header class="comment-header">
        <strong>Bob Smith</strong>
        <time datetime="2026-05-11">May 11, 2026</time>
      </header>
      <p>
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
        dolore eu fugiat nulla pariatur.
      </p>
    </div>
  </article>
</section>

VS Code Emmet shortcuts

<!-- Type these in VS Code HTML files and press Tab: -->

<!-- lorem   → one paragraph -->
<!-- lorem5  → 5 words -->
<!-- lorem10 → 10 words -->
<!-- p*3>lorem → 3 paragraphs in <p> tags -->
<!-- li*5>lorem3 → 5 list items with 3-word Lorem Ipsum each -->

<!-- Example expansion of "ul>li*4>a>lorem3": -->
<ul>
  <li><a href="">Lorem ipsum dolor</a></li>
  <li><a href="">Sit amet consectetur</a></li>
  <li><a href="">Adipiscing elit sed</a></li>
  <li><a href="">Do eiusmod tempor</a></li>
</ul>

Related tools

• Lorem Ipsum Generator — generate custom Lorem Ipsum
• HTML Minifier — minify your HTML templates
• Markdown Preview — preview markdown documentation