Gallery Cards

CSS snippet file: MCL Gallery Cards.css

Gallery Cards CSS snippet will allow you to create image gallery and control image customisation (like rounded corner and max width). In summary this snippet will provide the following features:

• Image Gallery #mcl/list-card
  • allow for multiple columns setup using either sub callouts or any of the acceptable markdown components
• Float Image
  • create a floating image to either side of the screen (but still within readable line length) and allow text to flow around it
• Image and Mermaid Control
  • Style settings options to change image / mermaid diagram default dimension and scales

• Image gallery using callout by specifying the callout-metadata gallery e.g. > [!NOTE|gallery]
• Image gallery using YAML/frontmatter .cssClass: image-gallery
• Image and Mermaid Diagram Controls
  • Dimension control for images in bullet list
  • Image Zoom (via CSS)
  • Mermaid Scale and Zoom (via CSS)

< List Card | Next: Image Gallery >