UHasselt Component Library

Poll 

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

        <h3 class="heading poll-header-title">
            Poll van de dag
        </h3>
    </div>

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

        <form>
            <div class='mb-4'>
                <div class="atm-form-radiobutton radio-inverted text-description">
                    <input type="radio" class="form-radio" id="answers-1" name="description">
                    <label class="form-radio-label" for="answers-1">
                        <div class="form-radio-label-title">
                            Kantoor
                        </div>

                        <div class="form-radio-description">
                            Thuiswerk was niet helemaal mijn ding, ik ga graag terug full-time naar kantoor.
                        </div>
                    </label>
                </div>
            </div>
            <div class='mb-4'>
                <div class="atm-form-radiobutton radio-inverted text-description">
                    <input type="radio" class="form-radio" id="answers-2" name="description">
                    <label class="form-radio-label" for="answers-2">
                        <div class="form-radio-label-title">
                            Semi-flexibel
                        </div>

                        <div class="form-radio-description">
                            Het zou fijn zijn om toch zeker enkele vaste dagen met alle collega’s op kantoor te zijn, en enkele vaste dagen de mogelijkheid hebben om allen thuis te werken.
                        </div>
                    </label>
                </div>
            </div>
            <div class='mb-4'>
                <div class="atm-form-radiobutton radio-inverted text-description">
                    <input type="radio" class="form-radio" id="answers-3" name="description">
                    <label class="form-radio-label" for="answers-3">
                        <div class="form-radio-label-title">
                            Flexibel
                        </div>

                        <div class="form-radio-description">
                            Ik behoud het liefst veel flexibiliteit, en beslis graag zelf wanneer ik naar kantoor kom, of thuis werk.
                        </div>
                    </label>
                </div>
            </div>

            <button type="submit" title="Stem" id="stem" class="button button-black poll-submit ">
                <span>
                    <span class="text">
                        Stem
                    </span>
                </span>
            </button>

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

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

    <div class='poll-body'>
        {{render '@heading' question}}

        <form>
            {{#each answers as |answer|}}
                <div class='mb-4'>
                    {{render '@radiobutton--radio-inverted' answer}}
                </div>
            {{/each}}

            {{render '@button' submit}}
        </form>
    </div>
</div>
 
{
  "header": {
    "icon": {
      "style": "fas",
      "icon": "fa-chart-bar"
    },
    "title": {
      "text": "Poll van de dag",
      "tag": "h3",
      "modifier": "poll-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-body-question"
  },
  "answers": [
    {
      "modifier": "radio-inverted text-description",
      "description": "Thuiswerk was niet helemaal mijn ding, ik ga graag terug full-time naar kantoor.",
      "name": "description",
      "id": "answers-1",
      "label": {
        "for": "answers-1",
        "text": "Kantoor"
      }
    },
    {
      "modifier": "radio-inverted text-description",
      "description": "Het zou fijn zijn om toch zeker enkele vaste dagen met alle collega’s op kantoor te zijn, en enkele vaste dagen de mogelijkheid hebben om allen thuis te werken.",
      "name": "description",
      "id": "answers-2",
      "label": {
        "for": "answers-2",
        "text": "Semi-flexibel"
      }
    },
    {
      "modifier": "radio-inverted text-description",
      "description": "Ik behoud het liefst veel flexibiliteit, en beslis graag zelf wanneer ik naar kantoor kom, of thuis werk.",
      "name": "description",
      "id": "answers-3",
      "label": {
        "for": "answers-3",
        "text": "Flexibel"
      }
    }
  ],
  "submit": {
    "modifier": "black poll-submit",
    "text": "Stem",
    "element": "button",
    "type": "submit",
    "title": "Stem",
    "id": "stem",
    "iconBefore": false
  }
}
  • Content: 
    .poll {
    .poll-header {
        display: flex;
        align-items: center;
        padding-bottom: 8px;
        border-bottom: 1px solid #ffffff;
        margin-bottom: 16px;

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

        .icon {
            margin-right: 8px;
        }

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

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

    .poll-submit {
        display: block;
        margin-bottom: 0;
        width: 100%;
    }
}
  • URL: /components/raw/poll/poll.css
  • Filesystem Path: src\components\04-organisms\poll\poll.css
  • Size: 590 Bytes

No notes defined.