Skip to main content

ContentTag

Examples

Light Theme (default)

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

Dark Theme

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

Brand Theme

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

With darker variant prop

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

Example: Simple Card (defaults to light theme)

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>

Example: Card with 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>

Example: Card with Image Background with light tag override

Cards with background images default to the dark theme but passing a variant overrides this.

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"
        variant="standout-light"
      />
    </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>

Example: Multiple Cards with supported themes

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>

Example: Stack to demonstrate behaviour in full width blocks

ScienceDirect
ClinicalKey
Nursing Education
SciVal
Complete Anatomy
ClinicalKey AI
Academic & Government
Artificial Intelligence
Code
<Stack gap="16px">
  <ContentTag
    text="ScienceDirect"
    variant="darker"
  />
  <ContentTag
    text="ClinicalKey"
    variant="darker"
  />
  <Box
    atoms={{
      inlineSize: 'full'
    }}
    theme="brand"
  >
    <ContentTag text="Nursing Education" />
  </Box>
  <Box
    atoms={{
      inlineSize: 'full'
    }}
    theme="brand"
  >
    <ContentTag text="SciVal" />
  </Box>
  <ContentTag text="Complete Anatomy" />
  <ContentTag text="ClinicalKey AI" />
  <ContentTag
    text="Academic & Government"
    variant="standout-light"
  />
  <ContentTag
    text="Artificial Intelligence"
    variant="standout-light"
  />
</Stack>

Props

text

string

variant

"darker" | "standout-light"