GroupCollect 1.3.142

Info Box Group

Basic usage with row layout for desktop Open in playground
Jan 15 - Feb 20 Dates
12 people Participants
Jan 15 - Feb 20 Dates
12 people Participants 
<.info_box_group :let={[info_box_1, info_box_2]}>
  <:info_box label="Dates">
    Jan 15 - Feb 20
  </:info_box>
  <:info_box label="Participants">
    12 people
  </:info_box>
  <.row space="sm" justify="stretch">
    <%= info_box_1 %>
    <%= info_box_2 %>
  </.row>
</.info_box_group>
Three boxes row Open in playground
Jan 15 - Feb 20 Dates
12 people Participants
New York, NY Location
Jan 15 - Feb 20 Dates
12 people Participants
New York, NY Location 
<.info_box_group :let={[info_box_1, info_box_2, info_box_3]}>
  <:info_box label="Dates">
    Jan 15 - Feb 20
  </:info_box>
  <:info_box label="Participants">
    12 people
  </:info_box>
  <:info_box label="Location">
    New York, NY
  </:info_box>
  <.row space="sm" justify="stretch">
    <%= info_box_1 %>
    <%= info_box_2 %>
    <%= info_box_3 %>
  </.row>
</.info_box_group>
Mixed layout Open in playground
Jan 15 - Feb 20 Dates
12 people Participants
New York, NY Location
Jan 15 - Feb 20 Dates
12 people Participants
New York, NY Location 
<.info_box_group :let={[info_box_1, info_box_2, info_box_3]}>
  <:info_box label="Dates">
    Jan 15 - Feb 20
  </:info_box>
  <:info_box label="Participants">
    12 people
  </:info_box>
  <:info_box label="Location">
    New York, NY
  </:info_box>
  <.stack space="base">
    <.row space="sm" justify="stretch">
      <%= info_box_1 %>
      <%= info_box_2 %>
    </.row>
    <%= info_box_3 %>
  </.stack>
</.info_box_group>
Custom mobile space Open in playground
Jan 15, 2025 Start Date
Feb 20, 2025 End Date
Jan 15, 2025 Start Date
Feb 20, 2025 End Date 
<.info_box_group :let={[info_box_1, info_box_2]} mobile_space="xl">
  <:info_box label="Start Date">
    Jan 15, 2025
  </:info_box>
  <:info_box label="End Date">
    Feb 20, 2025
  </:info_box>
  <.row space="sm" justify="stretch">
    <%= info_box_1 %>
    <%= info_box_2 %>
  </.row>
</.info_box_group>
Using desktop_attrs and mobile_attrs to apply custom attributes Open in playground
Regular Info Regular
Regular Info Regular 
<.info_box_group :let={[info_box_1, info_box_2]}>
  <:info_box label="Featured" desktop_attrs={%{id: "featured-box"}} mobile_attrs={%{id: "mobile-featured-box"}}>
    Important Info
  </:info_box>
  <:info_box label="Regular" desktop_attrs={%{id: "regular-box", secondary: true}} mobile_attrs={%{id: "mobile-regular-box", secondary: true}}>
    Regular Info
  </:info_box>
  <.row space="sm" justify="stretch">
    <%= info_box_1 %>
    <%= info_box_2 %>
  </.row>
</.info_box_group>