Infocard

[guidesummary class=”space-lrg”]The infocard is a simple combination of a graphic card + headline and optional summary. There are plenty of ways to go about this type of module so we’re simply trying to identify the individual elements that could make up the whole infocard system.[/guidesummary] [guidelabel]INFOCARD_CARD-PT-MT-SUM[/guidelabel][guidebox class=”corner spacein-lrg”] [/guidebox] [guidelabel]INFOCARD_CARD-MT-ST-ICON-SUM[/guidelabel][guidebox class=”corner spacein-lrg”] [/guidebox] [guidelabel]INFOCARD_CARD-MT-ST-ICON-SUM[/guidelabel][guidebox class=”corner spacein-lrg”] [/guidebox] [guidesummary class=”space-lrg”]The logic behind the infocard is based on a modular perspective of a container named “infocard”. Elements inside the module can vary and may include the following:

• card
• pretitle
• maintitle
• subtitle
• summary
• icon
• cta
• textlink

[/guidesummary] [guidesummary class=”space-lrg”]The idea below is to create multiple variations on how cards can be displayed by simply changing it’s parent selector and using CSS Grid to organize how the content is displayed accordingly. We can use the parent selector to control how each entry of “infocard” gets tallied. And we can use the “infocard.selector” to control how the child elements would organize itself.[/guidesummary] [guidelabel]INFOCARD CARD-PRETITLE-MAINTITLE-SUMMARY[/guidelabel][guidebox class=”corner spacein-lrg”] [/guidebox] [guidesummary class=”space-lrg”]Note: Variations of this may include the following:

• card-maintitle-summary
• card-pretitle-maintitle-summary
• card-maintitle-subtitle-summary
• card-pretitle-maintitle
• card-maintitle-subtitle
• card-pretitle-maintitle-subtitle-summary
• pretitle-card-maintitle-subtitle-summary

[/guidesummary]