Content model

Every Neighborhood component separates what it says from how it looks. Content goes into slots: the headlines, copy, calls to action and media. Settings are properties: the variant, surface, alignment and other options. The same split works on every platform, so a Neighborhood section maps the same way into Shopify, Bloomreach, Power Pages or a React site.

Slots and properties

Slots are named places for content. In HTML, you fill a slot by adding a slot attribute to the element that holds the content. The default slot takes content with no slot attribute.

<nbhd-headline-content surface="inverse">
  <nbhd-text slot="title" tag="h2" variant="title">Built to last</nbhd-text>
  <nbhd-cta slot="cta" href="/warranty">See the warranty</nbhd-cta>
</nbhd-headline-content>

Here, the title and the call to action are content, and surface="inverse" is a setting.

Properties are settings, written as attributes in HTML or as props in React. Most take a fixed set of values, such as primary or secondary.

A few components take lists of content as data instead of slots, such as the options in a Select or the products in a Product Card. Their component pages describe the shape of that data under a Structure heading.

In a CMS

When a component becomes a CMS section or content type, the split carries over:

• Slots become content fields that authors fill in: text fields for eyebrows and titles, rich text for body copy, link fields for calls to action and media fields for images and video.
• Properties become section settings or parameters, usually a dropdown or toggle for each one.
• Repeating content, such as the cards in a Card List, becomes a repeatable group of fields.

Platform setup covers each platform.

All components

Slot and property names link to each component's full reference.