BathHacked/energy-sparks

<div id="<%= id %>" class="prompt-component mb-2 <%= classes %>">
  <%# Padding added to create space within div %>
  <div class="row pt-3 pb-3">
    <% if render_icon? %>
      <%# Icon is hidden on smallest size, visible from sm and above as single column %>
      <div class="d-none d-sm-block col-1">
        <%= component 'icon', fuel_type: fuel_type, name: icon, style: :circle, size: 'f5' %>
      </div>
    <% end %>
    <%# if no icon then use full width row %>
    <%# Below md use full width, so text column wraps below icon. from md above use 2 cols %>
    <div class="<%= render_icon? ? 'col-12 col-md-11' : 'col-12' %>">
      <% if title? || pill? %>
        <div class="row">
          <div class="col">
            <% if title? %>
              <strong><%= title %></strong>
            <% end %>
            <% if pill? %>
              <%= pill %>
            <% end %>
          </div>
        </div>
      <% end %>
      <div class="row">
        <% if style == :compact %>
          <div class="col-12 col-md-10">
            <%= content %>
          </div>
          <% if link %>
            <div class="col col-md-2">
              <%= link %>
            </div>
          <% end %>
        <% else %>
          <div class="col">
            <%= content %>
            <p>
            <% if link %>
              <%= link %>
            <% end %>
            </p>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>