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:

Add nodes to project map#

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. In Uniform, navigate to the Project Map.

2. Add a new child node under the Home node:

   Field	Value
   Name	Articles
   Path segment	Static [no changes necessary]
   Node type	Placeholder

   

3. Add a new child node under the Articles node:

   Field	Value
   Name	The Golden Ratio of Coffee
   Path segment	Static [no changes necessary]
   Node type	Composition
   Composition	Page

4. Click Save & open Canvas.

   

   Your new composition on opening Canvas

5. Enter "The Golden Ration of Coffee" in Canvas. This is a required field.

   

   The page title parameter field

Update Hero component to 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. In the slot PAGE CONTENT, select the Hero component.

2. Set the following parameter values:

   Name	Value
   Title	The Golden Ratio of Coffee
   Display Variant	Image Right

3. For the parameter Description, set the following value:

   CopyCopied!Wrap

4. For the parameter Image, set the following value:

   CopyCopied!Wrap

5. Select the breadcrumb component and select the following items in the parameter panel. Set the following parameters to:

   • Display Root Node [true]
   • Display Placeholder Notes [true]
   • Separator [Chevron]

Add Content component to the composition#

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

1. Under the Breadcrumb component, add a new Content component.
2. For the parameter Text, set the following value:
   CopyCopied!Wrap

Publish & test the composition#

Finally, you will publish the composition so visitors can access it.

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

   The new, completed composition.