Add InfoCard and Stud components for landing pages #1737
Conversation
🦋 Changeset detectedLatest commit: 44302aa The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
📚 Storybook DeploymentThe latest changes are available as preview in: https://d19372a6.the-guild-docs-storybook.pages.dev |
| return ( | ||
| <Root className={cn('bg-beige-100 p-6 md:p-12', className)} {...rest}> | ||
| <Stud>{icon}</Stud> | ||
| <h3 className="mt-4 text-xl font-medium leading-[1.4] text-green-1000 md:mt-6">{heading}</h3> |
There was a problem hiding this comment.
| <h3 className="mt-4 text-xl font-medium leading-[1.4] text-green-1000 md:mt-6">{heading}</h3> | |
| <h3 className="mt-4 text-xl font-medium leading-[1.4] text-green-1000 md:mt-6">{heading}</h3> |
what's 1.4 stay for I guess it's 18px?
There was a problem hiding this comment.
It's not 18px because it's text-xl. Just 1.4 of font-size. Copied it from Figma.
We can prolly remove it, as it's 20px * 1.4 == 28px, and Tailwind's text-xl includes line-height: 1.75rem which, with 16px html font-size is also 28px.
There was a problem hiding this comment.
oh thx, and yes you right, you can remove it, also for the future there is shorthand text-xl/[value-of-your-leading]
| export const Default: StoryObj<InfoCardProps> = { | ||
| args: { |
There was a problem hiding this comment.
| export const Default: StoryObj<InfoCardProps> = { | |
| args: { | |
| export const Default: StoryObj<InfoCardProps> = { | |
| name: 'InfoCard', | |
| args: { |
like in Stud
to not have a list? or do you plan to add more stories here?
Promoting these components from Hive website because we need them on the other landing pages.