Ribbon: basic

Ribbons are typical inline templates being inserted to a <div> container on the client's end. All styles, animation effects, and other magic should also be described on the client's end. Usually, the element sticks to the page bottom (or top — up to you) and looks like a narrow strip with a catchy copy and a CTA. To get a clearer idea of what it is, please see the demo.

DemoTo return from the demo page, please use the browser Back button. We were trying to make the demo as close to real life as possible, and did not provide any link to go back intentionally.

How-to

Setting up a template

There're 2 ways to set up an inline template: on your end or in Composer.

Speaking about ribbons specifically. Since you want the container to be "glued" to the top/bottom of your page, you need to add these styles to its class (the example class here is called .piano-container) in your CSS:

  .piano-container {
    position: fixed;
    /* for bottom position */
    bottom: 0;
    left: 0;
    width: 100%;
    /* shadow is an optional property */
    box-shadow: 0 0 28px 0 rgba(51, 51, 51, 0.1);
  }

To position the ribbon at the top of you page, replace "bottom" with "top" in the sample above (line 4). Also, shadow (.box-shadow property, line 8) is optional. However, it helps a user distinguish the ribbon from the rest of the content. This role could be also played by a contrast background color or a border.

When applicable, order your layers properly by adjusting the z-index property.

Specifying the template size

Piano inline templates simply take 100% of the parent container width. By parent container we mean the <div> you specify on your end for the Piano template to show up. Regarding its height, the browser counts it automatically according to the template content. So nothing needs to be defined. Instead, just let Piano the template be parsed freely — things like setting up a fixed height would prevent it from displaying correctly.