@digigov/css 1.2.1-2702533a → 1.3.0-01ea6f24

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (66) hide show
  1. package/dist/base/index.css +1 -1
  2. package/dist/base.js +1 -1
  3. package/dist/components.js +1 -1
  4. package/dist/digigov.css +3 -3
  5. package/dist/utilities/index.css +1 -1
  6. package/dist/utilities.js +1 -1
  7. package/package.json +1 -1
  8. package/src/components/accordion.css +37 -37
  9. package/src/components/admin-header.css +9 -9
  10. package/src/components/admin-layout.css +8 -8
  11. package/src/components/autocomplete.css +31 -31
  12. package/src/components/back-to-top.css +4 -4
  13. package/src/components/bottom-info.css +2 -2
  14. package/src/components/breadcrumbs.css +5 -5
  15. package/src/components/button.css +47 -47
  16. package/src/components/card.css +27 -27
  17. package/src/components/checkboxes.css +17 -17
  18. package/src/components/chip.css +16 -16
  19. package/src/components/copy-to-clipboard.css +18 -18
  20. package/src/components/details.css +4 -4
  21. package/src/components/dev-theme.css +1 -1
  22. package/src/components/drawer.css +30 -30
  23. package/src/components/dropdown.css +37 -37
  24. package/src/components/experimental.css +10 -10
  25. package/src/components/fillable.css +3 -3
  26. package/src/components/filter.css +51 -51
  27. package/src/components/footer.css +24 -24
  28. package/src/components/form.css +85 -85
  29. package/src/components/full-page-background.css +1 -1
  30. package/src/components/header.css +40 -40
  31. package/src/components/hidden.css +11 -11
  32. package/src/components/kitchensink.css +18 -18
  33. package/src/components/layout.css +31 -31
  34. package/src/components/loader.css +11 -11
  35. package/src/components/masthead.css +23 -23
  36. package/src/components/misc.css +11 -11
  37. package/src/components/modal.css +11 -11
  38. package/src/components/nav.css +48 -48
  39. package/src/components/notification-banner.css +15 -15
  40. package/src/components/pagination.css +24 -24
  41. package/src/components/panel.css +4 -4
  42. package/src/components/phase-banner.css +7 -7
  43. package/src/components/radios.css +15 -15
  44. package/src/components/skiplink.css +1 -1
  45. package/src/components/stack.css +22 -22
  46. package/src/components/stepnav.css +42 -42
  47. package/src/components/summary-list.css +32 -32
  48. package/src/components/svg-icons.css +26 -29
  49. package/src/components/table.css +98 -98
  50. package/src/components/tabs.css +18 -18
  51. package/src/components/task-list.css +20 -20
  52. package/src/components/timeline.css +16 -16
  53. package/src/components/typography.css +87 -87
  54. package/src/components/warning-text.css +6 -6
  55. package/src/pages/admin-filtering-data.js +86 -86
  56. package/src/pages/admin.js +36 -36
  57. package/src/pages/dropdown.js +109 -109
  58. package/src/pages/form.js +210 -210
  59. package/src/pages/headings/service-heading.js +9 -9
  60. package/src/pages/index.js +201 -201
  61. package/src/pages/pagination.js +49 -49
  62. package/src/pages/table.js +223 -223
  63. package/src/utilities/index.css +195 -195
  64. package/src/utilities/utilities.css +416 -416
  65. package/tailwind.config.js +0 -2
  66. package/themes.plugin.js +1 -1
@@ -4,149 +4,149 @@ import Image from 'next/image';
4
4
  export default function Home() {
5
5
  return (
6
6
  <div>
7
- <header className="govgr-admin-header" role="banner" data-module="govgr-header">
8
- <div className="govgr-admin-header__container">
9
- <img className="govgr-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" alt="gov.gr logo" />
7
+ <header className="ds-admin-header" role="banner" data-module="ds-header">
8
+ <div className="ds-admin-header__container">
9
+ <img className="ds-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" alt="gov.gr logo" />
10
10
  </div>
11
11
  </header>
12
- <div className="govgr-admin-wrapper">
13
- <div className="govgr-admin-width-container">
14
- <div className="govgr-admin-main-wrapper">
15
- <div className="govgr-grid__col-span-12">
16
- <h1 className="govgr-heading-xl">Αναζήτηση μεταφραστή</h1>
17
- <div className="govgr-field">
18
- <label className="govgr-label"> Αναζήτηση με λέξη-κλειδί </label>
19
- <div className="govgr-search">
20
- <input className="govgr-input" type="text" id="business-name" name="business-name" />
21
- <button className="govgr-btn govgr-input__search-btn">
22
- <svg className="govgr-svg-icon--search" focusable="false" viewBox="0 0 24 24" aria-hidden="true" >
12
+ <div className="ds-admin-wrapper">
13
+ <div className="ds-admin-width-container">
14
+ <div className="ds-admin-main-wrapper">
15
+ <div className="ds-grid__col-span-12">
16
+ <h1 className="ds-heading-xl">Αναζήτηση μεταφραστή</h1>
17
+ <div className="ds-field">
18
+ <label className="ds-label"> Αναζήτηση με λέξη-κλειδί </label>
19
+ <div className="ds-search">
20
+ <input className="ds-input" type="text" id="business-name" name="business-name" />
21
+ <button className="ds-btn ds-input__search-btn">
22
+ <svg className="ds-svg-icon--search" focusable="false" viewBox="0 0 24 24" aria-hidden="true" >
23
23
  <path d="M22,19.9l-5.4-5.4c0.9-1.3,1.4-2.8,1.4-4.5c0-4.4-3.6-8-8-8s-8,3.6-8,8s3.6,8,8,8c1.7,0,3.2-0.5,4.5-1.4l5.4,5.4L22,19.9z M10,15c-2.8,0-5-2.2-5-5s2.2-5,5-5s5,2.2,5,5S12.8,15,10,15z" />
24
24
  </svg>
25
25
  </button>
26
26
  </div>
27
27
  </div>
28
28
  </div>
29
- <aside className="govgr-admin-side-content">
30
- <div className="govgr-filter">
31
- <div className="govgr-filter__heading">
32
- <a className="govgr-link govgr-close-btn" href="#">
29
+ <aside className="ds-admin-side-content">
30
+ <div className="ds-filter">
31
+ <div className="ds-filter__heading">
32
+ <a className="ds-link ds-close-btn" href="#">
33
33
  Κλείσιμο
34
- <svg class="govgr-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
34
+ <svg class="ds-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
35
35
  </a>
36
- <h3 className="govgr-heading-md">Φίλτρα</h3>
36
+ <h3 className="ds-heading-md">Φίλτρα</h3>
37
37
  </div>
38
- <div className="govgr-filter__content">
39
- {/* <div className="govgr-filter__selected">
40
- <div className="govgr-filter__selected-heading">
41
- <h3 className="govgr-heading-sm">Επιλεγμένα φίλτρα</h3>
38
+ <div className="ds-filter__content">
39
+ {/* <div className="ds-filter__selected">
40
+ <div className="ds-filter__selected-heading">
41
+ <h3 className="ds-heading-sm">Επιλεγμένα φίλτρα</h3>
42
42
  </div>
43
- <p className="govgr-hint-sm"> Δεν έχει επιλεχθεί κάποιο φίλτρο. </p>
44
- <p className="govgr-hint-sm"> Για να προσθέσετε φίλτρο, επιλέξτε τουλάχιστον μία από τις παρακάτω επιλογές και πατήστε το κουμπί "Αναζήτηση".</p>
43
+ <p className="ds-hint-sm"> Δεν έχει επιλεχθεί κάποιο φίλτρο. </p>
44
+ <p className="ds-hint-sm"> Για να προσθέσετε φίλτρο, επιλέξτε τουλάχιστον μία από τις παρακάτω επιλογές και πατήστε το κουμπί "Αναζήτηση".</p>
45
45
  </div> */}
46
- <div className="govgr-filter__selected">
47
- <div className="govgr-filter__selected-heading">
48
- <h3 className="govgr-heading-sm">Επιλεγμένα φίλτρα</h3>
49
- <a className="govgr-link" href="#"> Καθαρισμός</a>
46
+ <div className="ds-filter__selected">
47
+ <div className="ds-filter__selected-heading">
48
+ <h3 className="ds-heading-sm">Επιλεγμένα φίλτρα</h3>
49
+ <a className="ds-link" href="#"> Καθαρισμός</a>
50
50
  </div>
51
- <h4 className="govgr-chip--heading">Περιοχή</h4>
52
- <ul className="govgr-chips">
53
- <li><a className="govgr-chip" href="#">Άλιμος
54
- <svg className="govgr-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
51
+ <h4 className="ds-chip--heading">Περιοχή</h4>
52
+ <ul className="ds-chips">
53
+ <li><a className="ds-chip" href="#">Άλιμος
54
+ <svg className="ds-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
55
55
  </a></li>
56
- <li><a className="govgr-chip" href="#">Πετρούπολη <div className="govgr-chip--x-icon">
57
- <svg className="govgr-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
56
+ <li><a className="ds-chip" href="#">Πετρούπολη <div className="ds-chip--x-icon">
57
+ <svg className="ds-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
58
58
  </div> </a></li>
59
- <li><a className="govgr-chip" href="#">Δροσιά <div className="govgr-chip--x-icon">
60
- <svg className="govgr-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
59
+ <li><a className="ds-chip" href="#">Δροσιά <div className="ds-chip--x-icon">
60
+ <svg className="ds-svg-icon--close" focusable="true" viewBox="0 0 24 24" aria-hidden="true" > <polygon points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 " /></svg>
61
61
  </div> </a></li>
62
62
  </ul>
63
63
  </div>
64
- <div className="govgr-filter__options">
65
- <div className="govgr-field">
66
- <label className="govgr-heading-sm govgr-label" for="business-name">Αναζήτηση λέξης</label>
67
- <input className="govgr-input" type="text" id="business-name" name="business-name" />
64
+ <div className="ds-filter__options">
65
+ <div className="ds-field">
66
+ <label className="ds-heading-sm ds-label" for="business-name">Αναζήτηση λέξης</label>
67
+ <input className="ds-input" type="text" id="business-name" name="business-name" />
68
68
  </div>
69
- <div className="govgr-field">
70
- <label className="govgr-heading-sm govgr-label" for="select-list">Περιοχή</label>
71
- <select className="govgr-select" id="select-list" name="select-list">
69
+ <div className="ds-field">
70
+ <label className="ds-heading-sm ds-label" for="select-list">Περιοχή</label>
71
+ <select className="ds-select" id="select-list" name="select-list">
72
72
  <option value="popular" selected>France</option>
73
73
  <option value="recently" selected>Άγιος Δημήτριος</option>
74
74
  <option value="three" selected>Άλιμος</option>
75
75
  <option value="four">Άνω Ελευσίνα</option>
76
76
  </select>
77
77
  </div>
78
- <div className="govgr-field">
79
- <fieldset className="govgr-fieldset" aria-describedby="checkboxhint">
80
- <legend className="govgr-heading-sm govgr-fieldset__legend">Γλώσσα</legend>
81
- <div className="govgr-checkboxes">
82
- <div className="govgr-checkboxes__item">
83
- <input className="govgr-checkboxes__input" type="checkbox" id="runny-nose" name="runny-nose" value="runny-nose" />
84
- <label className="govgr-label govgr-checkboxes__label" for="runny-nose">Ελληνικά
78
+ <div className="ds-field">
79
+ <fieldset className="ds-fieldset" aria-describedby="checkboxhint">
80
+ <legend className="ds-heading-sm ds-fieldset__legend">Γλώσσα</legend>
81
+ <div className="ds-checkboxes">
82
+ <div className="ds-checkboxes__item">
83
+ <input className="ds-checkboxes__input" type="checkbox" id="runny-nose" name="runny-nose" value="runny-nose" />
84
+ <label className="ds-label ds-checkboxes__label" for="runny-nose">Ελληνικά
85
85
  </label>
86
86
  </div>
87
- <div className="govgr-checkboxes__item">
88
- <input className="govgr-checkboxes__input" type="checkbox" id="fever" name="fever" value="fever" />
89
- <label className="govgr-label govgr-checkboxes__label" for="fever">Αγγλικά <br />
87
+ <div className="ds-checkboxes__item">
88
+ <input className="ds-checkboxes__input" type="checkbox" id="fever" name="fever" value="fever" />
89
+ <label className="ds-label ds-checkboxes__label" for="fever">Αγγλικά <br />
90
90
  </label>
91
91
  </div>
92
- <div className="govgr-checkboxes__item">
93
- <input className="govgr-checkboxes__input" type="checkbox" id="tiredness" name="tiredness" value="tiredness" />
94
- <label className="govgr-label govgr-checkboxes__label" for="tiredness">Γαλλικά <br />
92
+ <div className="ds-checkboxes__item">
93
+ <input className="ds-checkboxes__input" type="checkbox" id="tiredness" name="tiredness" value="tiredness" />
94
+ <label className="ds-label ds-checkboxes__label" for="tiredness">Γαλλικά <br />
95
95
  </label>
96
96
  </div>
97
97
  </div>
98
98
  </fieldset>
99
99
  </div>
100
- <button className="govgr-btn govgr-btn-primary">Αναζήτηση</button>
100
+ <button className="ds-btn ds-btn-primary">Αναζήτηση</button>
101
101
  </div>
102
102
  </div>
103
103
  </div>
104
104
  </aside>
105
- <main className="govgr-admin-main-content">
106
- <div className="govgr-results-heading">
107
- <h3 className="govgr-heading-md">146 Αποτελέσματα</h3>
108
- <div className="govgr-results-heading__actions">
109
- <a className="govgr-link" href="#"> Εξαγωγή δεδομένων</a>
110
- <a className="govgr-link govgr-link-filters" href="#"> Φίλτρα</a>
105
+ <main className="ds-admin-main-content">
106
+ <div className="ds-results-heading">
107
+ <h3 className="ds-heading-md">146 Αποτελέσματα</h3>
108
+ <div className="ds-results-heading__actions">
109
+ <a className="ds-link" href="#"> Εξαγωγή δεδομένων</a>
110
+ <a className="ds-link ds-link-filters" href="#"> Φίλτρα</a>
111
111
  </div>
112
112
  </div>
113
- <hr className="govgr-section-break govgr-section-break--visible govgr-section-break--md" />
114
- <div className="govgr-results-action-bar">
115
- <div className="govgr-field">
116
- <label className="govgr-label" for="select-list2"> Ταξινόμηση: </label>
117
- <select className="govgr-select" id="select-list2" name="select-list2">
113
+ <hr className="ds-section-break ds-section-break--visible ds-section-break--md" />
114
+ <div className="ds-results-action-bar">
115
+ <div className="ds-field">
116
+ <label className="ds-label" for="select-list2"> Ταξινόμηση: </label>
117
+ <select className="ds-select" id="select-list2" name="select-list2">
118
118
  <option value="popular" selected>Δημοφιλή</option>
119
119
  <option value="recently">Πρόσφατα</option>
120
120
  </select>
121
121
  </div>
122
- <div className="govgr-field">
123
- <label className="govgr-label" for="select-list2"> Σελίδες ανά σελίδα: </label>
124
- <select className="govgr-select" id="select-list3" name="select-list3">
122
+ <div className="ds-field">
123
+ <label className="ds-label" for="select-list2"> Σελίδες ανά σελίδα: </label>
124
+ <select className="ds-select" id="select-list3" name="select-list3">
125
125
  <option value="popular" selected>12</option>
126
126
  <option value="recently">24</option>
127
127
  <option value="recently">48</option>
128
128
  </select>
129
129
  </div>
130
130
  </div>
131
- <div className="govgr-grid govgr-grid__gap-4">
132
- <div className="govgr-card govgr-grid__col-span-12">
133
- <div className="govgr-card__body">
134
- <div role="heading" aria-level="2" className="govgr-card__heading">This is a Card</div>
135
- <div className="govgr-card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
131
+ <div className="ds-grid ds-grid__gap-4">
132
+ <div className="ds-card ds-grid__col-span-12">
133
+ <div className="ds-card__body">
134
+ <div role="heading" aria-level="2" className="ds-card__heading">This is a Card</div>
135
+ <div className="ds-card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
136
136
  </div>
137
137
  </div>
138
138
  </div>
139
- <div className="govgr-card govgr-grid__col-span-12">
140
- <div className="govgr-card__body">
141
- <div role="heading" aria-level="2" className="govgr-card__heading">This is a Card</div>
142
- <div className="govgr-card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.
139
+ <div className="ds-card ds-grid__col-span-12">
140
+ <div className="ds-card__body">
141
+ <div role="heading" aria-level="2" className="ds-card__heading">This is a Card</div>
142
+ <div className="ds-card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet.
143
143
  </div>
144
144
  </div>
145
145
  </div>
146
- <div className="govgr-card govgr-grid__col-span-12">
147
- <div className="govgr-card__body">
148
- <div role="heading" aria-level="2" className="govgr-card__heading">This is a Card</div>
149
- <div className="govgr-card__content">Lorem ipsum dolor sit amet.
146
+ <div className="ds-card ds-grid__col-span-12">
147
+ <div className="ds-card__body">
148
+ <div role="heading" aria-level="2" className="ds-card__heading">This is a Card</div>
149
+ <div className="ds-card__content">Lorem ipsum dolor sit amet.
150
150
  </div>
151
151
  </div>
152
152
  </div>
@@ -1,59 +1,59 @@
1
1
  export default function Home() {
2
2
  return (
3
3
  <div>
4
- <header className="govgr-header" role="banner" data-module="govgr-header">
5
- <div className="govgr-admin-header__container">
6
- <img className="govgr-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" alt="gov.gr logo" />
7
- {/* <div class="govgr-header__container">
8
- <input class="govgr-input" type="text" id="business-name" name="business-name" />
4
+ <header className="ds-header" role="banner" data-module="ds-header">
5
+ <div className="ds-admin-header__container">
6
+ <img className="ds-header-logo" src="https://www.gov.gr/gov_gr_logo.svg" alt="gov.gr logo" />
7
+ {/* <div class="ds-header__container">
8
+ <input class="ds-input" type="text" id="business-name" name="business-name" />
9
9
  </div> */}
10
10
  </div>
11
11
  </header>
12
- <div className="govgr-admin-main-wrapper">
13
- <div className="govgr-admin-side-content">
14
- <h4 className="govgr-heading-sm">Σχετικοί Σύνδεσμοι</h4>
15
- <nav className="govgr-vertical-nav">
16
- <a className="govgr-link govgr-vertical-nav__item govgr-vertical-nav__item--active" href="#"> Σύνδεσμος 1</a>
17
- <a className="govgr-link govgr-vertical-nav__item" href="#"> Σύνδεσμος 2</a>
18
- <a className="govgr-link govgr-vertical-nav__item" href="#"> Σύνδεσμος 3</a>
12
+ <div className="ds-admin-main-wrapper">
13
+ <div className="ds-admin-side-content">
14
+ <h4 className="ds-heading-sm">Σχετικοί Σύνδεσμοι</h4>
15
+ <nav className="ds-vertical-nav">
16
+ <a className="ds-link ds-vertical-nav__item ds-vertical-nav__item--active" href="#"> Σύνδεσμος 1</a>
17
+ <a className="ds-link ds-vertical-nav__item" href="#"> Σύνδεσμος 2</a>
18
+ <a className="ds-link ds-vertical-nav__item" href="#"> Σύνδεσμος 3</a>
19
19
  </nav>
20
20
  </div>
21
- <div className="govgr-admin-main-content">
22
- <div class="govgr-breadcrumbs">
23
- <ol class="govgr-breadcrumbs__list">
24
- <li class="govgr-breadcrumbs__list-item">
25
- <a class="govgr-breadcrumbs__link" href="#">Αρχική</a>
21
+ <div className="ds-admin-main-content">
22
+ <div class="ds-breadcrumbs">
23
+ <ol class="ds-breadcrumbs__list">
24
+ <li class="ds-breadcrumbs__list-item">
25
+ <a class="ds-breadcrumbs__link" href="#">Αρχική</a>
26
26
  </li>
27
- <li class="govgr-breadcrumbs__list-item">
28
- <a class="govgr-breadcrumbs__link" href="#">Υγεία και πρόνοια</a>
27
+ <li class="ds-breadcrumbs__list-item">
28
+ <a class="ds-breadcrumbs__link" href="#">Υγεία και πρόνοια</a>
29
29
  </li>
30
- <li class="govgr-breadcrumbs__list-item">
31
- <a class="govgr-breadcrumbs__link" href="#">Φάκελος υγείας</a>
30
+ <li class="ds-breadcrumbs__list-item">
31
+ <a class="ds-breadcrumbs__link" href="#">Φάκελος υγείας</a>
32
32
  </li>
33
- <li class="govgr-breadcrumbs__list-item">
34
- <a class="govgr-breadcrumbs__link" href="#">Άυλη συνταγογράφηση</a>
33
+ <li class="ds-breadcrumbs__list-item">
34
+ <a class="ds-breadcrumbs__link" href="#">Άυλη συνταγογράφηση</a>
35
35
  </li>
36
36
  </ol>
37
37
  </div>
38
- <span className="govgr-caption-xl"> Caption for h1 </span>
39
- <h1 className="govgr-heading-xl">Heading 1 - Κεντρικός τίτλος</h1>
40
- <div class="govgr-card--border govgr-card">
41
- <div class="govgr-card__body">
42
- <div role="heading" aria-level="2" class="govgr-card__heading">This is a Card with border</div>
43
- <div class="govgr-card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
38
+ <span className="ds-caption-xl"> Caption for h1 </span>
39
+ <h1 className="ds-heading-xl">Heading 1 - Κεντρικός τίτλος</h1>
40
+ <div class="ds-card--border ds-card">
41
+ <div class="ds-card__body">
42
+ <div role="heading" aria-level="2" class="ds-card__heading">This is a Card with border</div>
43
+ <div class="ds-card__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
44
44
  </div>
45
45
  </div>
46
46
  </div>
47
- <div class="govgr-btn-group">
48
- <button class="govgr-btn govgr-btn-primary">
47
+ <div class="ds-btn-group">
48
+ <button class="ds-btn ds-btn-primary">
49
49
  Save and continue
50
50
  </button>
51
- <button class="govgr-btn govgr-btn-secondary">Save as draft</button>
51
+ <button class="ds-btn ds-btn-secondary">Save as draft</button>
52
52
  </div>
53
- <span className="govgr-caption-lg"> Caption for h2 </span>
54
- <h2 className="govgr-heading-lg">Heading 2</h2>
55
- <span className="govgr-caption-md"> Caption for h3 </span>
56
- <h3 className="govgr-heading-md">Heading 2</h3>
53
+ <span className="ds-caption-lg"> Caption for h2 </span>
54
+ <h2 className="ds-heading-lg">Heading 2</h2>
55
+ <span className="ds-caption-md"> Caption for h3 </span>
56
+ <h3 className="ds-heading-md">Heading 2</h3>
57
57
  </div>
58
58
  </div>
59
59
  </div >