Card Leadins
Cards are a basic design pattern: an image/video and some text and maybe a smaller image (e.g. a logo) to go with it. Leadins, then, are a subset of cards, and this is the first attempt to create an HTML/CSS pattern to handle them both.
Like regular cards, leadin cards default to a column layout, but we can force a row layout or a two-up layout to occur at various screen sizes by adding specific classes to the leadin element.
Legacy leadins are still the default and supported, but new development will focus on cards. To make a leadin a card, specify the leadin type as card, or set the parameter leadin_type = card at the stie level for a default.
Important: Leadins do not read parameters at the story level, so to override a site-wide or category wide setting of leadin_type, you need to add that paramter to a category closer to the story. Or you can add legacy as the type of the leadin.
The cards have been placed in padded boxes with a background color just for display purposes here. That is not part of the standard look.
No Teaser Image
No Teaser Image, Loose
By default, the spacing between the various items is tighter than normal text. Adding the class loose to the leadin will reset the margins to the default.
With Teaser Image
In a column layout, images will size normally, but will be constrained by the size of the container. To put the image below the card content, add reversed class.
No Read More Link
Delete the text in the "link text" element in the leadin.
No Links
While not normally needed, in some cases you need to disable the links in a leadin. Add the parameter no_links = 1 to the leadin.
This is the Title
Row Layout
This simple card uses the row-lg-up class, which produces a row layout at tablet-landscape (1024px) and above. The image will size normally, but will be constrained to the size of the container. The gap between the image and the text content is 5% of the total width of that element. To remove the gap, add the class no-gap.
Row Layout, Max-width Image
To constrain the size of the image, you can add a class of media-width-X, where X is a percentage of the total width. Values for X are: 25, 33, 40, 50, 60 and 67. The following uses media-width-33.
With Teaser Image, Image Right, Centered
Add the class reversed-up to the leadin. This only works when you already have the row-X-up class added. Additionally, we add items-center to align the content and media along the central axis.
With Teaser Image, Title Top
This puts the title above the image. Add the class title-top to the leadin. Currently, this only works for leadins in column layout.
Two-up Layout
This produces a layout where both the media and content elements take up half of the available width, with a 3rem gap between them by default. This example uses the two-up-lg-up class, which produces a two-up layout at tablet-landscape (1024px) and above.
Two-up, Custom Gap
Override the --card-2up-col-gap custom property will set media and content width at a value that accomodates the gap.
