# TodayQuestionCard

Canonical page: https://docs.ovok.com/native-sdk/guide/components/journal/today-question-card

The `TodayQuestionCard` component displays daily questions and prompts in an interactive card format with gradient background support. It's designed for engaging daily health check-ins, questionnaires, and journal prompts with visual appeal and clear call-to-action elements.

## Basic Example [#basic-example]

```tsx
import { TodayQuestionCard } from "@ovok/native";
import * as React from "react";
import { IconButton } from "react-native-paper";

const BasicTodayQuestionCard = () => (
  <TodayQuestionCard>
    <TodayQuestionCard.Gradient colors={["#1a1a21", "#1a1a21", "#1a1a21"]}>
      <TodayQuestionCard.Title>Daily Check-in</TodayQuestionCard.Title>
      <TodayQuestionCard.Question>
        How are you feeling?
      </TodayQuestionCard.Question>
      <TodayQuestionCard.Actions>
        <IconButton icon="refresh" />
        <IconButton icon="arrow-right" />
      </TodayQuestionCard.Actions>
    </TodayQuestionCard.Gradient>
  </TodayQuestionCard>
);

export default BasicTodayQuestionCard;
```

## Props [#props]

Every prop, with its type and description, is listed in the [`@ovok/native/journal` API reference](/native-sdk/reference/journal).

## Compound Components [#compound-components]

- [**`TodayQuestionCard.Gradient`**](/native-sdk/guide/components/journal/today-question-card-gradient/) - Linear gradient container using `expo-linear-gradient`
- [**`TodayQuestionCard.Content`**](/native-sdk/guide/components/journal/today-question-card-content/) - Padded content container with theme spacing
- [**`TodayQuestionCard.Title`**](/native-sdk/guide/components/journal/today-question-card-title/) - Primary-colored title text
- [**`TodayQuestionCard.Question`**](/native-sdk/guide/components/journal/today-question-card-question/) - Question text with emphasis styling
- [**`TodayQuestionCard.Actions`**](/native-sdk/guide/components/journal/today-question-card-actions/) - Right-aligned action buttons container

## Component Behavior [#component-behavior]

### Card Design [#card-design]

- **Mode**: Uses `"contained"` mode for Material Design 3 elevation
- **Background**: Automatically applies `theme.colors.surface` background
- **Gradient Support**: Designed to work with gradient backgrounds for visual appeal

### Theme Integration [#theme-integration]

- **Surface Color**: Uses theme surface color as base
- **Component Colors**: Child components use appropriate theme colors
- **Responsive Design**: Adapts to different screen sizes and orientations

## Styling [#styling]

### Theme Colors Used [#theme-colors-used]

- `theme.colors.surface` - Card background color

## Related Components [#related-components]

- [**`TodayQuestionCard.Gradient`**](/native-sdk/guide/components/journal/today-question-card-gradient/) - Gradient background component
- [**`TodayQuestionCard.Content`**](/native-sdk/guide/components/journal/today-question-card-content/) - Content container component
- [**`TodayQuestionCard.Title`**](/native-sdk/guide/components/journal/today-question-card-title/) - Title text component
- [**`TodayQuestionCard.Question`**](/native-sdk/guide/components/journal/today-question-card-question/) - Question text component
- [**`TodayQuestionCard.Actions`**](/native-sdk/guide/components/journal/today-question-card-actions/) - Actions container component
- [**`PastJournalCard`**](/native-sdk/guide/components/journal/past-journal-card/) - Historical entries display