Split Background hero

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.

How to use

import SplitBackgroundHero from "~/components/heroes/SplitBackground.astro";
import PreviewImage from "~/assets/jpg/arthur-mazi-6148mnVnY-s-unsplash.jpg";

<SplitBackgroundHero
  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" }}
/>

Props

Prop	Type	Description
btns	array of objects	(optional) An array of button objects to render. See below.
description	string	(optional) The card description or supporting text.
heading	string	The heading displayed by the card, <h1-4>
image	object	(optional) Image data for the component. See below.
layout	object	(optional) Layout data for the component. See below.
video	object	(optional) Video data for the component. See below.
class	string	(optional) Additional classes applied to the root <header>.
(extends)	HTMLAttributes<"header">	(optional) All standard HTML attributes for a <header>.

btn object

• href — string
  The URL or path the button links to.
• label — string
  The visible text on the button.
• type — "primary" | "secondary" | "text"
  Determines which button style component is rendered.

The btns prop is an array of btn objects.

image object

• src — ImageMetadata
  The imported image metadata (output from Astro’s image import).
• alt — string
  (optional) Alt text for the image, defaults to empty string "".

layout object

• aspect — “video” | “square” | “default” (optional) Sets the aspect ratio of the image or video.
• mirror — boolean (optional) Mirrors the desktop layout so the media is on the left side.

video object

• player — “youtube” | “vimeo”
  Which video provider to use.
• src — string
  The video source URL as a string.

More examples