Template:Card horizontal/doc

A tweak-able colorful element featuring a text block with an image and, optionally, with a clickable button and a highlighted text.

Template parameters
Parameter		Description	Type	Status
Title	`title`	Block heading.	String	optional
Content	`content`	Arbitrary content. Usually a text message.	Unbalanced wikitext	optional
Image	`image`	The name of a block image.	String	optional
Background color	`bgcolor`	A HEX code or a name of CSS variable / web color for the block background. Default var(--moha-green)	String	optional
Foreground color	`fgcolor`	A HEX code or a name of CSS variable / web color for the block text. Default var(--white)	String	optional
Link color	`linkcolor`	A HEX code or a name of CSS variable / web color to override the default link color. Default var(--white)	String	optional
Highlighted text	`highlight-text`	The highlighted text that follows the main block content.	Unbalanced wikitext	optional
Highlight background color	`highlight-bgcolor`	A HEX code or a name of CSS variable / web color for the highlighted text background. Default var(--primary)	String	optional
Highlighted text color	`highlight-fgcolor`	A HEX code or a name of CSS variable / web color for the highlighted text color. Default var(--white)	String	optional
Button target	`button-target`	The valid URL or the name of a page to load when the button is clicked.	String	optional
Button text	`button-text`	A text to display on the button.	String	optional
Button text color	`button-fgcolor`	A HEX code or a name of CSS variable / web color to override the button text color.	String	optional

Notes

This is a horizontal / vertical card with two areas. They do not have exact widths and adapt themselves to the screen. This behavior was created intentionally. The image part is a kind of squared/rectangular, so aspect ratios 4:3 or 1:1 would work better than 16:9 ones. The images for this template are for mood, not for information.
For images, avoid too prominent objects (portraits, people that can get their heads or legs off canvas). Prefer images with dispersed details.

Usage

{{Card horizontal
|image=MoHA-Fancy-adventure.jpg
|title=Title
|content=This will prevent runtime errors even when expected elements are missing from the DOM. Let me know if you want to make this more dynamic or loop over multiple walls.
|highlight-text=I am highlighted!
|button-target=Main Page
|button-text=Click Me!
|bgcolor=#986188;
}}

Result

Title

This will prevent runtime errors even when expected elements are missing from the DOM. Let me know if you want to make this more dynamic or loop over multiple walls.

I am highlighted!

Click Me!