Step Cards are used to choose which step to add to a Deployment Process. They display a logo (Third Party Logo), name, publisher, description, a list of dot points, a Chip, and Buttons.
Anatomy
Anatomy summary lists and describes all the elements within a component (including nested components).
|
Element |
Description |
Optional? |
|---|---|---|
|
1. Container |
The container for the card’s content. |
No |
|
2. Logo |
Logo (Third Party Logo) that helps visualise the type of step. |
No |
|
3. Chip |
Highlights the type of Step Template, e.g., Recommended, New, Early Access. |
Yes |
|
4. Title |
Concise title that summarises what the step will do. |
No |
|
5. Author |
The person or company who wrote the Step Template. |
No |
|
6. Description |
1 sentence of additional information to describe what the step will do. |
Yes |
|
7. Feature list |
The feature list is useful to replace the description when the step has 2–3 key capabilities. |
Yes |
|
8. Primary action |
Adds the step to the Deployment Process. |
No |
|
9. Secondary action |
Lets the user read more information about the step, if applicable. |
Yes |
Variants
Variants contain different versions of the component depending on specific properties, such as state, size, colour, optional iconography, etc.
| Property | Values | Default |
|---|---|---|
| ↳ hasFeature1 Boolean | true | false | true |
| ↳ hasFeature2 Boolean | true | false | true |
| state Variant | rest | rest |
| ↳ hasFeature3 Boolean | true | false | true |
| hasDescription Boolean | true | false | true |
| hasFeatureGroup Boolean | true | false | true |
| hasBadge Boolean | true | false | true |
| hasSecondaryAction Boolean | true | false | true |
| ✏️ name Text | string | Run a Script |
| ↳ ✏️ description Text | string | Runs a PowerShell, C#, Bash or F# script. |
| ↳ ✏️ feature1 Text | string | Feature 1 |
| ↳ ✏️ feature2 Text | string | Feature 2 |
| ↳ ✏️ feature3 Text | string | Feature 3 |
| isDisabled Variant | true | false | false |
Component dependencies
This component is internally dependent on the following components:
Button
Buttons allow users to take actions that will trigger a response.
Chip
Chip is used to categorise or classify similar items, usually via a textual label with an icon
Help and support