Feedback

<div class="Feedback" role="alert">
  <div class="Feedback-icon"><svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M957 364.6c5.3 14 4.3 27.3-3 40-32.7 60-102.3 135.3-209 226 28 115.3 44.7 207.7 50 277 1.3 18.7-6 33.3-22 44-8.7 5.3-17.3 8-26 8-6.7 0-14-1.7-22-5-11.3-6.7-29.7-16-55-28-90-44.7-153.3-78.7-190-102-36.7 23.3-100 57.3-190 102-25.3 12-43.7 21.3-55 28-16.7 8.7-32.7 7.7-48-3-16-10.7-23.3-25.3-22-44 5.3-69.3 22-161.7 50-277-106.7-90.7-176.3-166-209-226-7.3-12.7-8.3-26-3-40 4.7-14 13.3-23.3 26-28 37.3-16.7 131.7-27.7 283-33 54.7-158.7 99.3-255.3 134-290 10.7-9.3 22-14 34-14 12.7 0 23.7 4.7 33 14 35.3 34.7 80.3 131.3 135 290 151.3 5.3 245.7 16.3 283 33 12.7 5.3 21.3 14.7 26 28z" />
    </svg></div>
  No title, just a little text in this one
</div>

<div class="Feedback" role="alert">
  <div class="Feedback-icon"><svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M957 364.6c5.3 14 4.3 27.3-3 40-32.7 60-102.3 135.3-209 226 28 115.3 44.7 207.7 50 277 1.3 18.7-6 33.3-22 44-8.7 5.3-17.3 8-26 8-6.7 0-14-1.7-22-5-11.3-6.7-29.7-16-55-28-90-44.7-153.3-78.7-190-102-36.7 23.3-100 57.3-190 102-25.3 12-43.7 21.3-55 28-16.7 8.7-32.7 7.7-48-3-16-10.7-23.3-25.3-22-44 5.3-69.3 22-161.7 50-277-106.7-90.7-176.3-166-209-226-7.3-12.7-8.3-26-3-40 4.7-14 13.3-23.3 26-28 37.3-16.7 131.7-27.7 283-33 54.7-158.7 99.3-255.3 134-290 10.7-9.3 22-14 34-14 12.7 0 23.7 4.7 33 14 35.3 34.7 80.3 131.3 135 290 151.3 5.3 245.7 16.3 283 33 12.7 5.3 21.3 14.7 26 28z" />
    </svg></div>
  <b>Still no title,</b> just a little emphsis on the intro with some text in this one
</div>

<div class="Feedback" role="alert">
  <div class="Feedback-icon"><svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M957 364.6c5.3 14 4.3 27.3-3 40-32.7 60-102.3 135.3-209 226 28 115.3 44.7 207.7 50 277 1.3 18.7-6 33.3-22 44-8.7 5.3-17.3 8-26 8-6.7 0-14-1.7-22-5-11.3-6.7-29.7-16-55-28-90-44.7-153.3-78.7-190-102-36.7 23.3-100 57.3-190 102-25.3 12-43.7 21.3-55 28-16.7 8.7-32.7 7.7-48-3-16-10.7-23.3-25.3-22-44 5.3-69.3 22-161.7 50-277-106.7-90.7-176.3-166-209-226-7.3-12.7-8.3-26-3-40 4.7-14 13.3-23.3 26-28 37.3-16.7 131.7-27.7 283-33 54.7-158.7 99.3-255.3 134-290 10.7-9.3 22-14 34-14 12.7 0 23.7 4.7 33 14 35.3 34.7 80.3 131.3 135 290 151.3 5.3 245.7 16.3 283 33 12.7 5.3 21.3 14.7 26 28z" />
    </svg></div>
  <h5 class="Feedback-title">Here's that Title</h5> Along with some text to back it up!
</div>

<div class="Feedback" role="alert">
  <div class="Feedback-icon"><svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M957 364.6c5.3 14 4.3 27.3-3 40-32.7 60-102.3 135.3-209 226 28 115.3 44.7 207.7 50 277 1.3 18.7-6 33.3-22 44-8.7 5.3-17.3 8-26 8-6.7 0-14-1.7-22-5-11.3-6.7-29.7-16-55-28-90-44.7-153.3-78.7-190-102-36.7 23.3-100 57.3-190 102-25.3 12-43.7 21.3-55 28-16.7 8.7-32.7 7.7-48-3-16-10.7-23.3-25.3-22-44 5.3-69.3 22-161.7 50-277-106.7-90.7-176.3-166-209-226-7.3-12.7-8.3-26-3-40 4.7-14 13.3-23.3 26-28 37.3-16.7 131.7-27.7 283-33 54.7-158.7 99.3-255.3 134-290 10.7-9.3 22-14 34-14 12.7 0 23.7 4.7 33 14 35.3 34.7 80.3 131.3 135 290 151.3 5.3 245.7 16.3 283 33 12.7 5.3 21.3 14.7 26 28z" />
    </svg></div>
  <h5 class="Feedback-title">Just a Title!</h5>
</div>

<div class="Feedback" role="alert">
  <div class="Feedback-icon"><svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M957 364.6c5.3 14 4.3 27.3-3 40-32.7 60-102.3 135.3-209 226 28 115.3 44.7 207.7 50 277 1.3 18.7-6 33.3-22 44-8.7 5.3-17.3 8-26 8-6.7 0-14-1.7-22-5-11.3-6.7-29.7-16-55-28-90-44.7-153.3-78.7-190-102-36.7 23.3-100 57.3-190 102-25.3 12-43.7 21.3-55 28-16.7 8.7-32.7 7.7-48-3-16-10.7-23.3-25.3-22-44 5.3-69.3 22-161.7 50-277-106.7-90.7-176.3-166-209-226-7.3-12.7-8.3-26-3-40 4.7-14 13.3-23.3 26-28 37.3-16.7 131.7-27.7 283-33 54.7-158.7 99.3-255.3 134-290 10.7-9.3 22-14 34-14 12.7 0 23.7 4.7 33 14 35.3 34.7 80.3 131.3 135 290 151.3 5.3 245.7 16.3 283 33 12.7 5.3 21.3 14.7 26 28z" />
    </svg></div>
  <h5 class="Feedback-title">Pro Tip!</h5> Buy a puppy, it'll all work out.
</div>
<div class="Feedback Feedback--positive" role="alert">
  <div class="Feedback-icon"><svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z" />
    </svg></div>
  <h5 class="Feedback-title">You are awesome!</h5> Give yourself a pat on the back for doing something succesfully.
</div>
<div class="Feedback Feedback--highlight" role="alert">
  <div class="Feedback-icon"><svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M891.6 680c18.1 14.9 25.6 34 22.3 57.3-3.2 23.3-15.2 39.5-35.9 48.5l-4.9 1.9c-3.2 1.3-7.3 2.8-12.1 4.4-4.9 1.6-11 3.7-18.4 6.3-7.4 2.6-15.7 5.2-24.8 7.8-9.1 2.6-19.1 5.3-30.1 8.3-11 2.9-23 5.8-35.9 8.7-12.9 2.9-26.5 5.8-40.8 8.7-14.2 2.9-29.8 5.5-46.6 7.8s-34 4.4-51.5 6.3c-8.4 29.1-24.9 53.1-49.5 71.8S511.1 946 480 946s-58.9-9.4-83.5-28.2-41.1-42.7-49.5-71.8c-101.6-10.4-189.6-30.4-264.1-60.2-22-9.7-34.6-26.2-37.9-49.5-1.9-23.3 5.8-42.1 23.3-56.3 3.2-1.9 8.7-6.6 16.5-14.1 7.8-7.4 18.8-20.9 33-40.3s27.5-40.8 39.8-64.1c12.3-23.3 23-53.4 32-90.3s13.6-75.4 13.6-115.5c0-54.4 5.7-102.3 17-143.7 11.3-41.4 25.9-74.4 43.7-99 17.8-24.6 39.2-44.5 64.1-59.7 24.9-15.2 49.5-25.6 73.8-31.1 24.3-5.5 50.3-8.3 78.2-8.3 27.8 0 53.9 2.8 78.2 8.3s48.9 15.9 73.8 31.1c24.9 15.2 46.3 35.1 64.1 59.7s32.4 57.6 43.7 99 17 89.3 17 143.7c0 40.1 4.5 78.6 13.6 115.5s19.7 67.1 32 90.8 25.6 45 39.8 64.1 25.2 32.4 33 39.8c7.7 7.5 13.2 12.1 16.4 14.1z" />
    </svg></div>
  <h5 class="Feedback-title">Careful now!</h5> I'd think twice about doing that.
</div>
<div class="Feedback Feedback--negative" role="alert">
  <div class="Feedback-icon"><svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M948 823c8 11.3 12 23.7 12 37 0 18-6.3 33.2-19 45.5S913.3 924 896 924H64c-23.3 0-41.7-10.3-55-31-12.7-20-13-41-1-63L424 61c12-22 30.7-33 56-33s44 11 56 33l412 762zM478 610h3c9.3 0 18-3.8 26-11.5s12.7-16.5 14-26.5c8-43.3 18.7-126.3 32-249 .7-8.7-1.8-17-7.5-25s-13.2-13-22.5-15c-28-5.3-56.3-5.3-85 0-8.7 2-16.2 7-22.5 15s-9.2 16.3-8.5 25c13.3 122.7 24 205.7 32 249 1.3 10 6 18.8 14 26.5s16.3 11.5 25 11.5zm2 227c20 0 37-7 51-21s21-31 21-51-7-37-21-51-31-21-51-21-37 7-51 21-21 31-21 51 7 37 21 51 31 21 51 21z" />
    </svg></div>
  <h5 class="Feedback-title">Uh oh!</h5> Something done messed up.
</div>

<div class="Feedback Feedback--dismissible Feedback--positive">
  <div class="Feedback-icon"><svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M957 364.6c5.3 14 4.3 27.3-3 40-32.7 60-102.3 135.3-209 226 28 115.3 44.7 207.7 50 277 1.3 18.7-6 33.3-22 44-8.7 5.3-17.3 8-26 8-6.7 0-14-1.7-22-5-11.3-6.7-29.7-16-55-28-90-44.7-153.3-78.7-190-102-36.7 23.3-100 57.3-190 102-25.3 12-43.7 21.3-55 28-16.7 8.7-32.7 7.7-48-3-16-10.7-23.3-25.3-22-44 5.3-69.3 22-161.7 50-277-106.7-90.7-176.3-166-209-226-7.3-12.7-8.3-26-3-40 4.7-14 13.3-23.3 26-28 37.3-16.7 131.7-27.7 283-33 54.7-158.7 99.3-255.3 134-290 10.7-9.3 22-14 34-14 12.7 0 23.7 4.7 33 14 35.3 34.7 80.3 131.3 135 290 151.3 5.3 245.7 16.3 283 33 12.7 5.3 21.3 14.7 26 28z" />
    </svg></div>
  <span class="Feedback-title">You are awesome!</span> Give yourself a pat on the back for doing something succesfully.
  <i type="button" class="Feedback-dismiss"><svg viewBox="0 0 960 960" role="presentation" class="Icon"><path d="M628 480l189 190c8.7 8 13.7 17.5 15 28.5s-1.3 20.2-8 27.5c-28.7 36.7-61.3 69.3-98 98-7.3 6.7-16.5 9.3-27.5 8s-20.8-6-29.5-14L480 628 290 818c-8 8-17.5 12.7-28.5 14s-20.5-1.3-28.5-8c-36-28.7-68.3-61-97-97-6.7-8-9.3-17.5-8-28.5 1.3-11 6-20.5 14-28.5l190-190-189-189c-8.7-8.7-13.7-18.5-15-29.5-1.3-11 1.3-20.2 8-27.5 28-36 60.3-68.7 97-98 8-6.7 17.5-9.3 28.5-8s20.5 6.3 28.5 15l190 181 189-181c8.7-8.7 18.5-13.7 29.5-15s20.2 1.3 27.5 8c36.7 28.7 69.3 61.3 98 98 6.7 7.3 9.3 16.5 8 27.5s-6.3 20.8-15 29.5L628 480z"/></svg></i>
</div>

<button class="Button" id="FeedbackBox--trigger">
  Trigger Dismissible Feedback Box
</button>

<div class="Feedback Feedback--popup Feedback--dismissible Feedback--positive" id="FeedbackBox--triggeredPopup">
  <div class="Feedback-icon"><svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M957 364.6c5.3 14 4.3 27.3-3 40-32.7 60-102.3 135.3-209 226 28 115.3 44.7 207.7 50 277 1.3 18.7-6 33.3-22 44-8.7 5.3-17.3 8-26 8-6.7 0-14-1.7-22-5-11.3-6.7-29.7-16-55-28-90-44.7-153.3-78.7-190-102-36.7 23.3-100 57.3-190 102-25.3 12-43.7 21.3-55 28-16.7 8.7-32.7 7.7-48-3-16-10.7-23.3-25.3-22-44 5.3-69.3 22-161.7 50-277-106.7-90.7-176.3-166-209-226-7.3-12.7-8.3-26-3-40 4.7-14 13.3-23.3 26-28 37.3-16.7 131.7-27.7 283-33 54.7-158.7 99.3-255.3 134-290 10.7-9.3 22-14 34-14 12.7 0 23.7 4.7 33 14 35.3 34.7 80.3 131.3 135 290 151.3 5.3 245.7 16.3 283 33 12.7 5.3 21.3 14.7 26 28z" />
    </svg></div>
  <span class="Feedback-title">You are awesome!</span> Give yourself a pat on the back for doing something succesfully.
  <i type="button" class="Feedback-dismiss"><svg viewBox="0 0 960 960" role="presentation" class="Icon"><path d="M628 480l189 190c8.7 8 13.7 17.5 15 28.5s-1.3 20.2-8 27.5c-28.7 36.7-61.3 69.3-98 98-7.3 6.7-16.5 9.3-27.5 8s-20.8-6-29.5-14L480 628 290 818c-8 8-17.5 12.7-28.5 14s-20.5-1.3-28.5-8c-36-28.7-68.3-61-97-97-6.7-8-9.3-17.5-8-28.5 1.3-11 6-20.5 14-28.5l190-190-189-189c-8.7-8.7-13.7-18.5-15-29.5-1.3-11 1.3-20.2 8-27.5 28-36 60.3-68.7 97-98 8-6.7 17.5-9.3 28.5-8s20.5 6.3 28.5 15l190 181 189-181c8.7-8.7 18.5-13.7 29.5-15s20.2 1.3 27.5 8c36.7 28.7 69.3 61.3 98 98 6.7 7.3 9.3 16.5 8 27.5s-6.3 20.8-15 29.5L628 480z"/></svg></i>
</div>