bulma + Fontawesome

by Hugo Lopez

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
<script src="https://use.fontawesome.com/releases/v5.1.0/js/all.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">




<div class="modal is-active" :class="{'is-active' :showModal}">
  <div class="modal-background"></div>
  <div class="modal-content">
    <div class="message is-danger">
      <div class="message-header">
        Important informations <button class="delete" @click="redirect" aria-label="close" ></button>
      </div>
      <div class="message-body has-text-black">
        <p>You completed the creation and configuration of a peers grading activity successfully !</p>
        <br>
        <h3 class="title is-6">Where is my activity ? Can I edit it ?</h3>
        <p>
          <span class="icon"><i class="fas fa-pencil-alt fa-1x" aria-hidden="true"></i></span> You can edit participants, options and the rubric using this link & password.<br>
          <span class="icon"><i class="fas fa-link fa-1x" aria-hidden="true"></i></span> Activity's link is : {{modalInfo.activityPath}}<br>
          <span class="icon"><i class="fas fa-key fa-1x" aria-hidden="true"></i></span> Master password is : {{modalInfo.activityPassword}}<br>

        </p><br>
        <h3 class="title is-6">How do I <i>really</i> start the activity with my participants ?</h3>
        <p><span class="icon"><i class="fas fa-clock fa-1x" aria-hidden="true"></i></span> On D-day, gather your participants, identify additional or missing ones.<br>
          <span class="icon"><i class="fa fa-users user-check fa-1x" aria-hidden="true"></i></span> Update the participants' list, thanks to the link & master password above.<br> 
          <span class="icon"><i class="fas fa-truck-monster fa-1x" aria-hidden="true"></i></span> Everyone's optimal planning...