Material UI: React components that implement Material Design (original) (raw)

<Card
  variant="outlined"
  sx={{ p: 2, display: 'flex', flexWrap: 'wrap', zIndex: 1 }}
>
  <CardMedia
    component="img"
    width="100"
    height="100"
    alt="123 Main St, Phoenix, AZ cover"
    src="/images/real-estate.png"
    sx={{
      borderRadius: '6px',
      width: { xs: '100%', sm: 100 },
    }}
  />
  <Box sx={{ alignSelf: 'center', ml: 2 }}>
    <Typography variant="body2" sx={{ color: 'text.secondary', fontWeight: 'regular' }}>
      123 Main St, Phoenix, AZ, USA
    </Typography>
    <Typography sx={{ fontWeight: 'bold' }} noWrap gutterBottom>
      <span class="katex"><span class="katex-mathml"><math xmlns="http://www.w3.org/1998/Math/MathML"><semantics><mrow><mn>280</mn><mi>k</mi><mo>−</mo></mrow><annotation encoding="application/x-tex">280k - </annotation></semantics></math></span><span class="katex-html" aria-hidden="true"><span class="base"><span class="strut" style="height:0.7778em;vertical-align:-0.0833em;"></span><span class="mord">280</span><span class="mord mathnormal" style="margin-right:0.03148em;">k</span><span class="mord">−</span></span></span></span>310k
    </Typography>
    <Chip
      size="small"
      variant="outlined"
      icon={<InfoRounded />}
      label="Confidence score: 85%"
      sx={(theme) => ({
        '.MuiChip-icon': { fontSize: 16, ml: '4px', color: 'success.500' },
        bgcolor: 'success.50',
        borderColor: 'success.100',
        color: 'success.900',
        ...theme.applyDarkStyles({
          bgcolor: 'primaryDark.700',
          color: 'success.200',
          borderColor: 'success.900',
        }),
      })}
    />
  </Box>
</Card>