Topic Cards & Reference Sheets

Topic Cards (Explore Topics)

Location

• GP Element: ID 4091 — ID86 Niche Cards
• Display: general:front_page
• CSS: .id86-niche-grid (4-column CSS grid)

HTML

<section class="id86-section id86-niche-cards">
  <div class="id86-shell">
    <div class="id86-section-heading">
      <h2>Explore topics</h2>
    </div>
    <div class="id86-niche-grid">
      <a class="id86-niche-card id86-code" href="/category/code/">
        <h3>Code</h3>
        <p>Languages, tools, and everyday development patterns.</p>
      </a>
      <!-- ... DevOps, English, SEO ... -->
    </div>
  </div>
</section>

Responsive Behavior

Viewport	Columns
> 960px	4
601–960px	2
≤ 600px	1

Card Anatomy

Each card has:

• 4px colored top border matching the category (--id86-card).
• White background with a 1px border.
• Hover: translateY(-5px) lift with increased shadow.
• Min height: clamp(164px, 18vw, 210px).

Category Colors

Class	--id86-card
.id86-code	#2597d5 (sky)
.id86-devops	#2273bf (blue)
.id86-english	#1f64a6 (dark blue)
.id86-seo	#14326c (navy)

Latest Reference Sheets

Location

• GP Element: ID 4092 — ID86 Latest Sheets
• Content: [id86_latest_sheets limit="6"] shortcode
• CSS: .id86-sheet-grid (3-column CSS grid)

Shortcode Output

The id86_latest_sheets_shortcode function renders each reference as:

<article class="id86-sheet-card">
  <p class="id86-sheet-meta">Code</p>
  <h3><a href="/code/git-cheat-sheet/">Git Quick Reference</a></h3>
  <p>Essential Git commands for inspecting, branching, committing...</p>
  <a class="id86-sheet-link" href="/code/git-cheat-sheet/">Open reference →</a>
</article>

Responsive Behavior

Viewport	Columns
> 960px	3
601–960px	2
≤ 600px	1

Card Anatomy

• White background, 1px border.
• Meta label (category name) in uppercase blue.
• Title link, truncated excerpt, "Open reference →" link auto-spaced to bottom.
• Min height: clamp(230px, 25vw, 270px).