Skip to main content

ContentTag

Examples

Default ContentTag

Academic & Government
Code
<ContentTag text="Academic & Government" />

Dark theme ContentTag

ClinicalKey
Code
<Box theme="dark">
  <ContentTag text="ClinicalKey" />
</Box>

Brand theme ContentTag

ClinicalKey
Code
<Box theme="brand">
  <ContentTag text="ClinicalKey" />
</Box>

A ContentTag being used in a card

Normal cards default to the default (light) theme unless otherwise specified.

Code
<Box
  style={{
    maxInlineSize: '380px'
  }}
>
  <Card padded>
    <CardSubtitle>
      <ContentTag text="Who we serve" />
    </CardSubtitle>
    <UnknownElementType as="h3">
      4-year-old with fever and a rash
    </UnknownElementType>
    <UnknownElementType
      endIcon={<DownloadIcon />}
      href="/"
    >
      Download PDF
    </UnknownElementType>
  </Card>
</Box>

A ContentTag being used inside a card with an image background (defaults to dark theme)

Cards with background images default to the dark theme to ensure text contrast.

Conference

Cell Symposia

Metabolites in signaling and disease | March 2 at 18:00 CET
Register now
Code
<Box
  style={{
    maxInlineSize: '580px'
  }}
>
  <Card
    backgroundImage={{
      height: 397,
      src: '/design-system/docs/images/example-card-background.jpg',
      width: 280
    }}
    orientation="landscape"
    padded
  >
    <CardSubtitle>
      <ContentTag text="Conference" />
    </CardSubtitle>
    <UnknownElementType as="h3">
      Cell Symposia
    </UnknownElementType>
    <CardContent>
      Metabolites in signaling and disease | March 2 at 18:00 CET
    </CardContent>
    <UnknownElementType href="/">
      Register now
    </UnknownElementType>
  </Card>
</Box>

A ContentTag being used in different brand themed cards

Nursing Education

Nurse

Empowering nurses with trusted resources for clinical answers
Explore
Nursing Education

Nurse

Empowering nurses with trusted resources for clinical answers
Explore
Nursing Education

Nurse

Empowering nurses with trusted resources for clinical answers
Explore
Code
<Flex
  gap="16px"
  wrap
>
  <Box
    style={{
      flex: '0 0 280px'
    }}
  >
    <Card
      padded
      theme="light"
    >
      <CardSubtitle>
        <ContentTag text="Nursing Education" />
      </CardSubtitle>
      <UnknownElementType
        as="h3"
        startAttachment={<Icon content={<NursesIcon />} />}
      >
        Nurse
      </UnknownElementType>
      <CardContent>
        Empowering nurses with trusted resources for clinical answers
      </CardContent>
      <UnknownElementType href="/">
        Explore
      </UnknownElementType>
    </Card>
  </Box>
  <Box
    style={{
      flex: '0 0 280px'
    }}
  >
    <Card
      padded
      theme="dark"
    >
      <CardSubtitle>
        <ContentTag text="Nursing Education" />
      </CardSubtitle>
      <UnknownElementType
        as="h3"
        startAttachment={<Icon content={<NursesIcon />} />}
      >
        Nurse
      </UnknownElementType>
      <CardContent>
        Empowering nurses with trusted resources for clinical answers
      </CardContent>
      <UnknownElementType href="/">
        Explore
      </UnknownElementType>
    </Card>
  </Box>
  <Box
    style={{
      flex: '0 0 280px'
    }}
  >
    <Card
      padded
      theme="brand"
    >
      <CardSubtitle>
        <ContentTag text="Nursing Education" />
      </CardSubtitle>
      <UnknownElementType
        as="h3"
        startAttachment={<Icon content={<NursesIcon />} />}
      >
        Nurse
      </UnknownElementType>
      <CardContent>
        Empowering nurses with trusted resources for clinical answers
      </CardContent>
      <UnknownElementType href="/">
        Explore
      </UnknownElementType>
    </Card>
  </Box>
</Flex>

Props

text

string