<div class="quote-comments ">
    <div class="quote-comments__list">
        <div class="quote-comments__item">
            <date class="quote-comments__date">
                Jan 21, 2020, 2:15:40 PM
            </date>
            <span class="quote-comments__author">
                Author name
            </span>
            <div class="quote-comments__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin urna eget dolor ultricies pulvinar. Maecenas erat purus, facilisis ut justo sit amet, sollicitudin condimentum nisi.</p>
            </div>
            <div class="quote-comments__attachments">
                <ul class="list list--horizontal quote-comments__attachments-list">
                    <li class="list__item ">
                        <a href="#" class="
                        link
                        
                    ">
                            Lorem ipsum
                        </a>
                    </li>
                    <li class="list__item ">
                        <a href="#" class="
                        link
                        
                    ">
                            Lorem ipsum
                        </a>
                    </li>
                </ul>

            </div>
        </div>
        <div class="quote-comments__item">
            <date class="quote-comments__date">
                Jan 21, 2020, 2:15:40 PM
            </date>
            <span class="quote-comments__author">
                Author name
            </span>
            <div class="quote-comments__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin urna eget dolor ultricies pulvinar. Maecenas erat purus, facilisis ut justo sit amet, sollicitudin condimentum nisi.</p>
            </div>
        </div>
        <div class="quote-comments__item">
            <date class="quote-comments__date">
                Jan 21, 2020, 2:15:40 PM
            </date>
            <span class="quote-comments__author">
                Author name
            </span>
            <div class="quote-comments__content">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin urna eget dolor ultricies pulvinar. Maecenas erat purus, facilisis ut justo sit amet, sollicitudin condimentum nisi.</p>
            </div>
            <div class="quote-comments__attachments">
                <ul class="list list--horizontal quote-comments__attachments-list">
                    <li class="list__item ">
                        <a href="#" class="
                        link
                        
                    ">
                            Lorem ipsum
                        </a>
                    </li>
                    <li class="list__item ">
                        <a href="#" class="
                        link
                        
                    ">
                            Lorem ipsum
                        </a>
                    </li>
                </ul>

            </div>
        </div>
    </div>
</div>
<div class="quote-comments {{ class }}" {{{ attributes }}}>
    <div class="quote-comments__list">
        {{#each comments as |comment|}}
            <div class="quote-comments__item">
                <date class="quote-comments__date">
                    {{ date }}
                </date>
                <span class="quote-comments__author">
                    {{ author }}
                </span>
                <div class="quote-comments__content">
                    {{{ content }}}
                </div>
                {{#if attachments }}
                    <div class="quote-comments__attachments">
                        {{ render '@list--link' attachments merge="true" }}
                    </div>
                {{/if}}
            </div>
        {{/each}}
    </div>
</div>
{
  "comments": [
    {
      "date": "Jan 21, 2020, 2:15:40 PM",
      "author": "Author name",
      "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin urna eget dolor ultricies pulvinar. Maecenas erat purus, facilisis ut justo sit amet, sollicitudin condimentum nisi.</p>",
      "attachments": {
        "class": "list--horizontal quote-comments__attachments-list"
      }
    },
    {
      "date": "Jan 21, 2020, 2:15:40 PM",
      "author": "Author name",
      "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin urna eget dolor ultricies pulvinar. Maecenas erat purus, facilisis ut justo sit amet, sollicitudin condimentum nisi.</p>"
    },
    {
      "date": "Jan 21, 2020, 2:15:40 PM",
      "author": "Author name",
      "content": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi sollicitudin urna eget dolor ultricies pulvinar. Maecenas erat purus, facilisis ut justo sit amet, sollicitudin condimentum nisi.</p>",
      "attachments": {
        "class": "list--horizontal quote-comments__attachments-list"
      }
    }
  ]
}
  • Content:
    $quote-comments__item-margin        : 0 0 $spacer--large 0 !default;
    $quote-comments__item-padding       : 0 0 $spacer--large 0 !default;
    $quote-comments__item-border        : $border-base !default;
    $quote-comments__item-border-width  : 0 0 $border-width-base 0 !default;
    
    $quote-comments__date-font-size     : $font-size-medium !default;
    $quote-comments__date-line-height   : 32px !default;
    $quote-comments__date-margin        : 0 !default;
    $quote-comments__date-padding       : 0 !default;
    
    $quote-comments__author-font-size   : $font-size-medium !default;
    $quote-comments__author-font-weight : $font-weight-bold !default;
    $quote-comments__author-line-height : 32px !default;
    $quote-comments__author-margin      : 0 0 $spacer !default;
    $quote-comments__author-padding     : 0 !default;
    
    $quote-comments__content-font-size  : $font-size-medium !default;
    $quote-comments__content-line-height: 32px !default;
    $quote-comments__content-margin     : 0 !default;
    $quote-comments__content-padding    : 0 !default;
    
    .quote-comments {
        &__item {
            display: flex;
            flex-direction: column;
            margin: $quote-comments__item-margin;
            padding: $quote-comments__item-padding;
            border: $quote-comments__item-border;
            border-width: $quote-comments__item-border-width;
        }
    
        &__date {
            font-size: $quote-comments__date-font-size;
            line-height: $quote-comments__date-line-height;
            margin: $quote-comments__date-margin;
            padding: $quote-comments__date-padding;
        }
    
        &__author {
            font-size: $quote-comments__author-font-size;
            font-weight: $quote-comments__author-font-weight;
            line-height: $quote-comments__author-line-height;
            margin: $quote-comments__author-margin;
            padding: $quote-comments__author-padding;
        }
    
        &__content {
            font-size: $quote-comments__content-font-size;
            line-height: $quote-comments__content-line-height;
            margin: $quote-comments__content-margin;
            padding: $quote-comments__content-padding;
    
            p {
                margin: 0;
            }
        }
    }
    
  • URL: /components/raw/quote-comments/_comments.scss
  • Filesystem Path: build/components/Organisms/b2b/quote/comments/_comments.scss
  • Size: 2.1 KB

No notes defined.