Define a new composition

Uniform's Canvas and project map provide visual assembly of content and components, making it easy to re-use of your front-end components, design system, and style guide. The Canvas UI can guide a business and content team to create rich digital experiences (such as web pages) based upon assets you have created without relying on developers for routine tasks.

For this exercise you will configure your project to add a "JavaDrip articles" section to your site. During the lesson you will:


  1. Add a node for articles in the project map.
  2. Define a new composition that represents an article.
  3. Add new components to the composition.

The project map makes it easier for people to find compositions within the Uniform dashboard. You will add nodes that represent the composition you are creating.

  1. Navigate to Experience > Project Map.

    The name of the project map for this site is "Sitemap".
  2. In the row for the node Home, click > Add child node.

    The Add node dialog appears.
  3. Enter the following values:

    Path segmentStatic
    Node typePlaceholder

    About this step

    This creates a segment in your URLs that doesn't correspond to a page. There is no "articles" page in the site, but you want all of your article pages to have /articles/ in the URL.

  4. Click Save.

    You added a node under the "Home" node.
  5. Add the following node under the Articles node:

    NameThe Golden Ratio of Coffee
    Path segmentStatic
    Node typeComposition
  6. Click Save & open Canvas.

    A new composition is opened in Canvas. Validation errors appear because the page title is a required value that has not been set.
  7. Enter the following value for the parameter Page Title:

    The Golden Ratio of Coffee
    When the "Page Title" parameter is set, validation error messages disappear.
  8. Save the composition.

Now that you have your composition created, you will update the component in the slot defined on the composition. This component represents a hero, a component that typically appears "above the fold" on a website.

  1. Click the blue background image to select the Hero component.

    You can also select the component by opening the structure panel. Click and select The Golden Ratio of Coffee > PAGE CONTENT > Page Title.

    When the Hero component is selected, the right-hand side of the screen changes to reflect the parameters on the Hero component, rather than the composition.
  2. Set the following parameter values:

    SectionParameter nameValue
    Display VariantImage Right
    ContentTitleThe Golden Ratio of Coffee
    Presentation SettingsBackground ColorBlack
    The Hero component title is set and visible.
  3. For the parameter Description, enter the following value:

    Like all fine things in life, complex flavors rely on balance to really bring to life all the amazing tastes and sensations.
    The Hero component description is set and visible.
  1. For the parameter Image, click Edit.

    By default, a generic background image is selected.
  2. Click .

    The default image was removed.
  3. Click Add New.

  4. Click Uniform Asset Library > Custom.

    The "Custom" option is available under the "Uniform Asset Library" dropdown.

    About this step

    Selecting a custom image allows you to use an image without having to import it into the Uniform Asset Library.

  5. For the field URL, enter the following value:
    After you enter the image URL, the image is displayed.
  6. Click Done.

    The image is now displayed in the component.
  7. For the parameter Object Fit under the section Image Settings, select Contain.

    This parameter lets you control the CSS settings applied to the image.
  1. Scroll down the page and select the Breadcrumbs component.

    The Breadcrumbs component is located below the Hero component.
  2. Set the following parameter values:

    Parameter nameValue
    Display Root Nodechecked
    Display Placeholder Nodeschecked
    The "Articles" placeholder now appears in the breadcrumb trail.
  3. Save the composition.

Now you will add another component to the composition's slot. This component represents a block of text.

  1. Select the Breadcrumbs component.

  2. Click .

  3. Select the component Content.

  4. For the parameter Text, enter the following value:

    Water is essential for all life on earth, however we rely on a balance of water to sustain life. Too little and we dry up, too much and we flood. Now, I know what you are asking, what does WATER have to do with my COFFEE? Like all fine things in life, complex flavors rely on balance to really bring to life all the amazing tastes and sensations. The same applies to coffee, with its inability to cope with unbalanced or over balanced dosing. I tend to refer to coffee as being allergic to the 21st century, and if you thought hipsters were fussy about their coffee, you’ll be surprised to know that their coffee is WAY more fussy than they are! Here is a sneaky tip to help get the most out of your espresso shot! Lets focus on RATIOs. Specifically the WATER:COFFEE ratio in both your BASKET and your CUP! The Golden Ratios for Espresso are: * Basket - 2:1 * Cup - 7:1

A new composition is not available to visitors until it is published.

  1. Click Publish... to publish the composition.

  2. In a new browser tab, open http://localhost:3000/articles/the-golden-ratio-of-coffee

    The new, published composition.

    Notice that no code changes were required to create a new composition or to control its layout.