Card

<>
 <Card layout="horizontal" className="bg-mint">
    <Content>
      <Heading level={4}>Stovnerparken</Heading>
      <p>5 min gange</p>
    </Content>
    <Park />
  </Card>
</>

<Card className="bg-blue-dark text-white">
  <Park />
    <Content>
      <Heading level={5}>Vaktmestertjenester</Heading>
      <p>Vi har en voksende liste med dyktige vaktmestertjenster som OBOS har gode avtaler med. Finn en som passer ditt borettslag</p>
      <CardLink className="group/cta mt-1">
        <Button href="#cta" variant="tertiary">
          Finn vaktmester
          <ArrowRight className="transition-transform group-hover/cta:motion-safe:translate-x-1" />
        </Button>
      </CardLink>
    </Content>
  </Card>

() => <Card className="w-72">
    <Media>
      <img alt="" src="https://obos.brandmaster.com/fr/gallery/14069/images/lowres/0a4467bc-7f8d-40ff-93cd-827d005a51d6.png?cacheVersion=1715682090" />
    </Media>
    <Content>
      <Heading level={3}>Bli kjent med Rødsberget</Heading>
      <p>Nytt nabolag står klart i Fredrikstad, se de nye boligene i et fredelig område.</p>
      <CardLink className="group/cta">
        <Button href="#cta" variant="tertiary">
          Se boligene
          <ArrowRight className="transition-transform group-hover/cta:motion-safe:translate-x-1" />
        </Button>
      </CardLink>
    </Content>
  </Card>

<Card layout="horizontal">
  <Media>
    <img alt="" src="https://obos.brandmaster.com/fr/gallery/14069/images/lowres/0a4467bc-7f8d-40ff-93cd-827d005a51d6.png?cacheVersion=1715682090" />
  </Media>
    <Content>
      <Heading level={3}>Bli kjent med Rødsberget</Heading>
      <p>Nytt nabolag står klart i Fredrikstad, se de nye boligene i et fredelig område.</p>
      <CardLink className="group/cta">
        <Button href="#cta" variant="tertiary">
          Se boligene
          <ArrowRight className="transition-transform group-hover/cta:motion-safe:translate-x-1" />
        </Button>
      </CardLink>
    </Content>
</Card>

<Card layout="horizontal" variant="outlined" className="w-96 max-w-full">
    <UNSAFE_Avatar src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/v1578474487/Boligkonferansen/obosbk%202017/Daniel_Kj%C3%B8rberg_Siraj_1x1.jpg" />
  <Content>
    <div className="flex flex-col-reverse gap-2">
      <Heading level={3}>Daniel Kjørberg Siraj</Heading>
      <small>Konsernsjef (CEO)</small>
    </div>
    <p>Dette kortet er liggende, med et rundt bilde til høyre</p>
  </Content>
</Card>

<Card>
    <Media>
      <img alt="" src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/obos-logo-socialmeta.jpg" />
    </Media>
    <Content>
      <Heading level={5}>Med bilde og CTA</Heading>
      <p>Dette kortet har bilde og er klikkbart mot en CTA-lenke</p>
      <CardLink className="group/cta">
        <Button href="#cta" variant="tertiary">
          Les mer
          <ArrowRight className="transition-transform group-hover/cta:motion-safe:translate-x-1" />
        </Button>
      </CardLink>
    </Content>
  </Card>

<Card className="bg-blue-dark text-white">
    <Content>
      <Heading level={5}>Interaktivt kort med CTA</Heading>
      <p>Dette kortet har en klikkbar CTA-lenke.</p>
      <CardLink className="group/cta mt-1">
        <Button href="#cta" variant="tertiary">
          Les mer
          <ArrowRight className="transition-transform group-hover/cta:motion-safe:translate-x-1" />
        </Button>
      </CardLink>
    </Content>
  </Card>

<Card variant="outlined" className="w-72">
  <Media>
    <Badge color="blue-dark" size="large">
      <InfoCircle />
        Meldefrist
    </Badge>
    <img alt="" src="https://res.cloudinary.com/obosit-prd-ch-clry/image/upload/f_auto,c_limit,w_2048,q_auto/v1582122753/Boligprosjekter/Oslo/Ulven/Ulven-N%C3%A6romr%C3%A5de-Oslo-OBOS-Construction-city.jpg" />
  </Media>
  <Content className="flex-grow">
    <div className="grid gap-1">
      <Heading level={3}>
        <CardLink href="#card">Rødbergvn 88C</CardLink>
      </Heading>
      <small className="description">Bjerke - Oslo</small>
    </div>
    <small className="description -order-1">
      Forhåndsvarsling - Saksnr. F0347565
    </small>
    <p className="font-semibold">100 m² | Prisantydning 9 600 000 kr</p>
    <p className="flex gap-x-1">
      <House /> Rekkehus/småhus
    </p>
    <p className="flex gap-x-1">
      <Bed /> 3 soverom
    </p>
    <p className="flex gap-x-1">
      <PiggyBank /> Totalpris 9 989 838
    </p>
    <Badge size="small" color="mint">
      Visning 13. oktober
    </Badge>
    <Footer className="relative grid gap-y-2">
      <hr className="border-t border-t-current" />
      <Button href="#other-link" variant="tertiary">
        Se prospekt
        <Documents />
      </Button>
    </Footer>
  </Content>
</Card>

<Card layout="horizontal" variant="outlined">
  <Content>
    <Heading level={3}>Med ikon til høyre</Heading>
    <p>
      Dette kortet er liggende, har et ikon til høyre og er klikkbart mot en
      CTA-lenke
    </p>
    <CardLink className="group/cta">
      <Button href="#cta" variant="tertiary">
        Les mer
        <ArrowRight className="transition-transform group-hover/cta:motion-safe:translate-x-1" />
      </Button>
    </CardLink>
  </Content>
  <PiggyBank />
</Card>