chromium/ash/webui/common/resources/sea_pen/sea_pen_templates_element.html

<style include="wallpaper common">
  :host {
    overflow: hidden;
  }

  #templateHeading {
    margin-top: 18px;
  }

  iron-list {
    width: 100%;
  }

  .template-chip {
    border-bottom: 2px dotted white;
  }

  .template-info {
    font: var(--cros-body-1-font);
  }

  #templateTitle {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
    text-wrap: wrap;
  }

  wallpaper-grid-item[data-sea-pen-image]::part(text) {
    position: unset;
  }

  wallpaper-grid-item:hover::part(image) {
    filter: brightness(55%);
  }

  wallpaper-grid-item::part(textShadow) {
    background: linear-gradient(rgba(var(--google-grey-900-rgb), 0),
        rgba(var(--google-grey-900-rgb), 40%));
    height: 100%;
  }
</style>
<!-- TODO(b/308200616): Add real text -->
<h2 id="templateHeading" class="wallpaper-collections-heading">[[i18n('seaPenTemplateHeading')]]</h2>
<iron-list id="grid"
    items="[[seaPenTemplates_]]"
    as="template"
    grid
    aria-labelledby="templateHeading"
    aria-setsize$="[[seaPenTemplates_.length]]"
    role="listbox">
  <template>
    <wallpaper-grid-item
        class="sea-pen-template"
        index="[[index]]"
        data-sea-pen-image
        aria-posinset$="[[getAriaIndex_(index)]]"
        on-mouseout="onMouseOut_"
        on-mouseover="onMouseOver_"
        on-wallpaper-grid-item-selected="onTemplateSelected_"
        primary-text="[[template.title]]"
        role="option"
        src="[[template.preview]]"
        tabindex$="[[tabIndex]]">
        <div id="templateTitle" slot="text" class="primary-text">
          <template is="dom-if" if="[[shouldShowTemplateTitle_(template, hoveredTemplate_)]]">
            <template is="dom-repeat" items="[[getTemplateTokens_(template)]]" as="token">
              <template is="dom-if" if="[[isChip_(token)]]">
                <div class="template-chip template-info">
                  [[token.translation]]
                </div>
              </template>
              <template is="dom-if" if="[[!isChip_(token)]]">
                <div class="template-info">
                  [[token]]
                </div>
              </template>
            </template>
          </template>
          <template is="dom-if" if="[[!shouldShowTemplateTitle_(template, hoveredTemplate_)]]">
            [[template.title]]
          </template>
        </div>
      </template>
    </wallpaper-grid-item>
  </template>
</iron-list>