Card

Marketing Card

Cards display related information for previews, while modals focus users on critical actions like confirmations. Together, they enhance clarity and streamline interactions.

AA

WCAG 2.1 accessibility compliant

Cyberdyne systems

Will Skynet rule the world?

Learn more

Cyberdyne systems

Will Skynet rule the world?

Learn more

Component Specs

Cyberdyne systems

Will Skynet rule the world?

Learn more

24

24

24

24

Cyberdyne systems

Will Skynet rule the world?

Learn more

24

24

24

24

Cyberdyne systems

Will Skynet rule the world?

Learn more

24

24

24

24

Cyberdyne systems

Will Skynet rule the world?

Learn more

3

2

1

4

Cyberdyne systems

Will Skynet rule the world?

Learn more

3

2

1

4

Cyberdyne systems

Will Skynet rule the world?

Learn more

3

2

1

4

1

1

1

Background Image

2

2

2

Badge

3

3

3

Heading / 7XL

4

4

4

Button / Primary

React Native



<CardMarketing
  imageSource={require("../assets/ai.png")}
  badgeText="Cyberdyne Systems"
  headingText="Will Skynet Rule The World?"
  accessible={true}
  accessibilityRole="region"
  accessibilityLabel="Cyberdyne Systems marketing card about Skynet"
  importantForAccessibility="yes"
  accessibilityHint="Marketing information about Skynet technology"
>
  <CardFooter
    className="absolute bottom-0 w-full flex-row justify-between mt-0"
    accessible={false}
    importantForAccessibility="no"
  >
    <View
      style={{ flex: 1, marginRight: 8 }}
      accessible={false}
      importantForAccessibility="no-hide-descendants"
    >
      <Button
        variant="default"
        textSize="md"
        className="w-full rounded-full"
        accessibilityRole="button"
        accessibilityLabel="Learn more about Skynet"
        accessibilityHint="Opens more information about Skynet technology"
        importantForAccessibility="yes"
        accessibilityState={{ disabled: false }}
      >
        Learn More
      </Button>
    </View>
  </CardFooter>
</CardMarketing>;

WCAG 2.1 accessibility checks

1.3.1 Info and Relationships (Level A)

1.4.3 Contrast (Minimum) (Level AA)

2.4.6 Headings and Labels (Level AA)

4.1.2 Name, Role, Value (Level A)

4.1.3 Status Messages (Level AA)

Mobile App Starter Kit

·

©

2025

All rights reserved, Studio Hola.

Mobile App Starter Kit

·

©

2025

All rights reserved, Studio Hola.

Mobile App Starter Kit

·

©

2025

All rights reserved, Studio Hola.