Renders a card with the picker component. Footer in card is only visible when picker is checked.
Supports an optional action with ‘icon’ and ‘click’ attributes.
<.picker_card id="king-room-picker-card" title="King room with pullout couch"> <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <.responsive from="sm"> <.h5>Complimentary</.h5> </.responsive> <.responsive upto="sm"> <.h4>Complimentary</.h4> </.responsive> </:description_tagline> <:picker> <.input type="checkbox" name="test" value="yes" aria-label="Select card" /> </:picker> </.picker_card>
<.picker_card id="picker-card-single-checkbox-picker-card" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="checkbox" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card>
<.picker_card id="picker-card-single-checkbox-picker-card-with-bold-tagline" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <h4 class="gc-type-h5">Complimentary</h4> </:description_tagline> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="checkbox" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card>
<.picker_card id="picker-card-single-checkbox-picker-card-with-mixed-tagline" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <.row space="2xs" justify="start"> <h4 class="gc-type-h5">$120-140</h4> <.p size="sm">/ night</.p> </.row> </:description_tagline> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="checkbox" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card>
<.picker_card id="picker-card-single-radio-picker-card" title="King room with pullout couch"> <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="radio" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card>
<.picker_card id="picker-card-single-radio-picker-card-with-bold-tagline" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <h4 class="gc-type-h5">Complimentary</h4> </:description_tagline> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="radio" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card>
<.picker_card id="picker-card-single-radio-picker-card-with-mixed-tagline" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <.row space="2xs" justify="start"> <h4 class="gc-type-h5">$120-140</h4> <.p size="sm">/ night</.p> </.row> </:description_tagline> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="radio" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card>
<.picker_cards_fieldset id={"checkbox-picker-cards-group"} legend="Select an option" class="gc-gap-xl"> <.picker_card id="picker-card-checkbox-group-checkbox-group-picker-card" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="checkbox" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card> <.picker_card id="picker-card-checkbox-group-checkbox-group-picker-card-with-bold-tagline" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <h4 class="gc-type-h5">Complimentary</h4> </:description_tagline> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="checkbox" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card> <.picker_card id="picker-card-checkbox-group-checkbox-group-picker-card-with-mixed-tagline" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <.row space="2xs" justify="start"> <h4 class="gc-type-h5">$120-140</h4> <.p size="sm">/ night</.p> </.row> </:description_tagline> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="checkbox" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card> <.picker_card id="picker-card-checkbox-group-checkbox-group-picker-card-with-tagline-and-footer" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <.row space="2xs" justify="start"> <h4 class="gc-type-h5">$120-140</h4> <.p size="sm">/ night</.p> </.row> </:description_tagline> <:footer> <.row space="2xs" justify="start"> <h4 class="gc-type-h5">20</h4> <.p size="sm">rooms will be requested</.p> </.row> </:footer> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="checkbox" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card> <.picker_card id="picker-card-checkbox-group-checkbox-group-picker-card-with-tagline-and-footer-with-input" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <.row space="2xs" justify="start"> <h4 class="gc-type-h5">$120-140</h4> <.p size="sm">/ night</.p> </.row> </:description_tagline> <:footer> <.stack space="none" class="gc-width-136"> <.input id={"checkbox_group_picker_card_with_tagline_and_footer_with_input_number_of_rooms"} type="text" name="number_of_rooms" value="" required label="No. of rooms" /> </.stack> </:footer> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="checkbox" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card> <.picker_card id="picker-card-checkbox-group-checkbox-group-picker-card-with-tagline-and-footer-with-error-input" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <.row space="2xs" justify="start"> <h4 class="gc-type-h5">$120-140</h4> <.p size="sm">/ night</.p> </.row> </:description_tagline> <:footer> <.stack space="none" class="gc-width-136"> <.input id={"checkbox_group_picker_card_with_tagline_and_footer_with_error_input_number_of_rooms"} type="text" name="number_of_rooms" value="" required label="No. of rooms" errors={["Error helper text"]} /> </.stack> </:footer> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="checkbox" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card> <.picker_card id="picker-card-checkbox-group-checkbox-group-picker-card-with-tagline-and-footer-with-multiple-input" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <.row space="2xs" justify="start"> <h4 class="gc-type-h5">$120-140</h4> <.p size="sm">/ night</.p> </.row> </:description_tagline> <:footer> <.stacking_cluster space="xl" justify="start"> <.stack space="none" class="gc-width-136"> <.input id={"checkbox_group_picker_card_with_tagline_and_footer_with_multiple_input_number_of_buses"} type="text" name="number_of_buses" value="" required label="No. of buses" /> </.stack> <.stack space="none" class="gc-width-136"> <.input id={"checkbox_group_picker_card_with_tagline_and_footer_with_multiple_input_number_of_vehicles"} type="text" name="number_of_vehicles" value="" required label="No. of vehicles" /> </.stack> </.stacking_cluster> </:footer> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="checkbox" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card> </.picker_cards_fieldset>
<.picker_cards_fieldset id={"radio-picker-cards-group"} legend="Select an option" class="gc-gap-xl"> <.picker_card id="picker-card-radio-group-radio-group-picker-card" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="radio" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card> <.picker_card id="picker-card-radio-group-radio-group-picker-card-with-bold-tagline" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <h4 class="gc-type-h5">Complimentary</h4> </:description_tagline> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="radio" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card> <.picker_card id="picker-card-radio-group-radio-group-picker-card-with-mixed-tagline" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <.row space="2xs" justify="start"> <h4 class="gc-type-h5">$120-140</h4> <.p size="sm">/ night</.p> </.row> </:description_tagline> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="radio" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card> <.picker_card id="picker-card-radio-group-radio-group-picker-card-with-tagline-and-footer" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <.row space="2xs" justify="start"> <h4 class="gc-type-h5">$120-140</h4> <.p size="sm">/ night</.p> </.row> </:description_tagline> <:footer> <.row space="2xs" justify="start"> <h4 class="gc-type-h5">20</h4> <.p size="sm">rooms will be requested</.p> </.row> </:footer> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="radio" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card> <.picker_card id="picker-card-radio-group-radio-group-picker-card-with-tagline-and-footer-with-input" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <.row space="2xs" justify="start"> <h4 class="gc-type-h5">$120-140</h4> <.p size="sm">/ night</.p> </.row> </:description_tagline> <:footer> <.stack space="none" class="gc-width-136"> <.input id={"radio_group_picker_card_with_tagline_and_footer_with_input_number_of_rooms"} type="text" name="number_of_rooms" value="" required label="No. of rooms" /> </.stack> </:footer> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="radio" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card> <.picker_card id="picker-card-radio-group-radio-group-picker-card-with-tagline-and-footer-with-error-input" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <.row space="2xs" justify="start"> <h4 class="gc-type-h5">$120-140</h4> <.p size="sm">/ night</.p> </.row> </:description_tagline> <:footer> <.stack space="none" class="gc-width-136"> <.input id={"radio_group_picker_card_with_tagline_and_footer_with_error_input_number_of_rooms"} type="text" name="number_of_rooms" value="" required label="No. of rooms" errors={["Error helper text"]} /> </.stack> </:footer> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="radio" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card> <.picker_card id="picker-card-radio-group-radio-group-picker-card-with-tagline-and-footer-with-multiple-input" title="King room with pullout couch" > <:description> Relax in comfort with a king-size bed and a convenient pullout sofa—perfect for extra guests or family stays. </:description> <:description_tagline> <.row space="2xs" justify="start"> <h4 class="gc-type-h5">$120-140</h4> <.p size="sm">/ night</.p> </.row> </:description_tagline> <:footer> <.stacking_cluster space="xl" justify="start"> <.stack space="none" class="gc-width-136"> <.input id={"radio_group_picker_card_with_tagline_and_footer_with_multiple_input_number_of_buses"} type="text" name="number_of_buses" value="" required label="No. of buses" /> </.stack> <.stack space="none" class="gc-width-136"> <.input id={"radio_group_picker_card_with_tagline_and_footer_with_multiple_input_number_of_vehicles"} type="text" name="number_of_vehicles" value="" required label="No. of vehicles" /> </.stack> </.stacking_cluster> </:footer> <:picker :let={%{title_container_id: title_container_id, description_container_id: description_container_id}}> <.input type="radio" name="test" value="yes" checked={false} aria-labelledby={title_container_id} aria_describedby={description_container_id} label="Select card" label_hidden="true" /> </:picker> </.picker_card> </.picker_cards_fieldset>