@conduction/components/src/components/card/horizontalImageCard/HorizontalImageCard.module.css

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

:root {
  --conduction-horizontal-image-card-image-size: 52px;
}

.container {
  display: flex;
  align-items: center;
  cursor: pointer;
  background-color: var(--skeleton-color-grey-1);
  border-radius: var(--skeleton-border-radius-md);
}

.linkContainer {
  display: flex;
  flex-direction: column;
  padding-block-start: var(--skeleton-size-lg);
  padding-block-end: var(--skeleton-size-lg);
  padding-inline-end: var(--skeleton-size-lg);
}

.imageOrIconContainer > :first-child {
  width: var(--conduction-horizontal-image-card-image-size);
  height: var(--conduction-horizontal-image-card-image-size);

  padding-inline-start: var(--skeleton-size-md);
  padding-inline-end: var(--skeleton-size-md);
  padding-block-start: var(--skeleton-size-md);
  padding-block-end: var(--skeleton-size-md);
}

.title {
  font-weight: var(--skeleton-font-weight-bold);
  font-size: var(--skeleton-font-size-xl);
}

.link > * {
  margin-inline-end: 8px;
}