Hero Banner components

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Usage

When viewing this page in the browser, you will see the component above the heading.

import VideoHero from "~/components/mdx/heros/Video.astro";
import PreviewImage from "~/content/posts/images/claudio-schwarz-pQ_SEJg8rII-unsplash.jpg";

<VideoHero
  heading="Netus et malesuada fames ac turpis egestas"
  description="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Vitae ultricies leo integer malesuada nunc vel risus commodo viverra. Adipiscing enim eu turpis egestas pretium.
"
  image={{ src: PreviewImage, alt: "" }}
  video={{ player: "vimeo", src: "https://vimeo.com/907827754" }}
  height="full"
/>

## You can continue writing your markdown content

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.

Examples

More information

astro-skeleton uses the @astrojs/mdx integration installed and configured in the astro.config.mjs config file.

Why MDX?

MDX is a special flavor of Markdown that supports embedded JavaScript & JSX syntax. This unlocks the ability to mix JavaScript and UI Components into Markdown content for things like interactive charts or alerts.

If you have existing content authored in MDX, this integration will hopefully make migrating a breeze.

Useful Links

• MDX Syntax Documentation
• Astro Usage Documentation