Template

Card2

From Dogcraft Wiki

(Created a lightweight linking card in the style of the main dogcraft.net website. Inspired by the cards used on Template:Main_Page_Navigation)
 
m (Documentation)
Line 21: Line 21:


===Examples===
===Examples===
{{WIP}}
====Default====
{{Card2
{{Card2
|file=Guides Cog.svg
|file=Guides Cog.svg
|title=GuidesGuidesGuidesGuidesGuidesGuides GuidesGuidesGuidesGuidesGuidesGuidesGuidesGuides
|title=Guides
}}
 
 
{{Card2
|file=Guides Cog.svg
|title=Lorem ipsum dolor sit
}}
 
 
{{Card2
|file=Guides Cog.svg
}}
 
====Using overflow mode====
{{Card2
|file=Guides Cog.svg
|title=Lorem ipsum dolor sit
|overflow=true
|overflow=true
}}
}}


====Using cover mode====
{{Card2
|file=DC Courthouse Logo.png
|title=Courthouse
|cover=true
}}
{{Card2
|file=DC Courthouse Logo.png
|cover=true
}}


====In a flexbox, using cover mode====
<div style="display:flex; gap:10px; justify-content:center;" class="flex-mobile-wrap">
{{Card2
|width=180px
|link=SRN
|file=GCS_Shepherd.png
|title=Builds
|cover=1
}}
{{Card2
|width=180px
|link=SRN
|file=Lotus Images6.png
|title=Settlements
|cover=1
}}
{{Card2
|width=180px
|link=SRN
|file=Akkara Opening day Itineary.png
|title=Events
|cover=1
}}
{{Card2
|width=180px
|link=SRN
|file=Machair Station Opening.png
|title=Groups
|cover=1
}}
{{Card2
{{Card2
|width=180px
|link=SRN
|file=DC Courthouse Logo.png
|file=DC Courthouse Logo.png
|title=Projects
|cover=1
}}
}}
</div>





Revision as of 00:10, 29 June 2023

Card template (dogcraft.net styled)

This is an interface template for creating a link card in the style of the main dogcraft.net website. Please check the template parameters before use!

Examples

Default



Guides Cog.svg

Using overflow mode

Using cover mode


DC Courthouse Logo.png

In a flexbox, using cover mode


Template data

Note: The image-height parameter uses a CSS hack, check implementation comments.

A lightweight link card in the style of the main dogcraft.net website

Template parameters

This template prefers block formatting of parameters.

ParameterDescriptionTypeStatus
Filefile

The name of the image to be displayed

Example
Guides Cog.svg or DC Courthouse Logo.png
Filerequired
Linklink

Target page

Default
#
Example
Main Page
Page namerequired
Titletitle

The text to be displayed

Example
Projects
Stringsuggested
Widthwidth

Card width

Default
120px
Stringoptional
Trigger: Overflowoverflow

Decides whether the title can wrap to multiple lines

Default
false
Example
true or false
Booleanoptional
Trigger: Covercover

Decides whether the image covers the entire available area (useful for screenshots) or remains in the center (useful for icons)

Default
false
Example
true or false
Booleanoptional
Image height (requires cover mode)image-height

Sets the height of the image, in pixels (only has effect on cover mode!)

Default
80
Example
200
Numberoptional
This page was last modified on 29 June 2023, at 00:10. (16 months ago)
Background Takeshi by Edo