Skip to content

Commit

Permalink
Version 1.0.0-beta1.
Browse files Browse the repository at this point in the history
  • Loading branch information
@marvel-uiuc
marvel-uiuc committed Sep 30, 2024
1 parent 5c68f6d commit 9828a21
Show file tree
Hide file tree
Showing 4 changed files with 339 additions and 95 deletions.
2 changes: 1 addition & 1 deletion builder/ilw-card.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,5 +8,5 @@
"purpose": "Organize content using cards, with image and icon support.",
"toolkit-version": "",
"production-version": "",
"development-version": "1.0-beta"
"development-version": "1.0-beta1"
}
217 changes: 217 additions & 0 deletions builder/versions/ilw-card.1.0-beta1.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,217 @@
{
"title": "Card",
"tag": "ilw-card",
"github": "https://github.com/web-illinois/ilw-card/",
"type": "web component",
"element-name": "ilw-card",
"description": "A card component that can be used as a container for grouping information.",
"builder-version": "1.0-beta1",
"version": "1.0.0-beta1",
"date": "08/02/2024",
"css": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-beta1/ilw-card.css",
"js": "https://dev.toolkit.illinois.edu/ilw-card/1.0.0-beta1/ilw-card.js",
"production": false,
"notes": "",
"parent-style": "margin: 0 auto; max-width: 400px; padding: 15px;",
"samples": [
{
"name": "default",
"description": "Plain card with heading and text",
"text": "<h3>Student Life</h3>\n<p>Animal sciences students extend their learning through internships.</p>"
},
{
"name": "minimal",
"description": "Minimal card without a heading",
"text": "<p>Animal sciences students extend their learning through <a href=\"#\">internships</a>.</p>"
},
{
"name": "image",
"description": "Card with an image and a button",
"text": "<img src=\"https://picsum.photos/570/300\" alt=\"\" slot=\"image\">\n<h3>Student Life</h3>\n<p>Animal sciences students extend their learning and career networks beyond the classroom through internships, judging teams, student organizations, undergraduate research projects with our faculty, as well as short- and long-term study abroad opportunities all over the world.</p>\n<div slot=\"footer\"><a href=\"#\" class=\"ilw-button\">Learn More <span class=\"ilw-sr-only\">About Student Life</span></a></div>"
},
{
"name": "clickable",
"description": "Card with an icon",
"text": "<svg slot=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 51.26 51.26\"><defs><style>.cls-1{fill:#0c1b55;}</style></defs><g id=\"Layer_2\" data-name=\"Layer 2\"><path class=\"cls-1\" d=\"M36.15,22c-.88-1.63-6.33-2-11-2.05-4.71.09-10.15.42-11,2.05S12.31,28.55,12,30.23a6.5,6.5,0,0,0-.12.87c1.52-1.29,5.28-1.41,6.48-1.41a40.8,40.8,0,0,1,6.49.9,1.52,1.52,0,0,0,.6,0,44.82,44.82,0,0,1,6.48-.9c1.91,0,5,.19,6.44,1.34a7.32,7.32,0,0,0-.11-.8C37.92,28.55,37,23.66,36.15,22Z\"/><path class=\"cls-1\" d=\"M31.92,30.69a44.56,44.56,0,0,0-6.29.88,2.36,2.36,0,0,1-1,0,40.54,40.54,0,0,0-6.29-.88c-2.14,0-6.68.43-6.14,2.08,0,0,.39,3,12.91,2.67s12.94-2.67,12.94-2.67C38.6,31.12,34.43,30.69,31.92,30.69Z\"/><path class=\"cls-1\" d=\"M9,27.69a1.69,1.69,0,0,0-1-1.56c-.06-.79-.33-2.43-.54-3.51A27.54,27.54,0,0,1,7,19.69C7,18.79,8,18.43,8.11,18.4a3.71,3.71,0,0,1,1.62-.25l1.81-.77a4.71,4.71,0,0,0-3.86-.15,2.93,2.93,0,0,0-1.95,2.42,23,23,0,0,0,.49,3.21c.17.88.44,2.52.52,3.26a1.68,1.68,0,0,0-.15,3.07,18.65,18.65,0,0,1-.32,4.43,17.54,17.54,0,0,1-1.61,4.45A2.14,2.14,0,0,0,7,39.17,3.53,3.53,0,0,0,9.52,38S9.1,31.54,8.3,29.08A1.69,1.69,0,0,0,9,27.69Z\"/><path class=\"cls-1\" d=\"M5.31,20.56l-1.75.74a.32.32,0,0,0,0,.59l2.09.73C5.52,21.86,5.39,21.15,5.31,20.56Z\"/><path class=\"cls-1\" d=\"M47.66,21.25l-21.4-9a1.62,1.62,0,0,0-1.26,0L12.68,17.43h0L9.81,18.66h0l-2.29,1,0,.1c0,.42.26,1.74.47,2.8.07.33.13.65.19.95l4,1.4a15.46,15.46,0,0,1,1.11-3.32c.93-1.7,4.26-2.42,11.9-2.57,7.67.15,11,.87,11.93,2.57a16.74,16.74,0,0,1,1.19,3.67l9.42-3.3A.36.36,0,0,0,47.66,21.25Z\"/></g></svg>\n\n<h3><a href=\"#\">Student Life</a></h3>\n<p>Animal sciences students extend their learning and career networks beyond the classroom through internships.</p>"
}
],
"attributes-fixed": [],
"attributes-text": [],
"attributes": [
{
"name": "theme",
"description": "Color theme used",
"depreciated": false,
"values": [
"",
"gray",
"blue",
"orange",
"blue-gradient",
"orange-gradient"
]
},
{
"name": "align",
"description": "Align text inside the card",
"depreciated": false,
"values": [
"",
"center"
]
},
{
"name": "clickable",
"description": "Make the entire card clickable",
"depreciated": false,
"values": [
"",
"true"
]
},
{
"name": "aspectRatio",
"description": "Force image aspect ratio",
"depreciated": false,
"values": [
"",
"1/1",
"2/1",
"3/1",
"16/10",
"1/2",
"1/3",
"10/16"
]
}
],
"classes-fixed": [],
"classes": [],
"css-variables": [
{
"name": "--ilw-card--margin-top",
"depreciated": false,
"description": "Margin above cards [default: 1rem]"
},
{
"name": "--ilw-card--margin-bottom",
"depreciated": false,
"description": "Margin below cards [default: 1rem]"
},
{
"name": "--ilw-card--content-padding-top",
"depreciated": false,
"description": "Top padding around main content in the card [default: 2.5rem]"
},
{
"name": "--ilw-card--content-padding-right",
"depreciated": false,
"description": "Right padding around main content in the card [default: 2rem]"
},
{
"name": "--ilw-card--content-padding-bottom",
"depreciated": false,
"description": "Bottom padding around main content in the card [default: 2rem]"
},
{
"name": "--ilw-card--content-padding-left",
"depreciated": false,
"description": "Left padding around main content in the card [default: 2rem]"
},
{
"name": "--ilw-card--font-size",
"depreciated": false,
"description": "Card text font size [default: 1.2rem]"
},
{
"name": "--ilw-card--heading--font-size",
"depreciated": false,
"description": "Font size for a card's heading [default: 1.45em]"
},
{
"name": "--ilw-card--icon-width",
"depreciated": false,
"description": "Limit for an icon's width [default: 120px]"
},
{
"name": "--ilw-card--icon-height",
"depreciated": false,
"description": "Limit for an icon's height [default: 80px]"
},
{
"name": "--ilw-card--border-color",
"depreciated": false,
"description": "Color of the border around the card [default: var(--il-blue)]"
},
{
"name": "--ilw-card--background",
"depreciated": false,
"description": "CSS background for the card [default: var(--ilw-background--color)]"
},
{
"name": "--ilw-card--heading-color",
"depreciated": false,
"description": "Color of the heading in the card [default: var(--il-orange)]"
},
{
"name": "--ilw-card--icon-color",
"depreciated": false,
"description": "Color of an icon in the card [default: var(--ilw-text--color)]"
},
{
"name": "--ilw-card--text-color",
"depreciated": false,
"description": "Color of text in the card [default: var(--ilw-text--color)]"
},
{
"name": "--ilw-card--link",
"depreciated": false,
"description": "Color for links inside the card [default: var(--ilw-link--color)]"
},
{
"name": "--ilw-card--link-focus",
"depreciated": false,
"description": "Focus and hover color for links inside the card [default: var(--ilw-link--focused-color)]"
},
{
"name": "--ilw-card--link-visited",
"depreciated": false,
"description": "Visited link color for inside the card [default: var(--ilw-link--visited-color)]"
},
{
"name": "--ilw-card--clickable--heading-color",
"depreciated": false,
"description": "Color of a clickable card heading [default: var(--ilw-card--heading-color)]"
},
{
"name": "--ilw-card--hover--background",
"depreciated": false,
"description": "Background for the hover state of a clickable card [default: var(--il-blue)]"
},
{
"name": "--ilw-card--hover--heading-color",
"depreciated": false,
"description": "Color of the heading for the hover state of a clickable card [default: #fff]"
},
{
"name": "--ilw-card--hover--text-color",
"depreciated": false,
"description": "Color of text for the hover state of a clickable card [default: #fff]"
},
{
"name": "--ilw-card--hover--clickable-border",
"depreciated": false,
"description": "Color of the bottom wider border for the hover state of a clickable card [default: var(--il-industrial-lighter-1)]"
},
{
"name": "--ilw-card--hover--link",
"depreciated": false,
"description": "Link color for links inside the hover state of a clickable card [default: var(--ilw-card--hover--text-color)]"
},
{
"name": "--ilw-card--hover--link-focus",
"depreciated": false,
"description": "Focus and hover color for links inside the hover state of a clickable card [default: var(--il-orange)]"
}
]
}
Loading

0 comments on commit 9828a21

Please sign in to comment.