Verizon A - Structure in html

_version_A.html.erb

<%= render Sitters::ServiceProfile::Card.new(root_id: 'service-profile', service_type: service_type, profile_active?: profile_active) do %>
  <div class="service-profile__service__icon px-2">
    <%= render Sitters::ServiceProfile::ServiceIcon.new(service_type: service_type, solid: true, colorize: false) %>
  </div>

  <div class="service-profile__body d-flex justify-content-between align-items-center px-2 py-3">
    <div class="service-profile__body__left d-flex justify-content-start align-items-center">
      <%= render Sitters::ServiceProfile::ProfileImage.new(image_url: profile_image_url) %>

      <div class="service-profile__body__content d-flex flex-column justify-content-center align-items-start">
        <strong class="service-profile__body__content__title p-sm mb-2"><%= service_type_label %></strong>
        <%= render Sitters::ServiceProfile::ManageProfileAction.new(profile_status: profile_status,
                                                                    show_public_link: show_public_link,
                                                                    public_link_path: public_link_path,
                                                                    edit_profile_path: edit_profile_path) %>
      </div>
    </div>

    <div class="service-profile__body__right pe-1 pe-lg-3">
      <%= render Sitters::ServiceProfile::StatusLabel.new(sitter: sitter, status: profile_status, service_type: service_type, filled: filled) %>
      <%= render Sitters::ServiceProfile::StatusSwitch.new(sitter: sitter, service_type: service_type, profile_status: profile_status) %>
    </div>
  </div>
<% end %>

_version_B.rb

module Sitters
  class ServiceProfile < ApplicationComponent::Phlex

    def view_template
      render Card.new(root_id: self, service_type: service_type, profile_active?: profile_active?) do
        element_service__icon do
          render ServiceIcon.new(service_type: service_type, solid: true, colorize: false)
        end

        element_body do
          element_body__left do
            render ProfileImage.new(root_id: self, image_url: profile_image_url)

            element_body__content do
              element_body__content__title(service_type_label)
              render ManageProfileAction.new(root_id: self,
                                             profile_status: profile_status,
                                             show_public_link: show_public_link,
                                             public_link_path: public_link_path,
                                             edit_profile_path: edit_profile_path)
            end
          end

          element_body__right do
            render StatusLabel.new(root_id: self,
                                   sitter: sitter,
                                   status: profile_status,
                                   service_type: service_type,
                                   filled: filled)

            render StatusSwitch.new(root_id: self,
                                    sitter: sitter,
                                    service_type: service_type,
                                    profile_status: profile_status)
          end
        end
      end
    end

    def element_service__icon(&content)
      div(class: bem_id('px-2'), &content)
    end

    def element_body(&content)
      div(class: bem_id('d-flex justify-content-between align-items-center px-2 py-3'), &content)
    end

    def element_body__left(&content)
      div(class: bem_id('d-flex justify-content-start align-items-center'), &content)
    end

    def element_body__right(&content)
      div(class: bem_id('pe-1 pe-lg-3 '), &content)
    end

    def element_body__content(&content)
      div(class: bem_id('d-flex flex-column justify-content-center align-items-start'), &content)
    end

    def element_body__content__title(text)
      strong(class: bem_id('p-sm mb-2')) { plain(text) }
    end
  end
end

list_all.html.erb

  <%= render 'version_A', service_type: 'sitters',
                                           service_type_label: _("Babysitting"),
                                           sitter: current_sitter,
                                           profile_active: current_sitter.sitter_status.active?,
                                           show_public_link: current_sitter.active? && current_sitter.sitter_status.active?,
                                           public_link_path: profile_sitter_path(current_sitter),
                                           edit_profile_path: edit_sitter_profile_sitter_path,
                                           profile_image_url: asset_path(sitter_image(current_sitter.user, :small, 'sitters')),
                                           filled: current_sitter.sitter_profile_filled?,
                                           profile_status: current_sitter.sitter_status %>

    <%= render Sitters::ServiceProfile.new(service_type: 'cleaners',
                                           service_type_label: _("House cleaning"),
                                           sitter: current_sitter,
                                           profile_active?: current_sitter.cleaner_status.active?,
                                           show_public_link: current_sitter.active? && current_sitter.cleaner_status.active?,
                                           public_link_path: profile_cleaner_sitter_path(current_sitter),
                                           edit_profile_path: edit_cleaner_profile_sitter_path,
                                           profile_image_url: asset_path(sitter_image(current_sitter.user, :small, 'cleaners')),
                                           filled: current_sitter.cleaner_profile_filled?,
                                           profile_status: current_sitter.cleaner_status) %>