card

the card is a versatile and visually appealing ui element that encapsulates and presents information or interactive content in a structured, consistent, and user friendly manner it enhances the app's usability by organizing content into manageable, self contained units that are easy to navigate and interact with each card typically includes a mix of text, images, and interactive elements, creating a self contained unit of content configuration options configuration options some properties are common to all components, see common component properties docid\ llntd rxe8fmh7wpc5czb for a list and their configuration options core structure children configure a component or multiple components in a card see components docid\ uu0nisptjmp60lbphwqln for a list of available components instanceid give the card component a unique id that can be referenced throughout the {{jig}} other options color sets the color of the card choose a color from the provided jigx color palette docid\ alxcnrj rgickyu94iyws default color is white if the property is not specified in the yaml style when isdisabled is set to true , the card appears opaque, indicating that it is unavailable for selection by default isdisabled is set to false actions onpress choose from the provided list of available actions, for example, use the go to action to open a different {{jig}} considerations jig level the card component is only available for use in a jig default docid\ rtomyji3uoxiqxdultz3o {{jig}} component level the carousel docid\ g75 zhiiss3axc7uqriwv component has the option to use the card component within the carousel to create a visually appealing carousel examples and code snippets examples and code snippets card containing a form in this example the card component wraps the form component to create a visual container around the form example see the example in github card basic jigx title form in a card type jig default header type component jig header options height medium children type component image options source uri https //images unsplash com/photo 1682685797736 dabb341dc7de?q=80\&w=1470\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdf8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d onfocus type action reset state options state =@ctx components hikerinfo dd state data children \ type component card options children \ type component form instanceid hikerinfo dd options isdiscardchangesalertenabled false children \ type component text field instanceid name options label hiker's name \ type component text field instanceid contact options label mobile number \ type component media field instanceid photo options imagequality 80 imagecropping width 64 height 64 label profile photo mediatype image actions \ children \ type action execute entity options title create record provider data provider dynamic entity default/hikers method create data name =@ctx components name state value contact =@ctx components contact state value photo =@ctx components photo state value onsuccess type action go back card in a carousel in this example the carousel uses a card component with a color property, within the card, there is an image component used to display the images, an entity field component to describe the product the card component creates a visually appealing container for the images the pagination is configured outside of the carousel example see the example in github carousel card jigx title carousel with card type jig default children \ type component carousel options data =@ctx datasources products dynamic item type component card options children \ type component image options source uri =@ctx current item uri \ type component entity options children \ type component entity field options label product value =@ctx current item title color color1 iscontained true pagination iscontained false ishidden false position outside counter ishidden true cards with color this example shows three cards the first card contains the avatar , expander , entity field and location components with the color color3 property the second card contains a line chart component with the color color14 property set the third card contains an image and entity field components with the color color6 property set example see the example in github cards with color card color jigx title cards with color description card with color and multiple components type jig default children \ type component card options children \ type component avatar options title customer uri =@ctx datasources users\[3] uri size large align center \ type component expander options header centerelement type component titles options title =@ctx datasources users\[3] name subtitle =@ctx datasources users\[3] position isinitiallycollapsed true oncontentpress type action go back children \ type component location options viewpoint centerposition middle address =@ctx datasources users\[3] address zoomlevel 10 color color3 \ type component card options children \ type component line chart options chart height 150 isanimated true yaxis min 0 labels format numberstyle currency compactdisplay short notation compact tickamount 8 isfirsttickhidden true isfirstlabelhidden true xaxis categories \ q1 \ q2 \ q3 \ q4 series \ data =\[{"x" "q1/19", "y" 25000, "color" "color2"}, {"x" "q2/19", "y" 32000, "color" "color2"}, {"x" "q3/19", "y" 45000, "color" "color2"}, {"x" "q4/19", "y" 86000, "color" "color2"}] name year 2019 animation direction left to right layout area gradient datalabels \ isenabled true \ data =\[{"x" "q1/20", "y" 12000, "color" "color3"}, {"x" "q2/20", "y" 48000, "color" "color3"}, {"x" "q3/20", "y" 36000, "color" "color3"}, {"x" "q4/20", "y" 120000, "color" "color3"}] name year 2020 animation direction left to right layout area gradient datalabels \ isenabled true legend ishidden false color color14 \ type component card options children \ type component image options height 150 source uri https //images unsplash com/photo 1504389557830 b293439b92d0?q=80\&w=2580\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d \ type component entity options children \ type component entity field options label location value cliff edge lighthouse color color6 users jigx (datasource) type datasource static options data \ name boris miranda position ux designer uri https //randomuser me/api/portraits/men/32 jpg uri text bm status accepted address 204 governor printz blvd, claymont, de 19703, united states \ name santiago hampton position senior frontend developer uri https //randomuser me/api/portraits/men/46 jpg uri text sh status accepted address 1035 cambridge st, cambridge, ma 02141 \ name tom sellers position qa engineer uri https //randomuser me/api/portraits/men/97 jpg uri text ts status declined address 141 harbor dr claymont, delaware(de), 19703 \ name anne dopp position hr administrator uri https //randomuser me/api/portraits/women/79 jpg uri text ad status accepted address 8400 governor printz blvd, claymont, de 19703, united states \ name zuzana moudra position hr business partner uri https //images unsplash com/photo 1438761681033 6461ffad8d80?ixlib=rb 0 3 5\&q=80\&fm=jpg\&crop=faces\&fit=crop\&h=200\&w=200\&s=046c29138c1335ef8edee7daf521ba50 uri text zm status accepted address 800 skipjack ln, claymont, de 19703, united states \ name jane stevens position hr generalist uri https //images unsplash com/photo 1520813792240 56fc4a3765a7?ixlib=rb 1 2 1\&q=80\&fm=jpg\&crop=faces\&fit=crop\&h=200\&w=200\&ixid=eyjhchbfawqioje3nzg0fq uri text js status declined address 399 301 chapel ave, claymont, de 19703, usa card with style this {{jig}} contains two cards, the first appears disabled using the isdisabled true property and the second card the isdisabled property is set to false example see the example in github card style jigx title card style disabled type jig default children \ type component section options title card with style disabled children \ type component card instanceid card style options color color10 style isdisabled true onpress type action go back children \ type component image options source uri https //images unsplash com/photo 1612539465222 c20af6006413?q=80\&w=2670\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d \ type component section options title card with style enabled children \ type component card instanceid card enabled options color color10 style isdisabled false onpress type action go back children \ type component image options source uri https //images unsplash com/photo 1612539465222 c20af6006413?q=80\&w=2670\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d card with onpress the card component can be configured with an onpress event in this example when the card is pressed a go to component is configured to take you to the product list {{jig}} with items on sale example see the example in github card with onpress card onpress title card with onpress type jig default children \ type component card instanceid card1 options color color9 onpress type action go to options linkto product item simple children \ type component image options source uri https //images unsplash com/photo 1472851294608 062f824d29cc?q=80\&w=2304\&auto=format\&fit=crop\&ixlib=rb 4 0 3\&ixid=m3wxmja3fdb8mhxwag90by1wywdlfhx8fgvufdb8fhx8fa%3d%3d \ type component entity options children \ type component entity field options label '' value shop now righticon arrow button right 1