<% obj.each do |article| %>
    <div class="row row-grid">
        <div class="col-xs-6 offset-xs-3">
            <div class="demo-card-wide mdl-card mdl-shadow--2dp">
                <div class="mdl-card__title">
                    <h2 class="mdl-card__title-text"><%= truncate(article.title) %></h2>
                    <small>Created by: <strong><%= article.user.username %></strong></small>
                    <small>Last updated: <%= time_ago_in_words(article.updated_at) %> ago</small>
                </div>
                <div class="mdl-card__supporting-text"><%= truncate(article.description, length: 120) %></div>
                <div class="mdl-card__actions mdl-card--border">
                    <%= link_to "Show", article_path(article), class: "mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"%>
                    <%= link_to "Edit", edit_article_path(article), class: "mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect" %>
                    <%= link_to "Delete", article_path(article),
                            method: :delete,
                            data: { confirm: "Are you sure you want to delete this article?" },
                            class: "btn-danger mdl-button mdl-js-button mdl-button--raised mdl-button--accent mdl-js-ripple-effect" %>
                </div>
                <div class="mdl-card__menu">
                    <button class="mdl-button mdl-button--icon mdl-js-button mdl-js-ripple-effect">
                    <i class="material-icons">share</i>
                </button>
                </div>
            </div>
        </div>
    </div>
<% end %>

Create a shared partial for display articles
Create a shared partial for display articles

This partial template receives an array of articles and iterate over every article and display it.