+ "markdown": "---\npagetitle: \"Gallery\"\nformat:\n html:\n toc: false\nimage: articles/advanced-layout-pdf.png\nsearch: false\nexecute:\n echo: false\nlisting:\n - id: gallery\n template: gallery.ejs\n contents: gallery.yml\ndescription: |\n A gallery of example documents, websites, books, and presentations created with Quarto.\naliases:\n - /docs/dashboards/examples/index.html\n - /docs/dashboards/examples/\n---\n\n::: {#hero-banner .column-screen}\n::: {.grid .column-page}\n::: {.headline .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: h1\nGallery\n:::\n\nQuarto can produce a wide variety of output formats. Here are some examples:\n\n- [Articles & Reports](#articles-reports)\n- [Presentations](#presentations)\n- [Dashboards](#dashboards)\n- [Websites](#websites)\n- [Books](#books)\n- [Interactive Docs](#interactive-docs)\n:::\n\n\n::: {.cell .g-col-lg-6 .g-col-12 .g-col-md-12}\n::: {.cell-output-display}\n\n```{=html}\n<div id=\"gallery-carousel\" class=\"carousel carousel-dark slide\" data-bs-ride=\"carousel\">\n<div class=\"carousel-indicators\">\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"0\" aria-label=\"Slide 1\" class=\"active\" aria-current=\"true\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"1\" aria-label=\"Slide 2\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"2\" aria-label=\"Slide 3\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"3\" aria-label=\"Slide 4\"></button>\n<button type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide-to=\"4\" aria-label=\"Slide 5\"></button>\n</div>\n<div class=\"carousel-inner\">\n<div class=\"carousel-item active\" data-bs-interval=\"5000\">\n<a href=\"#articles-reports\">\n<img src=\"articles/advanced-layout-pdf.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Articles and reports with Python and R</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#presentations\">\n<img src=\"presentations/presentations.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create data-driven presentations</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#interactive-docs\">\n<img src=\"interactive/interactive-jupyter.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Engage readers with interactivity</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#websites\">\n<img src=\"websites/websites-quarto.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Publish collections of articles as a website</p>\n</div>\n</div>\n<div class=\"carousel-item\" data-bs-interval=\"5000\">\n<a href=\"#books\">\n<img src=\"websites/websites-jupyter.png\" class=\"d-block mx-auto border\"/>\n</a>\n<div class=\"carousel-caption d-none d-md-block\">\n<p class=\"fw-light\">Create multi-format books</p>\n</div>\n</div>\n</div>\n<button class=\"carousel-control-prev\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"prev\">\n<span class=\"carousel-control-prev-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Prevoius</span>\n</button>\n<button class=\"carousel-control-next\" type=\"button\" data-bs-target=\"#gallery-carousel\" data-bs-slide=\"next\">\n<span class=\"carousel-control-next-icon\" aria-hidden=\"true\"></span>\n<span class=\"visually-hidden\">Next</span>\n</button>\n</div>\n```\n\n:::\n:::\n\n:::\n:::\n\n::: {#gallery .column-page}\n:::\n\n```{=html}\n<style>\n\n/* we need to hide this element */\n/* <header id=\"title-block-header\" class=\"quarto-title-block\"></header> */\n\nheader#title-block-header {\n display: none;\n}\n\nbody.quarto-light #hero-banner {\n background-color: rgb(240,245,249);\n}\n\nbody.quarto-dark #hero-banner {\n background-color: rgb(60,64,82);\n}\n\ndiv.carousel {\n margin-top: 2rem; \n}\n\nbody.quarto-dark .carousel-dark .carousel-indicators [data-bs-target] {\n background-color: rgb(255,255,255);\n}\n\nbody.quarto-dark .carousel-dark .carousel-control-next-icon,\nbody.quarto-dark .carousel-dark .carousel-control-prev-icon {\n filter: inherit;\n}\n\n#quarto-content main { \n margin-top: 0;\n padding-top: 0;\n}\n\nhtml {\n scroll-behavior: smooth;\n}\n\n.headline {\n font-size: 1.25em;\n font-weight: 300;\n padding-bottom: 1em;\n}\n\n.headline p {\n margin: 0;\n padding-bottom: 0.2rem;\n}\n\n.headline a {\n text-decoration: none;\n}\n\n.headline ul li {\n margin-bottom: 0.3em;\n}\n\n.carousel.card {\n padding-top: 2em;\n}\n\n.carousel img {\n width: 70%;\n margin-bottom: 110px;\n}\n\n.carousel-control-prev-icon, .carousel-control-next-icon {\n margin-bottom: 110px;\n}\n\n.carousel-caption {\n padding-top: 1em;\n}\n\n.touch {\n \n}\n</style>\n```\n",
0 commit comments