Skip to main content

Component Usage Guides

These guides explain how to use the various components available for creating rich, interactive content in IFLA standards documentation.

📊 Data Display Components​

VocabularyTable​

Display controlled vocabularies with advanced features including:

  • Multi-language support
  • Search and filtering
  • CSV import capability
  • Customizable display options

ExampleTable​

Present examples in a structured, searchable format:

  • Consistent example formatting
  • Metadata support
  • Easy comparison between examples

Examples & Example​

Create structured, accessible example sections:

  • Collapsible example containers
  • Property-value table generation
  • Support for complex content
  • Full example page linking

Figure​

Add images and diagrams with proper formatting:

  • Automatic captions
  • Accessibility features
  • Responsive sizing
  • Dark mode support

🔗 Navigation Components​

ElementReference​

Create semantic references to standard elements:

  • Auto-generated links
  • Consistent formatting
  • Tooltip previews

Internal navigation within your documentation:

  • Smart path resolution
  • Active state indicators
  • Breadcrumb support

External links with security and accessibility:

  • Automatic security attributes
  • Visual indicators for external links
  • WCAG compliance

SeeAlso​

Cross-references and related content:

  • Organized reference lists
  • Multiple reference types
  • Consistent formatting

📋 Constraint & Structure Components​

MandatoryUnique​

Document field constraints clearly:

  • Visual indicators for mandatory fields
  • Uniqueness constraint notation
  • Accessibility support

Steps​

Create structured procedural content:

  • Configurable multi-level numbering
  • Semantic list markup
  • Support for complex nested content
  • Accessibility-compliant navigation

🎯 Best Practices​

Component Selection​

  • Use VocabularyTable for any controlled list of terms
  • Use ExampleTable when showing multiple related examples
  • Use Figure for all images to ensure accessibility
  • Use ElementReference when referring to other parts of the standard

Accessibility​

All components are designed with accessibility in mind:

  • Proper ARIA labels
  • Keyboard navigation support
  • Screen reader compatibility
  • High contrast support

Internationalization​

Components support multiple languages:

  • RTL language support
  • Translatable UI elements
  • Multi-language content display

💻 Quick Start​

To use any component in your MDX file:

---
title: My Document
---

import { VocabularyTable, Figure, OutLink, Examples, Example, Steps } from '@ifla/theme';

# My Document

<VocabularyTable 
  vocabularyId="my-vocab"
  concepts={[
    { value: "term1", definition: "Definition 1" },
    { value: "term2", definition: "Definition 2" }
  ]}
/>

<Examples summary="Property Examples">
  <Example
    properties={[
      { property: "has category of carrier", value: '"volume"' },
      { property: "has extent", value: '"1 volume (306 pages)"' }
    ]}
    fullExampleHref="/docs/examples/manifestation"
  />
</Examples>

<Steps>
  <ol>
    <li>Initial assessment</li>
    <li>Record mandatory elements</li>
    <li>Add optional information</li>
  </ol>
</Steps>

<Figure 
  src="/img/diagram.png" 
  alt="Architecture diagram"
  caption="System architecture overview"
/>

<OutLink href="https://ifla.org">IFLA Website</OutLink>

🚀 Advanced Usage​

Custom Styling​

Most components accept a className prop for custom styling:

<VocabularyTable 
  className="my-custom-vocabulary"
  {...props}
/>

Component Composition​

Components can be combined for complex layouts:

<Figure src="/img/vocab-diagram.png">
  <VocabularyTable 
    vocabularyId="diagram-terms"
    concepts={diagramVocabulary}
  />
</Figure>

📚 Learning Path​

  1. Start with VocabularyTable - Most commonly used
  2. Learn Figure - Essential for visual content
  3. Master navigation with InLink and OutLink
  4. Add rich features with remaining components

Need help with a specific component? Each guide includes detailed examples and troubleshooting tips.