Summary

For displaying a list of requirements, some instructions, or perhaps some general information. Always has an icon and title, can also have a content block and a help icon with some popover text.

  • Verify your address
    10 Downing Street, Westminster, London SW1A 2AA.
    Change address
  • You verified your address
    10 Downing Street, Westminster, London SW1A 2AA.
    Change address
  • We’re verifying your address
    10 Downing Street, Westminster, London SW1A 2AA.
    Change address

Props

NamePropTypeRequiredDefault ValueAllowed ValuesDescription
actionshapefalsenull[{"text":"node"},{"href":"string"},{"aria-label":"string"},{"target":"string"},{"onClick":"func"}]Action displayed at the bottom of the Summary
asstringfalsedivDecides which html element should wrap the Summary
classNamestringfalsenullExtra classes applied to Summary
contentcustomfalsenull@deprecated please use description instead
descriptionnodefalsecontentSummary description
helpcustomfalsenull@deprecated please use info instead
iconcustomfalseMain Summary Icon
illustrationcustomfalsenull@deprecated please use icon instead
infoshapefalsehelp[{"aria-label":"string"},{"content":"node"},{"onClick":"func"},{"presentation":"enum"},{"title":"node"}]Infos displayed on help Icon click inside Popover or Modal
statusenumfalsenull
  • notDone
  • done
  • pending
Decides the badge applied to Icon
titlenodetrueSummary title
Edit these docs on Github