Bulma list group

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css">
<section class="section">
  <div class="content">
    <h4>Bulma <code>list-group</code></h4><hr>
    <div class="panel list-group">
      <a class="panel-block list-group-item is-primary">1. Lorem ipsum dolor sit amet.</a>
      <a class="panel-block list-group-item is-info">2. Lorem ipsum dolor sit amet.</a>
      <a class="panel-block list-group-item is-success">3. Lorem ipsum dolor sit amet.</a>
      <a class="panel-block list-group-item is-warning">4. Lorem ipsum dolor sit amet.</a>
      <a class="panel-block list-group-item is-danger">5. Lorem ipsum dolor sit amet.</a>
      <a class="panel-block list-group-item">6. Lorem ipsum dolor sit amet.</a>
      <a class="panel-block list-group-item"><h1 class="title">
                    aaa
                </h1>
                <h2 class="subtitle">
                    bbb
                </h2>
    </a>
  </div>
</section>

CSS

.list-group > .list-group-item:first-child {
  border-radius: 4px 4px 0 0;
}
.list-group > .list-group-item:last-child {
  border-radius: 0 0 4px 4px;
}

.list-group > .list-group-item.is-primary { 
  background-color: hsl(171, 100%, 41%);
  color: #fff;
 }
.list-group > .list-group-item.is-info {
  background-color: hsl(217, 71%, 53%);
  color: #fff;
}
.list-group > .list-group-item.is-success {
  background-color: hsl(141, 71%, 48%);
  color: #fff;
}
.list-group > .list-group-item.is-warning { background-color: hsl(48, 100%, 67%); }
.list-group > .list-group-item.is-danger {
  background-color: hsl(348, 100%, 61%);
  color: #fff;
}