Card

Create Card elements containing Image, Text and Link elements.

If we supply elements into the children property, the respective elements are created.

• image - new Image...
• text - new Text...
• link - new Link...

let elements = [
  {
    type: "cards",
    children: ["image", "text", "link"]
  }
];

This operation results in this code.

  new FlexGrid()
        .set({ colat: "700px", wrap: true, align: "center", gap: "1rem" }) 
        .items(
            [
                { img: "https://upload.wikimedia.org/wikipedia/commons/3/3a/Starship_S20.jpg", title: "Starship", link: "#ship" },
                { img: "https://upload.wikimedia.org/wikipedia/commons/1/16/Apollo_11_Launch_-_GPN-2000-000630.jpg", title: "Saturn V", link: "#saturn" },
                { img: "https://upload.wikimedia.org/wikipedia/commons/d/d6/STS120LaunchHiRes-edit1.jpg", title: "Shuttle", link: "#shuttle" }
            ].map(item => 
                
        new Card()
            .set({
                width: "300px", 
                height: "700px",
                radius: "0.7rem",  
                mar: { sides: ["all"], value: "0.8rem" }
            })
            .items([
                new Image(item.img).set({isFull: true, url: item.img}),
                new Text(item.title).set({ size: "S5", color: "orange" }),
                new Link("Link").set({
                    text: item.title, 
                    url: item.link, 
                    background: "#3498db", 
                    pad: [{ lr: "0.5rem", tb: "1rem" }], 
                    radius: "0.4rem", 
                    color: "white"
                })
            ])
            )
        )
    .render("#mount"); 

ZoomCard

To use image as background for the entire card use the ZoomCard element with a background. To create entire grid with these cards, use the following operator:

let els = [
  {
    type: "cards",
    children: ["text", "image", "link"],
    backgroundCard: true
  }
];

This generates FlexGrid with ZoomCard structure. The inpad property sets the inner padding.

//182501 images

  new FlexGrid()
        .set({ colat: "700px", wrap: true, align: "center", gap: "1rem" }) 
        .items(
            [
                { img: "https://upload.wikimedia.org/wikipedia/commons/3/3a/Starship_S20.jpg", title: "Starship", link: "#ship" },
                { img: "https://upload.wikimedia.org/wikipedia/commons/1/16/Apollo_11_Launch_-_GPN-2000-000630.jpg", title: "Saturn V", link: "#saturn" },
                { img: "https://upload.wikimedia.org/wikipedia/commons/d/d6/STS120LaunchHiRes-edit1.jpg", title: "Shuttle", link: "#shuttle" }
            ].map(item => 
                
        new ZoomCard()
            .set({
                url: item.img, 
                font: "Arial", 
                mar: { sides: ["all"], value: "0.8rem" }, 
                inpad: "1rem", 
                useBrightness: true
            })
            .items([
                new Text(item.title).set({ fluidc: "S6", color: "orange" }),
                new Link("Link").set({
                    text: item.title, 
                    url: item.link, 
                    background: "#3498db", 
                    pad: [{ lr: "0.5rem", tb: "1rem" }], 
                    radius: "0.4rem", 
                    color: "white"
                })
            ])
            )
        )
    .render("#mount");