UHasselt Component Library

PollResultItem 

<div class='poll-result'>
    <div class='poll-result-header'>
        <span class="icon fas fa-chart-bar   " aria-hidden="true"></span>

        <h3 class="heading poll-result-header-title">
            Resultaten poll
        </h3>
    </div>

    <div class='poll-result-body'>
        <p class='poll-result-body-date'>
            23/04/2022
        </p>

        <h4 class="heading poll-result-body-question">
            Binnenkort kunnen we allen weer naar kantoor. Hoe zou jij in de toekomst thuiswerk graag combineren met dagen op kantoor?
        </h4>

        <div class='poll-result-item'>
            <div class='poll-result-item-answer'>
                Kantoor
            </div>

            <div class='poll-result-item-result'>
                <div class='poll-result-item-result-title'>
                    23109 Stemmen
                </div>

                <div class='poll-result-item-result-bar' style='width:50%;'>
                </div>
            </div>
        </div>
        <div class='poll-result-item'>
            <div class='poll-result-item-answer'>
                semiflexibel
            </div>

            <div class='poll-result-item-result'>
                <div class='poll-result-item-result-title'>
                    5648 Stemmen
                </div>

                <div class='poll-result-item-result-bar' style='width:35%;'>
                </div>
            </div>
        </div>
        <div class='poll-result-item'>
            <div class='poll-result-item-answer'>
                Flexible
            </div>

            <div class='poll-result-item-result'>
                <div class='poll-result-item-result-title'>
                    2354 Stemmen
                </div>

                <div class='poll-result-item-result-bar' style='width:15%;'>
                </div>
            </div>
        </div>

    </div>
</div>
 
<div class='poll-result'>
    <div class='poll-result-header'>
        {{render '@icon' header.icon}}

        {{render '@heading' header.title}}
    </div>

    <div class='poll-result-body'>
        <p class='poll-result-body-date'>
            {{date}}
        </p>

        {{render '@heading' question}}

        {{#each results as |result|}}
            {{render '@poll-result-item' result}}
        {{/each}}

    </div>
</div>
 
{
  "header": {
    "icon": {
      "style": "fas",
      "icon": "fa-chart-bar"
    },
    "title": {
      "text": "Resultaten poll",
      "tag": "h3",
      "modifier": "poll-result-header-title"
    }
  },
  "question": {
    "text": "Binnenkort kunnen we allen weer naar kantoor. Hoe zou jij in de toekomst thuiswerk graag combineren met dagen op kantoor?",
    "tag": "h4",
    "modifier": "poll-result-body-question"
  },
  "date": "23/04/2022",
  "results": [
    {
      "answer": "Kantoor",
      "votes": "23109 Stemmen",
      "percent": "50%"
    },
    {
      "answer": "semiflexibel",
      "votes": "5648 Stemmen",
      "percent": "35%"
    },
    {
      "answer": "Flexible",
      "votes": "2354 Stemmen",
      "percent": "15%"
    }
  ]
}
  • Content: 
    .poll-result {
    .poll-result-header {
        display: flex;
        align-items: center;
        padding-bottom: 8px;
        border-bottom: 1px solid #ffffff;
        margin-bottom: 16px;

        .icon,
        .poll-result-header-title {
            @apply text-white;
        }

        .icon {
            margin-right: 8px;
        }

        .poll-result-header-title {
            margin-bottom: 0;
        }
    }

    .poll-result-body-question,
    .poll-result-body-date {
        @apply text-white;
    }

    .poll-result-body-date {
        color: #f3adad;
        margin-bottom: 8px;
    }
}
  • URL: /components/raw/poll-result/poll-result.css
  • Filesystem Path: src\components\04-organisms\poll-result\poll-result.css
  • Size: 644 Bytes

No notes defined.