Skip to main content
Knowledge mapWhat are Web Device components?ArcBlock

You are here. See how this question connects to other ideas.

Select a node to open its page · Expand to read within the map

Knowledge mapFollow a connection. Understand a question.
← AFS and interfaces

One question

What are Web Device components?

Distinguish core primitives, Web-only types and theme components, then browse the default theme.

  1. Content recordProvides fields
  2. Page layoutPasses properties and slots
  3. Component implementationProduces structure and styles
  4. Rendered page
Relationship sketch · arrows show responsibilities and connections, not a complete protocol sequence.

Web Device theme components are reusable Web presentation implementations. For example, portal-header handles navigation, post-hero handles an article header, and content-card presents a content card. They are not additional core AUP primitives.

On an article page, a layout can choose post-hero for the title, author and cover, and detail-content for the body. The same header component serves many articles with different data.

Some components reserve named positions called slots. A body slot receives article content; a sidebar slot might receive related reading. The layout assigns content to positions; the component determines how those positions appear. A slot is not a separate data storage service.

In the implementation, manifest.json describes accepted properties, render.js produces output, and style.css supplies styling, with script.js for client interaction when needed. These files implement the reusable unit’s interface and behavior.

A site can define or override components in .web/components/. This Learning map is a site component too; the word map does not turn it into AUP’s geographic map primitive.

Follow this Learning page through the layers

This page separates several responsibilities:

  1. The content record holds the question, answer, body and related nodes. Editing an explanation changes content.
  2. The page layout sends the heading to the header mode of learning-map, places the body in the content slot, and sends related material to the same component’s detail mode. It composes the page.
  3. Component properties connect content to presentation. For example, title=$meta.name passes the current record’s name into the component’s title property; items=$source.nodes passes the result of a data source declared by the layout. $meta and $source are Web Device page lookups, not expressions that arbitrary JSON can execute.
  4. The component implementation determines heading typography, related-node arrangement and how the knowledge map responds to dragging. Those presentation and interaction changes belong in the site component.

This traces how content reaches a page. A button that changes a task’s status also needs an operation, state connections and authorization. Displaying a component does not establish that business-operation chain automatically.

What is in the default theme?

These 27 entries belong to the default-theme directory in the reviewed revision. This is not a universal inventory of all themes, sites or Web widgets. Sites can extend it.

ComponentPurpose
access-gatePreview or membership-access messaging in the content area
book-readerA page-by-page document reader
content-cardCards for articles, news or events
detail-contentCentered detail content with optional reading navigation
detail-sidebarA main content area with a sidebar
event-cardEvent listings with dates and status
event-heroEvent details with date, location and registration links
globeA WebGL globe
hero-bannerA homepage title, description and calls to action
key-padDirectional-key hints
leaf-shadowA moving light-and-shadow overlay
news-tickerScrolling news headlines
page-sectionsNamed content slots grouped into sections
page-stackNamed content slots stacked vertically
platform-stackA diagram of technology layers
portal-footerSite footer navigation
portal-headerSite-wide primary navigation
post-heroArticle title, author, date and cover
product-frameA frame for real product screenshots or terminal records
product-frame-galleryA responsive arrangement of product frames
product-heroThe opening section of a product page
product-showcaseProduct feature cards
related-contentRelated content
site-homeAn overall brand homepage presentation
tag-listLinked tags
tech-heroThe opening section of a technology page
technology-cardTechnology introduction cards

Keep three meanings separate

  • Core primitives are protocol types such as text and action.
  • Web-only AUP types are additional node types listed in AUP_WIDGETS; their presence does not establish cross-device support.
  • Web Device theme components are implementations composed into pages, such as portal-header, with interfaces declared by component manifests.

A name may appear in more than one directory. Identify its list, contract and runtime instead of classifying it by name alone.

Further reading

Technical documentation: read the full reference.

Check your understanding

Is portal-header a core AUP primitive?

No. It is a Web Device theme component with a manifest and Web implementation, composed by page layouts.

Continue along a learning path