Markdown Content Examples

Typography Examples

This is a regular paragraph with bold text, italic text, and inline code. Here's a link example.

Heading Level 2

Heading Level 3

Lists

Unordered List

• First item with basic text
• Second item with bold text
• Third item with emphasized text
  • Nested item one
  • Nested item two

Ordered List

1. First step in the process
2. Second step with code
3. Third step with important information

Code Examples

Inline code: const example = "hello world";

Block code:

function greet(name) {
  return `Hello, ${name}!`;
}

const result = greet("World");
console.log(result);

Blockquotes

This is a regular blockquote. It should be styled distinctly from alerts and callouts. It can span multiple lines and paragraphs.

GitHub-Style Alerts

CRA Hub Specific Alerts

Complex Example

Here's a paragraph with a callout:

Followed by more regular text and a code block:

// Example of compliance checking
const checkCompliance = (product) => {
  return product.hasSecurityUpdates &&
         product.hasDocumentation &&
         product.vulnerabilityTracking;
};

FAQ Accordion Component

Component: components/faq/faq-accordion-item.njk

Native HTML accordions with CSS-only animations using <details> elements.

Showing FAQs from the same sample list used in other views below.

List Flat View (With Context)

Component: components/faq/list-flat-with-context.njk

Shows list title, description, and immediate children (no recursion). Same data as above and below.

🚀 Getting Started with CRA

Essential questions about CRA compliance organized by topic

List Expanded View (Recursive) with Badges

Component: components/faq/list-expanded-items.njk

Recursively renders nested list structures with alternating backgrounds. Same data as above.

Status Badges: FAQs display status badges (Component: components/faq/faq-badges.njk) that use <data> elements with semantic values. Use the toggle below to show/hide badges:

Toggle Badge Visibility

List Card Component

Component: components/list-card.njk

Displays nested lists as clickable cards with FAQ/list counts.

Showing nested lists from the sample data.

Navigation Cards

Used on home page and list indexes with hover effects and arrows. Uses .card-grid and .card classes.

Half-Width Cards

Cards can be displayed in a two-column layout using .card-grid.half-width.

Disclaimer/Warning Block

Uses semantic <aside> element.

Semantic HTML Structure

The templates use semantic HTML5 elements with minimal component classes:

• <header class="site-header"> - Site header with logo and navigation
• <nav class="site-nav"> - Navigation menu links
• <nav class="card-grid"> - Card navigation grids
• <main> - Main content area
• <section class="section-card"> - Content boxes and FAQ categories
• <section class="section-intro"> - Intro/description sections
• <article class="section-card"> - FAQ answers and standalone content
• <ul class="link-list"> - Styled link lists with badges
• <aside> - Disclaimers and warnings (no class needed)
• <details> + <summary> - Native HTML accordions
• <data class="badge"> - Status badges

CSS Architecture

Hybrid CSS architecture combining semantic HTML with light component classes:

Component Classes

• .section-card - White content boxes with shadow and border
• .section-intro - Light gray intro/description boxes
• .card-grid - Grid layout for navigation cards
• .card - Individual card styling with hover effects
• .link-list - Styled lists with hover states and badges
• .site-header - Header layout and spacing
• .site-nav - Navigation menu styling

Utility Classes

• .half-width - Two-column card grid layout
• .full-width - Full-width grid items
• .badge - Badge base styling
• .success, .warning, .danger - Semantic color variants

CSS Features

• CSS Custom Properties for theming and colors
• color-mix() for automatic background/border tints
• grid-template-rows for smooth CSS-only accordion animations
• Native <details> with name attribute for exclusive accordions
• Minimal JavaScript - only for badge visibility toggles

Table Styling

Semantic table styling with subtle borders and proper spacing

ORC WG Brand Guidelines

For the official ORC Working Group logo and brand usage guidelines, check the ORC Brand Guidelines (PDF) provided by the Eclipse Foundation