Card

Cards can be useful to separate information from the main content flow. They have a max width of 640px, though it is unlikely that they would be displayed inline. It's more likely that they would be floated to the right of a series of paragraphs or displayed in a basic grid using the shortcode ll-grid.

• By default, paragraph text is displayed at small size
• By default, a border is displayed around the card.

[ll-card title="Insert title"]Html content here[/ll-card]

By default, headings are wrapped in <h3>

Heading hierarchy and size

Maintaining a clear heading hierarchy is crucial for accessibility. Headings should start at <h1> and nest logically (e.g., <h2>, <h3>).

By default, the card shortcode uses <h3> for headings. Depending on context it maybe neccessary to adjust this using the heading-tag attribute.

The size of the heading can be adjusted using the heading-size attibute. Used in conjunction with heading-tag, it's possible to maintain semantic hierarchy while still maintaining control over the size of the heading itself

[ll-card title="Insert title" heading-tag="h2" heading-size="h4"]<p>html content here</p>[/ll-card]

Adding images to cards

It's possible to add an image before the title by adding in img, alt and attribution-id attibutes. In addition, you'll need to use the attrbution shortcode to ensure the image is probably attributed. Here's an example of both heading alterations and images:

h2 displayed as h4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper elit, non dignissim dolor iaculis sed.

[ll-card title="h2 displayed as h4" heading-tag="h2" heading-size="h4" img="https://path.to/image.jpg" alt="Example image" attribution-id="my-attribution"]<p>html content here</p>[/ll-card]

Right and wrong cards

A trim can be applied to the top of a card to enhance visual impact (use sparingly) or, more effectively, to indicate whether something is right, wrong, or neutral. To do this, add the trim attribute to the shortcode with the following valid values: true, incorrect, correct, and neutral. The value true will display the same red trim as incorrect.

Note: It's crucial to either clarify the purpose of the box in the title (e.g., "Right: Sentence 1a" or "Wrong: Too wordy") or add the attribute purpose to the shortcode. An example might be purpose="Wrong: ". This adds a "visually-hidden" class to the title for screen reader accessibility.

Here's a neutral example:

[ll-grid]
[ll-card title="Sentence 1a" trim="incorrect" purpose="Wrong"]<p>The implementation of the plan went ahead as scheduled.</p>[/ll-card]
[ll-card title="Sentence 1b" trim="correct" purpose="Right"]<p>The plan was implemented as scheduled.</p>[/ll-card]
[ll-card title="Sentence 2a" trim="incorrect" purpose="Wrong"]<p>China and America will hold discussions on trade when they meet next February.</p>[/ll-card]
[ll-card title="Sentence 2b" trim="correct" purpose="Right"]<p>China and America will discuss trade when they meet next February.</p>[/ll-card]
[/ll-grid]
 
[ll-grid]
[ll-card title="Before" trim="neutral"]<p>Engineers cannot avoid utilising complex and difficult technical terms in order to clearly analyse requirements and describe them in a precise and meaningful way.</p>[/ll-card]
[ll-card title="After" trim="correct"]<p>Engineers must use technical terms when writing clear requirements specifications.</p>[/ll-card]
[/ll-grid]
 
[ll-grid]
[ll-card title="" trim="incorrect" purpose=""]<p></p>[/ll-card]
[ll-card title="" trim="neutral" purpose=""]<p></p>[/ll-card]
[ll-card title="" trim="correct" purpose=""]<p></p>[/ll-card]
[/ll-grid]

Floating cards to the right of content

This can be achieved by adding float="true" to the shortcode.

• By default, floated content has a width of 296px.
• Text is displayed at small size by default. Use class="large" to increase the size.
• On smaller screen sizes (< 768px wide), the card is displayed at full width.
• Image should be placed before supporting content
• Due to the narrow width, use the attrbution shortcode to handle attribution.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

The card in this example uses the float=true attribute. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper elit, non dignissim dolor iaculis sed. Fusce gravida, turpis at pulvinar feugiat, elit tortor convallis urna, sit amet sollicitudin augue ex a velit. Curabitur varius sapien ligula, sit amet porta sapien cursus ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus vestibulum semper elit, non dignissim dolor iaculis sed. Fusce gravida, turpis at pulvinar feugiat, elit tortor convallis urna, sit amet sollicitudin augue ex a velit. Curabitur varius sapien ligula, sit amet porta sapien.

Praesent sem metus, lobortis et sapien quis, malesuada egestas enim. Donec ac arcu sit amet ligula pharetra dapibus. In sapien lorem, tincidunt ut lobortis at, sagittis consequat tortor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.

[ll-card img="https://path.to/image.jpg" alt="Example image" attribution-id="my-attribution" float="true"]<p>html content here</p>[/ll-card]

Resizing text

It is possible to reduce the size by added the class small to html tags like paragraphs. The example below demonstrates this, while also showing cards in a grid.

[ll-grid]
	[ll-card title="Title 1"]
		<p class="small">html content here</p>
		<p class="small">html content here</p>
	[/ll-card]
	[ll-card title="Title 2"] ... [/ll-card]
[/ll-grid]

Grid margins

By default, the grid layout has quite large margins top and bottom. In these card examples it's rare that there will be more than 4 cards displayed at once, so it may be appropriate to reduce the top margin. To do this, use classes="margin-top-zero" in the ll-grid shortcode:

[ll-grid classes="margin-top-zero"]