GroupCollect 1.3.142

Info Section

Renders a info_section component

Info section Open in playground

I'm a title

Company name
Planet Express
Contact name
Hubert Farnsworth 
<.info_section title="I'm a title">
  <.info_section_item title="Company name">
    <:description>Planet Express</:description>
  </.info_section_item>
  <.info_section_item title="Contact name">
    <:description>Hubert Farnsworth</:description>
  </.info_section_item>
</.info_section>
Info section with action Open in playground

I'm a title

Company name
Planet Express
Contact name
I'm someone with a really long name that will break onto two lines 
<.info_section title="I'm a title">
  <:action><.button size="sm" compact>Edit</.button></:action>
  <.info_section_item title="Company name">
    <:description>Planet Express</:description>
  </.info_section_item>
  <.info_section_item title="Contact name">
    <:description>I'm someone with a really long name that will break onto two lines</:description>
  </.info_section_item>
</.info_section>
Info section with multiple item descriptions Open in playground

I'm a title

Company name
Planet Express
Contact name
Hubert Farnsworth
John Doe 
<.info_section title="I'm a title">
  <:action><.button size="sm" compact>Edit</.button></:action>
  <.info_section_item title="Company name">
    <:description>Planet Express</:description>
  </.info_section_item>
  <.info_section_item title="Contact name">
    <:description>Hubert Farnsworth</:description>
    <:description>John Doe</:description>
  </.info_section_item>
</.info_section>
Info section with text ellipsis descriptions Open in playground

I'm a title

Company name
Planet Express
Contact name
Itinerary Bay Haven Charter Academy 5th Grade 2026
Itinerary Bay Haven Charter Academy 5th Grade 2026 
<.info_section title="I'm a title">
  <:action><.button size="sm" compact>Edit</.button></:action>
  <.info_section_item title="Company name">
    <:description>Planet Express</:description>
  </.info_section_item>
  <.info_section_item title="Contact name">
    <:description text_ellipsis>Itinerary Bay Haven Charter Academy 5th Grade 2026</:description>
    <:description text_ellipsis>Itinerary Bay Haven Charter Academy 5th Grade 2026</:description>
  </.info_section_item>
</.info_section>
Info section with text ellipsis links Open in playground

I'm a title

Company name
Planet Express
Contact name
Itinerary Bay Haven Charter Academy 5th Grade 2026 .pdf
Itinerary Bay Haven Charter Academy 5th Grade 2026 .pdf 
<.info_section title="I'm a title">
  <:action><.button size="sm" compact>Edit</.button></:action>
  <.info_section_item title="Company name">
    <:description>Planet Express</:description>
  </.info_section_item>
  <.info_section_item title="Contact name">
    <:description text_ellipsis>
      <a href="#" text-ellipsis>Itinerary Bay Haven Charter Academy 5th Grade 2026</a>
      <a href="#">.pdf</a>
    </:description>
    <:description text_ellipsis>
      <a href="#" text-ellipsis>Itinerary Bay Haven Charter Academy 5th Grade 2026</a>
      <a href="#">.pdf</a>
    </:description>
  </.info_section_item>
</.info_section>
Custom title and content spacing and no min height Open in playground

I'm a title

Company name
Planet Express
Contact name
Hubert Farnsworth 
<.info_section title="I'm a title" title_and_content_space="xl">
  <.info_section_item title="Company name">
    <:description>Planet Express</:description>
  </.info_section_item>
  <.info_section_item title="Contact name">
    <:description>Hubert Farnsworth</:description>
  </.info_section_item>
</.info_section>
Info section empty state Open in playground

Contact Information

No contact information has been added yet. Please click 'Edit' to add contact information. 
<.info_section
  title="Contact Information"
  empty_message="No contact information has been added yet. Please click 'Edit' to add contact information."
>
  <:action><.button size="sm" compact>Edit</.button></:action>
</.info_section>
Info section without title Open in playground
Company name
Planet Express
Contact name
Hubert Farnsworth 
<.info_section >
  <.info_section_item title="Company name">
    <:description>Planet Express</:description>
  </.info_section_item>
  <.info_section_item title="Contact name">
    <:description>Hubert Farnsworth</:description>
  </.info_section_item>
</.info_section>
Info section without title with action Open in playground
Company name
Planet Express
Contact name
Hubert Farnsworth 
<.info_section >
  <:action><.button size="sm" compact>Edit</.button></:action>
  <.info_section_item title="Company name">
    <:description>Planet Express</:description>
  </.info_section_item>
  <.info_section_item title="Contact name">
    <:description>Hubert Farnsworth</:description>
  </.info_section_item>
</.info_section>