diff --git a/docs/docs/faq-card.md b/docs/docs/faq-card.md new file mode 100644 index 0000000..e0c57c6 --- /dev/null +++ b/docs/docs/faq-card.md @@ -0,0 +1,43 @@ +--- +id: faq-card +title: FAQ Card +sidebar_label: FAQ Card +--- + +##### FAQ Card + +```html live +<> +
+
+
+
+

Write question here for upto two lines?

+
+
+
+

The Goods and Services Tax is a unified, + multi-stage, and consumption-based tax + levied on the supply of goods or services, + combining all stages such as manufacture

+
+
+ +
+
+
+

Write question here for upto two lines?

+
+
+
+

The Goods and Services Tax is a unified, + multi-stage, and consumption-based tax + levied on the supply of goods or services, + combining all stages such as manufacture

+
+
+
+ + + +``` \ No newline at end of file diff --git a/docs/docs/font-weight.md b/docs/docs/font-weight.md index 9225151..6f4d44b 100644 --- a/docs/docs/font-weight.md +++ b/docs/docs/font-weight.md @@ -10,6 +10,7 @@ Control the font weight of an element using the `lil-font-{weight}` utilities. <>

Light

Normal

+

Semibold

Bold

``` diff --git a/docs/docs/presscard.md b/docs/docs/presscard.md new file mode 100644 index 0000000..60cfa97 --- /dev/null +++ b/docs/docs/presscard.md @@ -0,0 +1,49 @@ +--- +id: presscard +title: Press Card +sidebar_label: Press Card +--- + +##### Press Card + +```html live +<> +
+
+
+ 2019 +
+
+ BW Disrupt
TechTors +
+
+ this is the image +
+
+ +
+
+ 2019 +
+
+ Tech leader of
the year
+
+ this is the image +
+
+ +
+
+ 2019 +
+
+ BW Disrupt
TechTors +
+
+ this is the image +
+
+
+ + +``` diff --git a/docs/docs/reinforcement.md b/docs/docs/reinforcement.md new file mode 100644 index 0000000..2321930 --- /dev/null +++ b/docs/docs/reinforcement.md @@ -0,0 +1,23 @@ +--- +id: reinforcement +title: Reinforcement +sidebar_label: Reinforcement +--- + +##### Reinforcement + +```html live +<> +
+
+
+ Ready to get started? +
+
+ + +
+
+
+ +``` \ No newline at end of file diff --git a/docs/sidebars.js b/docs/sidebars.js index c42f187..f9703be 100755 --- a/docs/sidebars.js +++ b/docs/sidebars.js @@ -16,7 +16,11 @@ module.exports = { }, "box-shadow", "button", - "cards", + { + type: "category", + label: "Cards", + items: ["cards", "faq-card", "presscard"], + }, "colors", "cursor", "grid", @@ -25,6 +29,7 @@ module.exports = { label: "Promise", items: ["promise-h", "promise-v"], }, + "reinforcement", { type: "category", label: "Typography", diff --git a/package.json b/package.json index 6979f03..2360d34 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "scripts": { "build": "npm-run-all -s build:tailwind build:uglify", "build:tailwind": "npx postcss src/littlegiant.css -o css/littlegiant.css", + "build:tailwind-watch": "npx postcss src/littlegiant.css -o css/littlegiant.css --watch", "build:uglify": "uglifycss css/littlegiant.css > css/littlegiant.min.css", "clean-deps": "clean-deps", "docs": "cd docs && npm start", diff --git a/src/components/Card/FAQcard.css b/src/components/Card/FAQcard.css new file mode 100644 index 0000000..6617324 --- /dev/null +++ b/src/components/Card/FAQcard.css @@ -0,0 +1,21 @@ +.lil-faqcard { + /* + background-color needs to be updated + */ + height: 280px; + width: 250px; + background-color: #1c314f; + @apply lil-rounded-xl lil-p-5 lil-cursor-pointer lil-text-center lil-m-2 lil-flex-col lil-justify-between; +} + +.lil-faqcard > .lil-faqcard-faq-wrapper { + @apply lil-mr-5 lil-w-full; +} + +.lil-faqcard-faq-wrapper .lil-faqcard-faq { + @apply lil-text-s-20 lil-text-left lil-text-white lil-font-semibold lil-mr-5 lil-whitespace-normal; +} + +.lil-faqcard > .lil-faqcard-content { + @apply lil-text-left lil-text-base lil-opacity-50 lil-text-white lil-mt-6 lil-whitespace-normal; +} diff --git a/src/components/Card/presscard.css b/src/components/Card/presscard.css new file mode 100644 index 0000000..a015b47 --- /dev/null +++ b/src/components/Card/presscard.css @@ -0,0 +1,18 @@ +.lil-presscard { + height: 280px; + width: 280px; + @apply lil-rounded-xl lil-bg-white lil-align-middle lil-m-4; +} + +/* +Colors have to be modified for .lil-presscard-heading & .lil-presscard-content +*/ +.lil-presscard > .lil-presscard-heading { + @apply lil-text-base lil-text-black lil-text-center lil-mx-2 lil-my-3 lil-h-12; +} +.lil-presscard > .lil-presscard-content { + @apply lil-text-s-24 lil-text-blue-300 lil-text-center lil-font-bold lil-h-24 lil-whitespace-normal; +} +.lil-presscard > .lil-presscard-image { + @apply lil-flex lil-justify-center lil-items-center lil-mx-2 lil-h-24; +} diff --git a/src/components/Reinforcement/reinforcement.css b/src/components/Reinforcement/reinforcement.css new file mode 100644 index 0000000..829f98c --- /dev/null +++ b/src/components/Reinforcement/reinforcement.css @@ -0,0 +1,33 @@ +.lil-reinforcement { + height: 408px; + background-color: #ffd240; + background-image: radial-gradient(at top right, #1778f9 30%, #ffd240 10%); + @apply lil-w-full lil-flex lil-items-center lil-rounded-xl; +} + +.lil-reinforcement > .lil-reinforcement-content-wrapper { + @apply lil-px-12 lil-my-3 lil-justify-between; +} + +.lil-reinforcement-content-wrapper > .lil-reinforcement-title { + color: #4e3b00; + @apply lil-text-s-48 lil-text-left lil-font-bold; +} + +.lil-reinforcement-content-wrapper > .lil-reinforcement-button-wrapper { + @apply lil-flex lil-mt-5; +} + +@screen sm { + .lil-reinforcement { + background-image: none; + @apply lil-w-full lil-h-48 lil-flex lil-items-center lil-rounded-lg; + } + .lil-reinforcement-content-wrapper > .lil-reinforcement-title { + @apply lil-flex-wrap lil-text-s-28 lil-text-left lil-font-bold lil-whitespace-normal; + } + + .lil-reinforcement-content-wrapper > .lil-reinforcement-button-wrapper { + @apply lil-flex lil-flex-wrap lil-mt-2 lil-justify-between; + } +} diff --git a/src/index.css b/src/index.css index c797750..c7aea44 100644 --- a/src/index.css +++ b/src/index.css @@ -2,3 +2,7 @@ @import "./components/Card/card.css"; @import "./components/Promise/promise.css"; @import "./components/Text/text.css"; +@import "./components/Card/FAQcard.css"; +@import "./components/Card/presscard.css"; +@import "./components/Reinforcement/reinforcement.css" + diff --git a/tailwind.config.js b/tailwind.config.js index 601c974..9b1fbec 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -79,6 +79,7 @@ module.exports = { fontWeight: { light: 300, normal: 400, + semibold: 600, bold: 700, }, letterSpacing: false, @@ -87,7 +88,13 @@ module.exports = { tight: 1.2, loose: 1.5, }, - opacity: false, + opacity: { + '0': '0', + '25': '0.25', + '50': '0.5', + '75': '0.75', + '100': '1', + }, screens: { sm: { max: "767px",