rontodoc Style Guide

Header

Site header with navigation. Displays the ontology title and main navigation links.

Preview

{% include "components/header.html" %}

Template: templates/components/header.html

Hero

Large title section at the top of the page. Shows ontology name and description.

Preview

{% include "components/hero.html" %}

Template: templates/components/hero.html

Metadata Card

Displays ontology metadata in a structured card format. Shows IRI, version, and description.

Preview

{% include "components/metadata_card.html" %}

Template: templates/components/metadata_card.html

Sidebar Navigation

Collapsible navigation tree showing ontology structure. Displays classes and properties with counts.

Preview

Template: templates/components/sidebar.html

Namespace Table

Displays prefix/IRI namespace mappings. Includes copy-to-clipboard functionality for IRIs.

Preview

{% include "components/namespace_table.html" %}

Template: templates/components/namespace_table.html

Section Header

Section title with optional count badge and description. Used to introduce major content sections.

Preview

{%- let id = "classes" %} {%- let title = "Classes" %} {%- let count = Some(3) %} {%- let description = Some("All classes defined in this ontology.") %} {% include "components/section_header.html" %}

Template: templates/components/section_header.html

Class Card

Displays a single class with its IRI, description, superclass, subclasses, and associated properties.

Preview

{%- let id = sample_class.id %} {%- let label = sample_class.label %} {%- let iri = sample_class.iri %} {%- let description = sample_class.description %} {%- let superclass = sample_class.superclass %} {%- let subclasses = sample_class.subclasses %} {%- let properties = sample_class.properties %} {% include "components/class_card.html" %}

Template: templates/components/class_card.html

Property Card

Displays a property with its IRI, type (object/data), domain, range, and characteristics.

Preview - Object Property

{%- let id = sample_property.id %} {%- let label = sample_property.label %} {%- let iri = sample_property.iri %} {%- let property_type = sample_property.property_type %} {%- let description = sample_property.description %} {%- let domain = sample_property.domain %} {%- let range = sample_property.range %} {%- let characteristics = sample_property.characteristics %} {% include "components/property_card.html" %}

Preview - Data Property

{%- let id = sample_data_property.id %} {%- let label = sample_data_property.label %} {%- let iri = sample_data_property.iri %} {%- let property_type = sample_data_property.property_type %} {%- let description = sample_data_property.description %} {%- let domain = sample_data_property.domain %} {%- let range = sample_data_property.range %} {%- let characteristics = sample_data_property.characteristics %} {% include "components/property_card.html" %}

Template: templates/components/property_card.html

Individual Card

Displays a named individual with its IRI, type(s), and property values.

Preview

{%- let id = sample_individual.id %} {%- let label = sample_individual.label %} {%- let iri = sample_individual.iri %} {%- let description = sample_individual.description %} {%- let types = sample_individual.types %} {%- let property_values = sample_individual.property_values %} {% include "components/individual_card.html" %}

Template: templates/components/individual_card.html

Footer

Site footer with attribution. Appears at the bottom of every page.

Preview

{% include "components/footer.html" %}

Template: templates/components/footer.html

Design Tokens

CSS custom properties for colors, typography, and spacing used throughout the documentation.

Colors

Semantic Colors

Class

--color-class

Property

--color-property

Individual

--color-individual

Datatype

--color-datatype

Base Colors

Primary

--color-primary

Text

--color-text

Text Muted

--color-text-muted

Background

--color-bg-secondary

Typography

Preview

Heading (--text-3xl)

Subheading (--text-xl)

Body text (--text-base) with links and inline code.

Muted text (--text-sm)