Web Analytics
Skip to Main Content

ChatGPT Meets LibGuides

Working together to make our LibGuides smarter.

Design Suggestions v3

💡 ChatGPT Design Suggestions (with Live Examples)

Beyond translation, ChatGPT can propose visual, interactive, and accessibility enhancements for your LibGuides. Explore the examples below and copy the code you need.

1) Banners & Headers — UF Blue Gradient

Design & Branding

Working together to make our LibGuides smarter.

Tip: Swap colors for ChatGPT green or a soft pastel by changing the gradient values.
<div style="background:linear-gradient(90deg,#3b82f6,#2563eb); color:#fff; padding:18px; border-radius:12px;">
  <h3 style="margin:0 0 6px;font-size:1.4em;">Design & Branding</h3>
  <p style="margin:0;opacity:.95;">Working together to make our LibGuides smarter.</p>
</div>

2) Cards & Infoboxes — Alternating Pastels

Readable Layouts

Use generous spacing, 16px+ text, and concise headings.

Consistent Styles

Keep borders, shadows, and radii consistent across cards.

Tip: Alternate .pastel-a / .pastel-b to aid scanning across long lists.
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px;">
  <div style="background:#fff7ed;border:1px solid #e5e7eb;border-radius:14px;padding:12px;box-shadow:0 4px 10px rgba(0,0,0,.05);">
    <h4 style="margin:0 0 6px;font-size:1.05em;">Readable Layouts</h4>
    <p>Use generous spacing, 16px+ text, and concise headings.</p>
  </div>
  <div style="background:#f0fdf4;border:1px solid #e5e7eb;border-radius:14px;padding:12px;box-shadow:0 4px 10px rgba(0,0,0,.05);">
    <h4 style="margin:0 0 6px;font-size:1.05em;">Consistent Styles</h4>
    <p>Keep borders, shadows, and radii consistent across cards.</p>
  </div>
</div>

3) Quick Navigation — CTA Buttons to Subpages

Start with Your Goal Use Natural Language
Tip: Update the hrefs to your LibGuides friendly URLs (e.g., /writing-prompts/step3).
<div>
  <a href="/writing-prompts/step1" style="display:inline-block;background:#10a37f;color:#fff;padding:10px 14px;border-radius:999px;border:1px solid #0e8f6f;font-weight:600;text-decoration:none;">Start with Your Goal</a>
  <a href="/writing-prompts/step2" style="display:inline-block;background:#fff;color:#0e8f6f;padding:10px 14px;border-radius:999px;border:1px solid #0e8f6f;font-weight:600;text-decoration:none;margin-left:10px;">Use Natural Language</a>
</div>

4) Collapsible FAQs — Common Questions

How do I find peer-reviewed articles?

Use database filters (peer-reviewed), subject databases, and targeted keywords.

Where do I get citation help?

Visit the Citation page or use Ask a Librarian for one-on-one guidance.

Tip: FAQs reduce scrolling and keep side-nav pages tidy.
<details style="border:1px solid #e5e7eb;border-radius:10px;padding:10px 12px;background:#eef2ff;">
  <summary style="cursor:pointer;font-weight:600;">How do I find peer-reviewed articles?</summary>
  <p>Use database filters (peer-reviewed), subject databases, and targeted keywords.</p>
</details>

5) Show/Hide Blocks — Code & Live Preview

Quick Tips

  • Lead with the user’s task.
  • Keep sentences short.
  • Test on mobile.
<div style="background:#f0fdf4;border:1px solid #e5e7eb;border-radius:14px;padding:12px;">
  <h4 style="margin:0 0 6px;font-size:1.05em;">Quick Tips</h4>
  <ul style="margin:6px 0 0 18px;">
    <li>Lead with the user’s task.</li>
    <li>Keep sentences short.</li>
    <li>Test on mobile.</li>
  </ul>
</div>

6) Embedded Search — Page-Top Helper

Tip: Wire this to your LibGuides search or a specific page anchor set.
<form role="search" aria-label="On-page helper search" style="display:flex;gap:8px;">
  <input type="search" placeholder="Search this guide…" aria-label="Search this guide" style="flex:1;padding:10px 12px;border-radius:10px;border:1px solid #d1d5db;font-size:16px;">
  <button type="submit" style="padding:10px 14px;border-radius:10px;border:1px solid #d1d5db;background:#f9fafb;">Search</button>
</form>
Accessibility: Maintain 16px+ base text, check color contrast (WCAG AA), and test interactions with keyboard only.