Статичные отзывы

<ya-kit-section-layout
    palette={{settings.palette}}
    padding-top={{settings.section.paddingTop}}
    padding-bottom={{settings.section.paddingBottom}}
    h-padding-desktop={{settings.section.hPaddingDesktop}}
    h-padding-mobile={{settings.section.hPaddingTouch}}
    is-fullscreen={{settings.section.isFullscreen}} 
>
    <ya-kit-section-layout-row>
        <ya-kit-section-title align="{{settings.titleAlign}}" text="{{settings.titleText}}" /> 
    </ya-kit-section-layout-row>
    <ya-kit-section-layout-row> 
        <ya-kit-carousel class="carousel" columns="3" columns-touch="1" h-gap="500" controls-alignment="none">
            {{#each settings.modules as |module|}}
                <ya-kit-module module-id={{module.id}} class="quote {{skinRounded 150}}">
                    <ya-kit-v-stack class="quote__content" align-items="stretch" gap="200">
                        <ya-kit-h-stack class="quote__rating" gap="50">
                            {{#repeat 5 as |index|}}
                                {{#if (gt module.rating index)}}
                                    <svg class="quote__rating-icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1">
                                        <path d="M12 17.27 18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"></path>
                                    </svg>
                                {{else}}
                                    <svg class="quote__rating-icon" focusable="false" aria-hidden="true" viewBox="0 0 24 24" tabindex="-1">
                                        <path d="m22 9.24-7.19-.62L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21 12 17.27 18.18 21l-1.63-7.03zM12 15.4l-3.76 2.27 1-4.28-3.32-2.88 4.38-.38L12 6.1l1.71 4.04 4.38.38-3.32 2.88 1 4.28z"></path>
                                    </svg>
                                {{/if}}
                            {{/repeat}}
                        </ya-kit-h-stack>
                        <ya-kit-text class="quote__title" weight="semibold" size="lg">{{module.title}}</ya-kit-text> 
                        <ya-kit-text class="quote__description">{{module.description}}</ya-kit-text> 
                        <ya-kit-v-stack as="footer" class="quote__footer" align-items="stretch" gap="50">
                            <ya-kit-text weight="bold">{{module.author}}</ya-kit-text>
                            {{#if module.caption}}
                            	<ya-kit-text color="secondary">{{module.caption}}</ya-kit-text>
                            {{/if}}
                        </ya-kit-v-stack>
                    </ya-kit-v-stack> 
            	</ya-kit-module>
            {{/each}}
        </ya-kit-carousel>
    </ya-kit-section-layout-row>
</ya-kit-section-layout>

.quote {
    background-color: var(--ys-background-neutral);
    border-radius: var(--ys-current-skin-border-radius);
    overflow: hidden;
}

.quote__content {
    height: 100%;
    padding: var(--ys-spacing-500);
}

.quote__rating-icon {
    width: 18px;
    fill: #f99e31;
}

.quote__footer {
    margin-top: auto;
}

.quote__description::before,
.quote__description::after {
   content: '"'; 
}


@media screen and (max-width: 767px) {
    .carousel [data-carousel-track='true'] {
      	--ys-carousel-offset: 0px;
    }	
}

  1
  2{
  3  "title": "",
  4  "type": "object",
  5  "properties": {
  6    "palette": {
  7      "$ref": "#/definitions/Palette",
  8      "title": "Палитра цветов"
  9    },
 10    "titleText": {
 11      "type": "string",
 12      "title": "Заголовок"
 13    },
 14    "titleAlign": {
 15      "$ref": "#/definitions/SectionTitleAlign",
 16      "title": "Расположение заголовка"
 17    },
 18    "section": {
 19      "type": "object",
 20      "title": "Размеры секции",
 21      "required": [
 22        "isFullscreen",
 23        "paddingTop",
 24        "paddingBottom"
 25      ],
 26      "properties": {
 27        "isFullscreen": {
 28          "$ref": "#/definitions/OptionalFlag",
 29          "title": "Растянуть секцию на весь экран"
 30        },
 31        "hPaddingDesktop": {
 32          "$ref": "#/definitions/SectionHPadding",
 33          "title": "Отступ по краям на десктопе"
 34        },
 35        "hPaddingMobile": {
 36          "$ref": "#/definitions/SectionHPaddingTouch",
 37          "title": "Отступ по краям на телефоне"
 38        },
 39        "paddingTop": {
 40          "$ref": "#/definitions/SectionVPadding",
 41          "title": "Отступ над секцией"
 42        },
 43        "paddingBottom": {
 44          "$ref": "#/definitions/SectionVPadding",
 45          "title": "Отступ под секцией"
 46        }
 47      }
 48    },
 49    "modules": {
 50      "type": "array",
 51      "items": {
 52        "type": "object",
 53        "properties": {
 54          "title": {
 55            "type": "string",
 56            "title": "Заголовок",
 57            "default": ""
 58          },
 59          "description": {
 60            "$ref": "#/definitions/TextArea",
 61            "title": "Описание",
 62            "default": ""
 63          },
 64          "rating": {
 65            "title": "Рейтинг",
 66            "type": "number",
 67            "step": 1,
 68            "minimum": 1,
 69            "maximum": 5,
 70            "default": 5
 71          },
 72          "author": {
 73            "type": "string",
 74            "title": "Автор",
 75            "default": ""
 76          },
 77          "caption": {
 78            "type": "string",
 79            "title": "Подпись",
 80            "default": ""
 81          }
 82        },
 83        "required": [
 84          "title",
 85          "description",
 86          "rating",
 87          "author",
 88          "caption"
 89        ]
 90      },
 91      "title": "Отзыв"
 92    }
 93  },
 94  "required": [
 95    "titleAlign",
 96    "titleText",
 97    "section",
 98    "modules"
 99  ]
100}
101