Components

A component is the building block of a page: a small, reusable unit that holds its own editable settings and can pull values from services. A component is not tied to its own HTML. Instead a UI Framework supplies the view that renders it, so the same component can look different across sites and brands.

What a component is

Components are how content is assembled on a Kestros page. Each one is reusable and can expose configurable properties that an author edits through a dialog, and it can read values from back-end services when it needs data beyond what the author supplies.

The defining trait of a Kestros component is that it is decoupled from its markup. A component does not ship the HTML that renders when it is placed on a page. That markup comes from a view, and a UI Framework can provide a view per component that dictates how it renders. This separation is what lets one set of components serve many looks: change the framework, not the components.

Anatomy of a component

At its core a component is a set of resources under a component folder. Four parts make up a component:

Part	What it is
Definition resource	The component node itself, a `kes:ComponentType`. It declares what the component is: its title and how the system identifies it.
Dialog	The component’s editable settings, the fields an author fills in to configure an instance. See Dialogs.
Sling Model	The component’s logic. Usually present: it reads the configured properties and any service data, and exposes them to the view. Simple components may not need one.
View(s)	How the component looks. One or more HTL views render the component. A `common` view acts as the built-in fallback, and a UI Framework can supply its own. See Component Views.

On disk a component is a folder whose name is the component, holding the definition, the model-backed logic, and its views. For example the out-of-the-box text component:

component folder

.../components/content/text/       # the component folder
  .content.xml                    # definition resource (kes:ComponentType)
  common/
    content.html                # the built-in fallback view (HTL)

The definition resource is a kes:ComponentType node. At its simplest it declares the component’s primary type and a title:

text/.content.xml

<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0"
          xmlns:kes="http://kestros.io/kes/1.0"
          jcr:primaryType="kes:ComponentType"
          jcr:title="Text"/>

You only need to author each part when your component uses it. A component always needs a definition resource; the dialog, Sling Model, and additional views are added as the component grows. Building one end to end is covered in Custom Components.

Out of the box components

Kestros ships a set of ready-to-use components so a project can build pages without writing any components first. The authoritative, current list is the components page in your running Kestros instance, which reflects exactly what is installed. The table below groups the common built-ins by role.

Component	Usage
Content
Alert	Displays alert messages at various severity levels
Button	Basic button and call-to-action
Button Group	Group of buttons and call-to-actions
Card	Card-style content container
Code	Renders code snippets
Heading	Heading with configurable text and heading level
Image	Includes image assets
Link	A single hyperlink
Richtext	Formatted, stylized text blocks
Text	Basic text component
Video	Includes video assets
Video Embed	Embeds video from an external provider
Lists
Card List	A list rendered as cards
Link List	A list of links
Navigation
Breadcrumbs	Shows a page’s location within the navigation hierarchy
Navigation	Navigation list of child pages from a specified root page
Top Navigation	Site-level top navigation bar
Top Navigation Item	A single entry within the top navigation
Structure
Accordion	Expandable, collapsible content sections
Accordion Panel	A single panel within an accordion
Layout
Container	Base-level container for other components, including the grid
Grid	Grid for multi-column layouts
Section	Section that can hold inherited content

The exact set of built-in components and their names change between releases. Treat this table as a guide for 0.9.0 and confirm the current set on your instance’s components page before relying on a specific component.

To learn how these components render, see Component Views. To build your own, see Custom Components.