Implementation guide
EDS components are composable, which is to say each one has a single outer <table> element and doesn't depend on external styles.
They can be used individually in an existing template or combined together to create new ones.
By switching to the "Code" tab of each components' sandbox, you can see just the HTML and CSS necessary for that component.
The "Head styles" need to be added in your template's <head> tag and provide the responsive and dark-mode styles. The "Component HTML" needs placing wherever you want to display the component.
NOTE: at this time all components are specifically targetting Salesforce Marketing Cloud (fka Pardot). This won't affect usage elsewhere, but will add some unnecessary markup.
Header
EDS / Header
Controls
Hero
EDS / Text Hero
Controls
EDS / Image Hero
Controls
Content Block
EDS / Content Block
Controls
Column Cards
EDS / Column Cards
Controls
Row Cards
EDS / Row Cards
Controls
Partner Cards
EDS / Partner Cards
Controls
Content List
EDS / Content List
Controls
Description List
EDS / Description List
Controls
Banner
EDS / Banner
Controls
Footer
EDS / Footer
Controls