star_half_filled¶

The star_half_filled macro is used to render a half filled star icon.

Definition¶

{% star_half_filled(options = { size: 'l', isHoverable: false }) %}

Input parameters¶

options¶

object represents an object of star half filled options

Option key	Type	Default	Required	Description
options.size	`string`	`l`	no	The size of the star, allowed values are `l`, `xl`, `xxl`
options.isHoverable	`boolean`	false	no	If set to `true` add appropriate styling class making the star hoverable

Example¶

In this example we render a basic half filled star.

{% from "@macros/star_half_filled.twig" import star_half_filled %}

{{ star_half_filled() }}

Example¶

In this example we render a hoverable half filled star with a different size.

{% from "@macros/star_half_filled.twig" import star_half_filled %}

{{ star_half_filled({ size: 'xl', isHoverable: true }) }}

Macro source code¶

{% macro star_half_filled(options = {size: 'l', isHoverable: false}) %}
    <svg aria-hidden="true" class="icon icon_{{ options.size }} icon_no-stroke star-icon star-icon_filled{% if options.isHoverable %} star-icon_hoverable{% endif %}" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M11.1033 3.81663C11.4701 3.07346 12.5299 3.07346 12.8967 3.81663L14.8576 7.78909C15.0031 8.08394 15.2843 8.2884 15.6096 8.33595L19.9962 8.97712C20.8161 9.09696 21.1429 10.1048 20.5493 10.683L17.3768 13.773C17.1409 14.0027 17.0333 14.3339 17.0889 14.6584L17.8374 19.0226C17.9775 19.8396 17.12 20.4626 16.3864 20.0767L12.4655 18.0148C12.1741 17.8615 11.8259 17.8615 11.5345 18.0148L7.61363 20.0767C6.88 20.4626 6.02245 19.8396 6.16257 19.0226L6.91109 14.6584C6.96675 14.3339 6.85908 14.0027 6.62321 13.773L3.45068 10.683C2.85708 10.1048 3.18387 9.09696 4.00378 8.97712L8.39037 8.33595C8.71572 8.2884 8.99691 8.08394 9.14245 7.78909L11.1033 3.81663Z" />
        <mask id="mask0_1656_17170" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
        <path d="M11.1033 3.81663C11.4701 3.07346 12.5299 3.07346 12.8967 3.81663L14.8576 7.78909C15.0031 8.08394 15.2843 8.2884 15.6096 8.33595L19.9962 8.97712C20.8161 9.09696 21.1429 10.1048 20.5493 10.683L17.3768 13.773C17.1409 14.0027 17.0333 14.3339 17.0889 14.6584L17.8374 19.0226C17.9775 19.8396 17.12 20.4626 16.3864 20.0767L12.4655 18.0148C12.1741 17.8615 11.8259 17.8615 11.5345 18.0148L7.61363 20.0767C6.88 20.4626 6.02245 19.8396 6.16257 19.0226L6.91109 14.6584C6.96675 14.3339 6.85908 14.0027 6.62321 13.773L3.45068 10.683C2.85708 10.1048 3.18387 9.09696 4.00378 8.97712L8.39037 8.33595C8.71572 8.2884 8.99691 8.08394 9.14245 7.78909L11.1033 3.81663Z" fill="#FFC107"/>
        </mask>
        <g mask="url(#mask0_1656_17170)">
        <rect x="12" y="3" width="9" height="18" fill="#E2E5E9"/>
        </g>
    </svg>
{% endmacro %}

Macro reference¶

star_score