jsx
1
<div style={styles}>
2
  <Card
3
    hoverAnimation
4
    kind="secondary"
5
    css={{
6
      display: 'flex',
7
      flexDirection: 'column',
8
      alignItems: 'center',
9
      '&:hover': {
10
        '.button': {
11
          backgroundColor: '#fff',
12
          color: '#000',
13
        },
14
        '[data-fi="typography-highlight"]': {
15
          backgroundColor: '#fff',
16
        },
17
        h2: {
18
          color: '#fff',
19
        },
20
      },
21
    }}
22
  >
23
    <CardHeader>Fibra 600Mb</CardHeader>
24
    <CardBody>
25
      <H2
26
        isHighLight
27
        align="center"
28
        highLightKind="secondary"
29
        css={{ color: '#000' }}
30
      >
31
        14'90€
32
      </H2>
33
    </CardBody>
34
    <CardFooter>
35
      <Button kind="secondary" className="button">
36
        La quiero
37
      </Button>
38
    </CardFooter>
39
  </Card>
40
</div>

jsx
1
<div style={styles}>
2
  <Card
3
    kind="secondary"
4
    css={{
5
      display: 'flex',
6
      flexDirection: 'column',
7
      alignItems: 'center',
8
    }}
9
  >
10
    <CardHeader>Fibra 600Mb</CardHeader>
11
    <CardBody>
12
      <H2
13
        isHighLight
14
        align="center"
15
        highLightKind="secondary"
16
        css={{ color: '#000' }}
17
      >
18
        14'90€
19
      </H2>
20
    </CardBody>
21
    <CardFooter>
22
      <Button kind="secondary">La quiero</Button>
23
    </CardFooter>
24
  </Card>
25
</div>