Cannot use "link_to" or "button_to" in Rails 4.2 with Semantic-UI

Question

I am using Semantic-UI for designing my rails app design. I have created a card layout with a button attached in the bottom of that card. But When I tries to add link_to or button_to to my text in the bottom attached button everything gets spoils.

HTML + Rails 4.2 Code Written:

<div class="ui four cards">
        <a class="red card">
            <div class="image">
                <%= image_tag("white-image.png") %>
            </div>
            <div class="ui bottom attached button">
                <i class="fa fa-cloud-upload"></i><span class="little-space"></span><%= link_to 'Deploy', controller: 'apps', action: 'show'%>

            </div>
        </a>
    </div>

Output:

Must look like this:

---

Normal HTML and CSS works but when I try to use Rails4.2 helpers like "link_to" or "button_to" then everything gets wrong. Is there any way through which I can make whole card layout as clickable using Rails helper.

---

Generated HTML Code:

<div class="ui four cards">
        <a class="red card">
            <div class="image">
                <img src="/assets/white-image-d3f1bf0d70bdd663809bc001a778b550fc7246e81a614f3ff10e7cfb0a1514cf.png" alt="White image d3f1bf0d70bdd663809bc001a778b550fc7246e81a614f3ff10e7cfb0a1514cf">
            </div>
            </a><div class="ui bottom attached button"><a class="red card">
                <i class="fa fa-cloud-upload"></i><span class="little-space"></span></a><a href="/apps/show">Delpoy</a>

            </div>

    </div>

---

Simple output using HTML and Semantic-UI

<link href="http://semantic-ui.com/dist/semantic.min.css" rel="stylesheet"/>
<script src="http://semantic-ui.com/dist/semantic.min.js"></script>
<div class="ui four cards">
  			<a class="red card">
    			<div class="image">
    				<img class="ui wireframe image" src="http://semantic-ui.com/images/wireframe/white-image.png">
    			</div>
    			<div class="ui bottom attached button">
      				<i class="fa fa-cloud-upload"></i><span class="little-space"></span>Deploy
      				
    			</div>
    		</a>
		</div>

Answer 1

link_to and button_to both accept a block which can be used to insert arbitrary content inside the link/button.

<div class="ui four cards">
  <%= link_to({ controller: 'apps', action: 'show' }, { class: "red card" }) do %>
    <div class="image">
      <%= image_tag "white-image.png", class: "ui wireframe image" %>
    </div>
    <div class="ui bottom attached button">
      <i class="fa fa-cloud-upload"></i><span class="little-space"></span>Deploy
    </div>
  <% end %>
</div>

Answer 2

link_to can accept a block, try this:

<div class="ui four cards">
    <%= link_to {controller: 'apps', action: 'show'}, {class: "red card"} do %>
        <div class="image">
            <%= image_tag("white-image.png") %>
        </div>
        <div class="ui bottom attached button">
            <i class="fa fa-cloud-upload"></i>
        <span class="little-space"></span>
            Deploy
        </div>
    <% end %>
</div>