conduction-components/src/components/card/RichContentCard/RichContentCard.module.css

React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)

.container {
  display: flex;
  flex-direction: column;
  border: var(--nlportal-document-border, 1px solid);
  border-radius: var(--nlportal-border-radius);

  padding-inline-start: var(--nlportal-space-inline-md);
  padding-inline-end: var(--nlportal-space-inline-md);
  padding-block-start: var(--nlportal-space-block-md);
  padding-block-end: var(--nlportal-space-block-xl);
}

.container > *:not(.link):not(:last-child) {
  margin-block-end: var(--nlportal-space-block-md);
}

.link {
  margin-block-end: var(--nlportal-space-block-xs);
}

.link > :first-child {
  display: flex;
}

.labelsWithIcon {
  display: flex;
  flex-wrap: wrap;
}

.labelsWithIcon > *:not(:last-child) {
  margin-inline-end: var(--nlportal-space-block-md);
}

.tags > *:not(:last-child) {
  margin-inline-end: var(--nlportal-space-inline-md);
}

.contentLinks > *:not(:last-child):not(hr) {
  margin-block-end: var(--nlportal-space-block-xs);
}

/* Component: LabelWithIcon */
.labelWithIcon {
  display: flex;
  align-items: center;
  color: var(--denhaag-color-grey-3);
}

.labelWithIcon > .labelWithIcon_icon > svg {
  height: var(--conduction-rich-card-label-with-icon-icon-size);
  width: var(--conduction-rich-card-label-with-icon-icon-size);
  margin-inline-end: var(--nlportal-space-inline-xs);
}

.labelWithIcon > .labelWithIcon_label {
  font-size: var(--conduction-rich-card-label-with-icon-label-size);
}

/* Component: Tag */
.tag {
  font-size: var(--conduction-tag-font-size);
  background-color: var(--denhaag-color-grey-1);
  border-radius: var(--nlportal-document-border-radius);
  padding-inline-start: var(--nlportal-space-inline-xs);
  padding-inline-end: var(--nlportal-space-inline-xs);
  padding-block-start: var(--nlportal-space-block-xs);
  padding-block-end: var(--nlportal-space-block-xs);
}

/* Content Link */
.contentLink {
  display: flex;
  padding-block-start: var(--nlportal-space-block-xs);
  padding-block-end: var(--nlportal-space-block-xs);
  text-decoration: none !important;
}

.contentLink > span {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.contentLink:hover {
  cursor: pointer;
}

.contentLink_content {
  display: flex;
  flex-direction: column;
}

.contentLink_title {
  font-size: var(--conduction-content-link-font-size);
}

.contentLink_subTitle {
  font-size: var(--conduction-content-link-font-size);
  color: var(--denhaag-color-grey-3);
}