Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Card] Add example for card with footer action + plain button #1705

Merged
merged 1 commit into from
Jun 21, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions UNRELEASED.md
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
### Documentation

- Mentioned Polaris icons in the Icon component documentation ([#1693](https://github.com/Shopify/polaris-react/pull/1693))
- Added an example to `Card` for custom action layout with a secondary action and a plain button ([#1705](https://github.com/Shopify/polaris-react/pull/1705))

### Development workflow

Expand Down
24 changes: 24 additions & 0 deletions src/components/Card/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -324,6 +324,30 @@ When multiple secondary footer actions are provided, they will render in an acti
</Card>
```

### Card with custom footer actions

<!-- example-for: web -->

Use to present actionable content that is optional or not the primary purpose of the page.

```jsx
<Card title="Secure your account with 2-step authentication">
<Card.Section>
<Stack spacing="loose" vertical>
<p>
Two-step authentication adds an extra layer of security when logging in
to your account. A special code will be required each time you log in,
ensuring only you can access your account.
</p>
<ButtonGroup>
<Button>Enable two-step authentication</Button>
<Button plain>Learn more</Button>
</ButtonGroup>
</Stack>
</Card.Section>
</Card>
```

### Card with destructive footer action

<!-- example-for: web -->
Expand Down