How to style elements of Imported Card

[ABansal11]

Hello @Oli8,

I had a question regarding styling the elements that constitute a card. This may be a general question, but I was hoping I could find help here as I am using this theme on my website.

Code:

<Card title={name} {image} imageAlt="{name}'s pic" subTitle={description} width="15.5em" >

I have a card defined as above. I want to change the specific color of the title and subTitle. How might I do this? I was not sure how to add styling to the elements of the card.

[Oli8]

Hey,

You could use title and subTitle slots instead of props:

<Card {image} imageAlt="{name}'s pic" width="15.5em">
  <span slot="title" class="text-warning">
    {name}
  </span>
  <span slot="subTitle" class="text-danger">
    {description}
  </span>
  Card Content
</Card>

Then either use color utilities classes or add a selector and use regular css.

[ABansal11]

Hey @Oli8 ,

That worked great! I had one other related question: How would I go about doing the same thing with the width of the card?

For context, I am trying to optimize the website for mobile, so I would like to ideally use a media query to change the width of the card at a given screen size. However, I was not sure how I could do that for the card component.

Also, I would like the image to automatically scale to the card's width while maintaining its aspect ratio.

Thank you for your help!

[Oli8]

You should probably use papercss grid, we should soon have components for that matter in spaper but you can still use it via good old HTML.

<div class="row">
  {#each ... }
    <div class="col lg-3 md-6 sm-12">
      <Card ... >...</Card>
    </div>
  {/each }
</div>

This will get you four cards on a row in "large" screens, two in "medium" screens and one in "small".

Regarding the image size, I don't have a good solution on the top of my head, maybe something with max-height/width or something more complex with javascript watching images dimension and resizing them.