EU System

Comments

Documentation • Demo

Comments

Why and how to use this component

Allows users to comment.

When to use this component

  • blogposts
  • articles
{#
  Parameters:
    - "image" (object) (default: {}): image to display on the left
      - "src" (string): image's URL
      - "alt" (string): alt text
    - "author" (string) (default: ''): author's name
    - "date" (string) (default: ''): formatted date
    - "title" (object) (default: {}): comment's title, context for @ecl/eu-component-link
    - "body" (string) (default: ''): text of the comment
    - "operations" (object) (default: {}): object of operations (reply, edit, delete)
      - "delete" (object):
        - href (string)
        - label (string)
        - visible (boolean)
      - "edit" (object):
        - href (string)
        - label (string)
        - visible (boolean)
      - "reply" (object):
        - href (string)
        - label (string)
        - visible (boolean)
    - "extra_classes" (string) (default: '')
    - "extra_attributes" (array) (default: []): format: [
        {
          "name" (string) (default: ''),
          "value" (string) (default: '')
        },
        ...
      ]
    - "system" (string) (default: "generic")
#}

{% include '@ecl/generic-component-comment' with { system: 'eu' } %}
 
{
  "image": {
    "src": "https://unsplash.it/300/400?image=1005",
    "alt": "Martin's photo"
  },
  "author": "Martin (Not verified)",
  "date": "26 March 2015",
  "title": {
    "href": "../../example.html#",
    "label": "Nice article"
  },
  "body": "Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem eius enim eos error esse fugiat incidunt iste laudantium nemo, numquam quam quasi repudiandae sapiente soluta sunt tempore ullam voluptatem.",
  "operations": {
    "delete": {
      "href": "../../example.html#",
      "label": "Delete",
      "visible": true
    },
    "edit": {
      "href": "../../example.html#",
      "label": "Edit",
      "visible": true
    },
    "reply": {
      "href": "../../example.html#",
      "label": "Reply",
      "visible": true
    }
  }
}
 
<div class="ecl-row ecl-comment">
  <div class="ecl-comment__image-wrapper">
    <img class="ecl-image ecl-image--fluid ecl-comment__image" src="https://unsplash.it/300/400?image=1005" alt="Martin's photo">
  </div>
  <div class="ecl-comment__body">
    <div class="ecl-comment__meta">
      <span class="ecl-comment__author">Martin (Not verified)</span> |
      <span class="ecl-comment__date">26 March 2015</span>
    </div>

    <a class="ecl-link ecl-heading ecl-heading--h3 ecl-comment__title" href="../../example.html#">Nice article</a>
    <p class="ecl-paragraph ecl-comment__text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa dolorem eius enim eos error esse fugiat incidunt iste laudantium nemo, numquam quam quasi repudiandae sapiente soluta sunt tempore ullam voluptatem.</p>
    <ul class="ecl-list ecl-list--inline ecl-comment__operations">
      <li>

        <a class="ecl-link ecl-comment__reply" href="../../example.html#">Reply</a>
      </li>
      <li>

        <a class="ecl-link ecl-comment__edit" href="../../example.html#">Edit</a>
      </li>
      <li>

        <a class="ecl-link ecl-comment__delete" href="../../example.html#">Delete</a>
      </li>
    </ul>
  </div>
</div>
  • Content: 
    /**
 * Comments component
 * @define comment
 */

// Import base and generic
@import '@ecl/eu-base/eu-base';
@import '@ecl/generic-component-comment/generic-component-comment';

// Check if overridden dependencies are already loaded, if needed
@include check-imports(
  (
    'eu-style-image',
    'eu-style-typography-heading',
    'eu-style-typography-paragraph',
    'eu-style-typography-list'
  )
);

// Use generic mixin
@include exports('eu-component-comment') {
  @include ecl-comment();
}
  • URL: /components/raw/eu-component-comment/eu-component-comment.scss
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-comment/eu-component-comment.scss
  • Size: 497 Bytes
  • Handle: @ecl/eu-component-comment
  • Tags: molecule
  • Preview:
  • Filesystem Path: ../../src/systems/eu/eu-component/eu-component-comment/eu-component-comment.twig