gistfile1.erb

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

<script>
  $(function() {
    $(".app").click(function(e) {
      if (e.which == 1 && !e.metaKey && !e.shiftKey) {
        window.location = $(this).find("h2 a").attr("href");
      }
    });
  });
</script>

<style>
  body {
    color: #555;
  }

  a:hover, a:active {
    color: red;
  }

  li.app hgroup {
    background-image: url("/assets/app-icon-large.png");
    background-repeat: no-repeat;
    height: 52px;
    padding-left: 54px;
  }

  li.app:hover {
    background: #eee;
    cursor: pointer;
  }

  li.app:hover hgroup {
    background-position: 0 -52px;
  }

  li.app:hover h2 a {
    color: red;
  }
</style>

<div style="font-family: 'Helvetica Neue'; width: 600px; margin: 0 auto;">
  <ul style="list-style: none;">
    <% 5.times do %>
    <li class="app" style="padding: .6em; overflow: hidden; border-radius: 8px; margin-bottom: 10px;">
      <hgroup style="float: left;">
        <h2 style="font-size: 14px; margin-top: 4px;"><a href="/apps/app-with-addons-209">app-with-addons-209</a></h2>
        <h3 style="font-size: 12px;"><a href="/teams/personal-apps">Personal Apps</a></h3>
      </hgroup>

      <ul style="float: right; margin-top: 15px;">
        <li style="font-size: 13px; margin-right: 4px; padding-right: 4px; display: inline-block;"><a href="/apps/app-with-addons-209/processes">Processes</a></li>
        <li style="font-size: 13px; margin-right: 4px; padding-right: 4px; display: inline-block;"><a href="/apps/app-with-addons-209/resources">Resources</a></li>
        <li style="font-size: 13px; margin-right: 4px; padding-right: 4px; display: inline-block;"><a href="/apps/app-with-addons-209/access">Access <span style="background: #999; padding: 2px 4px; border-radius: 4px;">Owner</span></a></li>
      </ul>
    </li>
    <% end %>
  </ul>
<div>