webpack-bootstrap-ui-kit/src/html/Elements/Content.html

<div class="content-element__content">
	<h2 class="content-element__title">Content Demo</h2>
	<div class="typography">
		<h3><i class="fas fa-search"></i> Quick start</h3>
		<ol>
			<li>
				<p>Clone quick start repository</p>
				<pre>
git clone https://github.com/a2nt/webpack-bootstrap-ui-kit-quick-start.git</pre
				>
			</li>
			<li>
				<p>Install npm packages</p>
				<pre>
				cd ./webpack-bootstrap-ui-kit-quick-start.git
				npm install
			</pre
				>
			</li>
			<li>
				<p>Edit ./src files</p>
			</li>
			<li>
				<p>Start development server at https://127.0.0.1:8001/:</p>
				<pre>yarn start</pre>
				<p>Compile:</p>
				<pre>yarn build</pre>
			</li>
		</ol>
		<h2>
			<i class="fas fa-search"></i> Header #2
			<i class="fas fa-search"></i>
		</h2>
		<p>
			<img
				src="https://placehold.it/200x200"
				alt="Test Image"
				class="image right"
			/>Content Text Lorem Ipsum is simply dummy text of the printing and
			typesetting industry. Lorem Ipsum has been the industry's standard
			dummy text ever since the 1500s, when an unknown printer took a
			galley of type and scrambled it to make a type specimen book. It has
			survived not only five centuries, but also the leap into electronic
			typesetting, remaining essentially unchanged. It was popularised in
			the 1960s with the release of Letraset sheets containing Lorem Ipsum
			passages, and more recently with desktop publishing software like
			Aldus PageMaker including versions of Lorem Ipsum.
		</p>
		<ol>
			<li>
				First
				<ul>
					<li>First</li>
					<li>
						Second
						<ol>
							<li>First</li>
							<li>Second</li>
							<li>Third</li>
						</ol>
						<ul>
							<li>First</li>
							<li>Second</li>
							<li>Third</li>
						</ul>
					</li>
					<li>
						<p>
							Content Text Lorem Ipsum is simply dummy text of the
							printing and typesetting industry. Lorem Ipsum has
							been the industry's standard dummy text ever since
							the 1500s, when an unknown printer took a galley of
							type and scrambled it to make a type specimen book.
							It has survived not only five centuries, but also
							the leap into electronic typesetting, remaining
							essentially unchanged. It was popularised in the
							1960s with the release of Letraset sheets containing
							Lorem Ipsum passages, and more recently with desktop
							publishing software like Aldus PageMaker including
							versions of Lorem Ipsum.
						</p>
					</li>
				</ul>
			</li>
			<li>
				<p>{paragraph} Second</p>
				<p>{paragraph} Second #2</p>
			</li>
			<li>
				<p>
					Content Text Lorem Ipsum is simply dummy text of the
					printing and typesetting industry. Lorem Ipsum has been the
					industry's standard dummy text ever since the 1500s, when an
					unknown printer took a galley of type and scrambled it to
					make a type specimen book. It has survived not only five
					centuries, but also the leap into electronic typesetting,
					remaining essentially unchanged. It was popularised in the
					1960s with the release of Letraset sheets containing Lorem
					Ipsum passages, and more recently with desktop publishing
					software like Aldus PageMaker including versions of Lorem
					Ipsum.
				</p>
			</li>
		</ol>
		<h2 class="text-center">Responsive Table #1: Default</h2>
		<table>
			<thead>
				<tr>
					<th>Header #1</th>
					<th>Header #2</th>
					<th>Header #3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td data-label="Header #1">#1-1</td>
					<td data-label="Header #2">#1-2</td>
					<td data-label="Header #3">#1-3</td>
				</tr>
				<tr>
					<td data-label="Header #1">#2-1</td>
					<td data-label="Header #2">#2-2</td>
					<td data-label="Header #3">#2-3</td>
				</tr>
				<tr>
					<td data-label="Header #1">#3-1</td>
					<td data-label="Header #2">#3-2</td>
					<td data-label="Header #3">#3-3</td>
				</tr>
			</tbody>
		</table>
		<p class="text-justify">
			Content Text Lorem Ipsum is simply dummy text of the printing and
			typesetting industry. Lorem Ipsum has been the industry's standard
			dummy text ever since the 1500s, when an unknown printer took a
			galley of type and scrambled it to make a type specimen book. It has
			survived not only five centuries, but also the leap into electronic
			typesetting, remaining essentially unchanged. It was popularised in
			the 1960s with the release of Letraset sheets containing Lorem Ipsum
			passages, and more recently with desktop publishing software like
			Aldus PageMaker including versions of Lorem Ipsum.
		</p>
		<h2 class="text-center">Responsive Table #2: Border-less</h2>
		<table class="table-none">
			<thead>
				<tr>
					<th>Header #1</th>
					<th>Header #2</th>
					<th>Header #3</th>
				</tr>
			</thead>
			<tbody>
				<tr>
					<td data-label="Header #1">#1-1</td>
					<td data-label="Header #2">#1-2</td>
					<td data-label="Header #3">#1-3</td>
				</tr>
				<tr>
					<td data-label="Header #1">#2-1</td>
					<td data-label="Header #2">#2-2</td>
					<td data-label="Header #3">#2-3</td>
				</tr>
				<tr>
					<td data-label="Header #1">#3-1</td>
					<td data-label="Header #2">#3-2</td>
					<td data-label="Header #3">#3-3</td>
				</tr>
			</tbody>
		</table>
	</div>
</div>