This page documents the standardized content elements and variants available for the PSI website. These elements provide consistent styling and behavior across different page types.

Data-Variant System

All content variants use a unified <section data-variant="..."> pattern for semantic HTML and consistent CSS targeting.

Variant 1: Numbered List

Use Case: Sequential content with automatic numbering (research steps, processes, timelines)

Syntax:

1
2
3
4
5
6
7

<section data-variant="numbered">
<h3>Step Title</h3>
<p>Description of this step...</p>

<h3>Next Step Title</h3>
<p>Description of next step...</p>
</section>

Result:

Variant 2: Cards

Use Case: Highlighting distinct topics, projects, or features that deserve visual separation

Syntax:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<section data-variant="cards">
<article>
<h3>Card Title</h3>
<p>Card content goes here...</p>
</article>

<article>
<h3>Another Card Title</h3>
<p>Another card's content...</p>
</article>
</section>

Result:

Variant 4: Definition List

Use Case: Term definitions, glossaries, Q&A sections, concept explanations

Syntax:

1
2
3
4
5
6
7

<section data-variant="definition">
<h3>Term or Question</h3>
<p>Definition or answer goes here...</p>

<h3>Another Term</h3>
<p>Another definition...</p>
</section>

Result:

Variant 4b: Indented Definition List

Use Case: Project descriptions, detailed term explanations where content flows as continuous text under headings

Syntax:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<section data-variant="definition-indented">

### Project Name <span class="date-range">(2022–2026)</span>

Detailed project description that flows as continuous text. Can include inline links and references. Supports shortcodes like link-container and margin elements.

### Another Project <span class="date-range">(2021–2025)</span>

Another detailed description with flowing text content.

</section>

Result:

Key Differences from Regular Definition:

• Content flows as continuous text rather than short definitions
• Uses markdown ### headings instead of HTML <h3> tags
• Often used with date ranges in headings (<span class="date-range">)
• Supports complex content including shortcodes and markdown links
• Better suited for project descriptions and detailed explanations
• Critical: Requires blank lines before/after headings and content for proper markdown processing
• Critical: Use markdown ### syntax, NOT HTML <h3> tags inside the section

Variant 5: Timeline

Use Case: Chronological content, project phases, historical developments

Syntax:

1
2
3
4
5
6
7

<section data-variant="timeline">
<h3>Phase/Date Title</h3>
<p>Description of what happened...</p>

<h3>Next Phase/Date</h3>
<p>Next development...</p>
</section>

Result:

Accordion Components

Standard Project Accordion

Syntax:

1
2
3
4
5
6
7
8
9

<details class="project-accordion">
<summary>
<span class="accordion-title">Project Title</span>
<span class="preview-text">Brief preview description...</span>
</summary>
<div class="accordion-content">
<p>Full project description and details go here...</p>
</div>
</details>

Result:

Overview Accordion with Project List

Syntax:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

<details class="projects-overview-accordion">
<summary>Show overview of all projects</summary>
<div class="accordion-content">

<h3>Current Projects</h3>
<div class="project-item">
<h4>Project Name</h4>
<p>Project description...</p>
</div>

</div>
</details>

Result:

Research Accordion (Shortcode)

Use Case: Specialized accordion for research topics with preview text and expandable details

Syntax:

  
Privacy & Security in Everyday Digital Life
    
User Studies • Ethnography • Security Training
  
  

Interdisciplinary investigation of security and privacy in real-world usage contexts, focusing on user-friendly protective measures and their practical feasibility in everyday digital life.
User studies on security tools • Ethnographic research in cooperation with FAU • Awareness and security training in software development • Everyday-suitable protective measures and their acceptance • ForDaySec User Studies
 (card game methodology for security awareness)

  

Result:

Features:

• Automatic styling with orange accent colors
• Preview text for quick scanning
• Expandable content for detailed information
• Consistent with other accordion components

Link Containers

Standard Link Container

Use Case: Grouping related links with consistent styling and responsive behavior

Syntax:

1
2
3
4

<div class="link-container">
<a href="#link1">First Link</a>
<a href="#link2">Second Link</a>
</div>

Result:

Important Limitation: Link containers cannot be used within shortcodes or accordion content due to Hugo’s markdown processing and nesting issues. Use regular markdown links instead within accordions.

Responsive Behavior:

• Desktop: Horizontal layout with arrow prefixes (→ Link Text)
• Tablet: Vertical stacked layout
• Mobile: Button-style links with borders and touch-friendly targets

Color System

The website uses a unified orange accent color system for consistent branding and readability.

Orange Accent Colors:

• Primary Orange: #BC5215 (H3, H4, links, accents)
• Darker Orange: #8B3C0F (H2 headings, hover states)
• Orange Background: rgba(188, 82, 21, 0.03) (3% opacity for card backgrounds)
• Orange Border: rgba(188, 82, 21, 0.1) (10% opacity for card borders)

Applied Elements:

• All H2 headings (darker orange) with orange dashed lines
• All H3/H4 headings (primary orange)
• All links (primary orange, darker on hover)
• Card backgrounds and borders (orange tint)
• Variant numbering and timeline elements
• Accordion arrows and interactive elements

Preserved Colors (for future use):

• Cyan: #24837B, #1A5F59, rgba(36, 131, 123, 0.03/0.1)
• May be used selectively for hero sections, navigation, or table of contents

Accessibility: Orange colors maintain proper contrast ratios (>7:1) for WCAG compliance.

Technical Implementation

CSS Targeting

Variants use CSS attribute selectors:

1
2

section[data-variant="cards"] { /* styles */ }
section[data-variant="numbered"] { /* styles */ }

Hugo Integration

These elements work with Hugo’s markdown processing and can be mixed with standard markdown content.

Responsive Behavior

All variants include responsive breakpoints:

• Desktop: Full layout with optimal spacing
• Tablet: Adjusted layouts for medium screens
• Mobile: Stacked layouts optimized for touch

Migration from Old System

Old Shortcode Pattern (deprecated):

{{< variant-cards >}}
### Title
Content...
{{< /variant-cards >}}

New Data-Attribute Pattern (current):

1
2
3
4
5
6

<section data-variant="cards">
<article>
<h3>Title</h3>
<p>Content...</p>
</article>
</section>

The new pattern avoids nested shortcode issues and provides cleaner, more semantic HTML output.

Best Practices

Semantic HTML

• Use <section> for variant containers
• Use <article> within cards for proper grouping
• Use <h3> for variant item titles
• Use <details> and <summary> for accordions

Content Guidelines

• Keep card content focused and scannable
• Use numbered variants for sequential processes
• Use definition variants for explanatory content
• Use timeline variants for chronological information

Accessibility

• All variants maintain proper heading hierarchy
• Interactive elements (accordions) are keyboard accessible
• Color is not the only means of conveying information
• Sufficient contrast ratios maintained

Technical Implementation

CSS Targeting

Variants use CSS attribute selectors:

1
2

section[data-variant="cards"] { /* styles */ }
section[data-variant="numbered"] { /* styles */ }

Hugo Integration

These elements work with Hugo’s markdown processing and can be mixed with standard markdown content.

Responsive Behavior

All variants include responsive breakpoints:

• Desktop: Full layout with optimal spacing
• Tablet: Adjusted layouts for medium screens
• Mobile: Stacked layouts optimized for touch

Migration from Old System

Old Shortcode Pattern (deprecated):

{{< variant-cards >}}
### Title
Content...
{{< /variant-cards >}}

New Data-Attribute Pattern (current):

1
2
3
4
5
6

<section data-variant="cards">
<article>
<h3>Title</h3>
<p>Content...</p>
</article>
</section>

The new pattern avoids nested shortcode issues and provides cleaner, more semantic HTML output.